import React, { useState } from 'react';
import { CheckSquare, Timer, List, Calendar, Target, Clock } from 'lucide-react';

const ProductivityApp = () => {
  const [view, setView] = useState('triage');
  const [tasks, setTasks] = useState({
    critical: ['Demanda X - Vence mañana', 'Respuesta recurso - 2 días'],
    important: ['Preparar alegatos caso Y', 'Diplomado - tarea sábado'],
    routine: ['Revisar expedientes', 'Actualizar base datos'],
    business: ['Contactar 3 referidos', 'Actualizar LinkedIn'],
    backlog: ['Organizar archivo', 'Leer jurisprudencia']
  });

  const [newTask, setNewTask] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('critical');

  const addTask = () => {
    if (newTask.trim()) {
      setTasks(prev => ({
        ...prev,
        [selectedCategory]: [...prev[selectedCategory], newTask]
      }));
      setNewTask('');
    }
  };

  const removeTask = (category, index) => {
    setTasks(prev => ({
      ...prev,
      [category]: prev[category].filter((_, i) => i !== index)
    }));
  };

  const categories = {
    critical: { title: 'CRÍTICO (0-3 días)', color: 'bg-red-100 border-red-300', icon: '🚨' },
    important: { title: 'IMPORTANTE (1-2 sem)', color: 'bg-orange-100 border-orange-300', icon: '⚡' },
    routine: { title: 'RUTINA (flexible)', color: 'bg-blue-100 border-blue-300', icon: '📋' },
    business: { title: 'DESARROLLO NEGOCIO', color: 'bg-green-100 border-green-300', icon: '💼' },
    backlog: { title: 'BACKLOG', color: 'bg-gray-100 border-gray-300', icon: '📚' }
  };

  const schedule = [
    { day: 'Lun', am: 'Casos críticos', pm: 'Casos importantes', night: 'Admin' },
    { day: 'Mar', am: 'Trabajo legal', pm: 'Desarrollo negocio', night: '🚴‍♂️' },
    { day: 'Mié', am: 'Casos críticos', pm: 'Casos importantes', night: '🚴‍♂️' },
    { day: 'Jue', am: 'Trabajo legal', pm: 'Desarrollo negocio', night: '🚴‍♂️' },
    { day: 'Vie', am: 'Casos críticos', pm: 'Revisión semanal', night: 'Libre' },
    { day: 'Sáb', am: '🎓 Diplomado', pm: '', night: '' },
    { day: 'Dom', am: '🚴‍♂️ Largo', pm: 'Familia', night: 'Prep semana' }
  ];

  return (
    <div className="max-w-6xl mx-auto p-4 bg-white min-h-screen">
      <h1 className="text-2xl font-bold mb-4 text-center">Sistema Legal Híbrido</h1>
      
      <div className="flex gap-2 mb-6 justify-center">
        <button 
          onClick={() => setView('triage')}
          className={`px-4 py-2 rounded ${view === 'triage' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
        >
          📋 Triage Diario
        </button>
        <button 
          onClick={() => setView('schedule')}
          className={`px-4 py-2 rounded ${view === 'schedule' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
        >
          📅 Horario Semanal
        </button>
      </div>

      {view === 'triage' && (
        <div className="space-y-4">
          <div className="bg-yellow-50 p-4 rounded border border-yellow-200">
            <h3 className="font-bold text-yellow-800 mb-2">🎯 Añadir Nueva Tarea</h3>
            <div className="flex gap-2">
              <input
                type="text"
                value={newTask}
                onChange={(e) => setNewTask(e.target.value)}
                placeholder="Escribe tu tarea..."
                className="flex-1 p-2 border rounded"
                onKeyPress={(e) => e.key === 'Enter' && addTask()}
              />
              <select 
                value={selectedCategory} 
                onChange={(e) => setSelectedCategory(e.target.value)}
                className="p-2 border rounded"
              >
                {Object.entries(categories).map(([key, cat]) => (
                  <option key={key} value={key}>{cat.icon} {cat.title}</option>
                ))}
              </select>
              <button onClick={addTask} className="px-4 py-2 bg-blue-500 text-white rounded">
                +
              </button>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {Object.entries(categories).map(([key, category]) => (
              <div key={key} className={`${category.color} border-2 p-4 rounded`}>
                <h4 className="font-bold text-sm mb-3">
                  {category.icon} {category.title}
                </h4>
                {tasks[key].map((task, index) => (
                  <div key={index} className="bg-white p-2 mb-2 rounded shadow-sm flex justify-between items-center">
                    <span className="text-sm">{task}</span>
                    <button 
                      onClick={() => removeTask(key, index)}
                      className="text-red-500 hover:text-red-700 font-bold"
                    >
                      ×
                    </button>
                  </div>
                ))}
                {tasks[key].length === 0 && (
                  <p className="text-gray-500 text-sm italic">Sin tareas</p>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {view === 'schedule' && (
        <div className="space-y-4">
          <div className="bg-blue-50 p-4 rounded border border-blue-200">
            <h3 className="font-bold text-blue-800 mb-3">📅 Tu Semana Ideal</h3>
            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
              {schedule.map((day, index) => (
                <div key={index} className="bg-white p-3 rounded border">
                  <h4 className="font-bold text-center mb-2">{day.day}</h4>
                  <div className="space-y-1 text-xs">
                    <div><strong>AM:</strong> {day.am}</div>
                    <div><strong>PM:</strong> {day.pm}</div>
                    <div><strong>Noche:</strong> {day.night}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-green-50 p-4 rounded border border-green-200">
              <h4 className="font-bold text-green-800 mb-2">💡 Plan de Rescate</h4>
              <ul className="text-sm text-green-700 space-y-1">
                <li>1. <strong>HOY:</strong> 4h para demandas pendientes</li>
                <li>2. <strong>Diario:</strong> 15 min triage matutino</li>
                <li>3. <strong>Mar/Jue PM:</strong> Desarrollo negocio</li>
                <li>4. <strong>Ciclismo:</strong> Mar/Mié/Jue + Dom</li>
              </ul>
            </div>

            <div className="bg-purple-50 p-4 rounded border border-purple-200">
              <h4 className="font-bold text-purple-800 mb-2">💼 Desarrollo Negocio</h4>
              <div className="text-sm space-y-2">
                <div><strong>Martes:</strong> Contactos y networking</div>
                <div><strong>Jueves:</strong> Seguimiento y contenido</div>
                <div className="text-purple-600">• 3-5 contactos por sesión</div>
                <div className="text-purple-600">• LinkedIn + referidos</div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ProductivityApp;

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>