import React, { useState, useEffect } from 'react';
import { 
  Calendar, 
  Clock, 
  User, 
  Phone, 
  Mail, 
  MessageCircle, 
  Edit2, 
  Trash2, 
  Plus, 
  ChevronLeft, 
  ChevronRight,
  CheckCircle2,
  AlertCircle,
  LayoutGrid,
  List,
  Loader2
} from 'lucide-react';

const API_URL = 'https://capi.orthostudioamaya.com/api.php';

export default function App() {
  const [appointments, setAppointments] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
  const [viewMode, setViewMode] = useState('day'); // 'day' | 'month'
  
  // Estados para Modales
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
  const [rescheduleData, setRescheduleData] = useState(null);
  
  // Estado para notificaciones UI
  const [toast, setToast] = useState(null);

  // Formulario nuevo
  const [formData, setFormData] = useState({
    patientName: '', phone: '', email: '', time: '08:00', type: 'Valoración Inicial'
  });

  // --- Cargar datos desde la API al iniciar ---
  useEffect(() => {
    fetchAppointments();
  }, []);

  const fetchAppointments = async () => {
    setIsLoading(true);
    try {
      const response = await fetch(API_URL);
      if (!response.ok) throw new Error('Error en la respuesta de la API');
      const data = await response.json();
      
      // Si la API devuelve un array, lo guardamos. Si devuelve un objeto de error o está vacío, ponemos array vacío.
      if (Array.isArray(data)) {
        setAppointments(data);
      } else {
        setAppointments([]);
      }
    } catch (error) {
      console.error("Error obteniendo citas:", error);
      showToast("Error al conectar con la base de datos", "error");
    } finally {
      setIsLoading(false);
    }
  };

  const showToast = (message, type = 'success') => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 4000);
  };

  // --- Lógica de Fechas ---
  const changeDate = (amount) => {
    const currentDate = new Date(selectedDate + 'T00:00:00');
    if (viewMode === 'day') {
      currentDate.setDate(currentDate.getDate() + amount);
    } else {
      currentDate.setMonth(currentDate.getMonth() + amount);
    }
    setSelectedDate(currentDate.toISOString().split('T')[0]);
  };

  const formatDateLabel = (dateString) => {
    const options = viewMode === 'day' 
      ? { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
      : { year: 'numeric', month: 'long' };
    const date = new Date(dateString + 'T00:00:00'); // Forzar zona horaria local
    return date.toLocaleDateString('es-HN', options);
  };

  // --- Operaciones CRUD (Conectadas a la API) ---
  
  // CREAR CITA (POST)
  const handleAddAppointment = async (e) => {
    e.preventDefault();
    const newAptData = { ...formData, date: selectedDate };
    
    try {
      const response = await fetch(API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newAptData)
      });

      if (response.ok) {
        await fetchAppointments(); // Recargar datos desde la BD
        setIsAddModalOpen(false);
        
        // Generar link de WhatsApp para Confirmación
        const msg = `¡Hola ${formData.patientName}! Te confirmamos tu cita en Orthostudio Amaya para el ${formatDateLabel(selectedDate)} a las ${formData.time}.`;
        sendWhatsApp(formData.phone, msg);
        
        showToast('Cita agendada exitosamente');
        setFormData({ patientName: '', phone: '', email: '', time: '08:00', type: 'Valoración Inicial' });
      } else {
        const errorData = await response.json();
        showToast(errorData.error || 'Error al guardar la cita', 'error');
      }
    } catch (error) {
      console.error("Error:", error);
      showToast("Error de conexión al guardar", "error");
    }
  };

  // ELIMINAR CITA (DELETE)
  const handleDelete = async (id, patientName, phone) => {
    if (window.confirm(`¿Estás seguro de cancelar la cita de ${patientName}?`)) {
      try {
        // Corrección: Enviamos el ID directamente en la URL para que PHP lo lea sin problemas
        const response = await fetch(`${API_URL}?id=${id}`, {
          method: 'DELETE'
        });

        if (response.ok) {
          await fetchAppointments(); // Recargar datos
          
          const msg = `Hola ${patientName}, te informamos que tu cita en Orthostudio Amaya ha sido cancelada. Por favor contáctanos para reprogramar.`;
          sendWhatsApp(phone, msg);
          
          showToast('Cita cancelada exitosamente');
        } else {
          showToast('No se pudo cancelar la cita', 'error');
        }
      } catch (error) {
        console.error("Error:", error);
        showToast("Error de conexión al cancelar", "error");
      }
    }
  };

  // REPROGRAMAR CITA (PUT)
  const handleRescheduleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(API_URL, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          id: rescheduleData.id, 
          date: rescheduleData.newDate, 
          time: rescheduleData.newTime 
        })
      });

      if (response.ok) {
        await fetchAppointments(); // Recargar datos
        
        const msg = `Hola ${rescheduleData.patientName}, te confirmamos que tu cita en Orthostudio Amaya ha sido REPROGRAMADA para el ${formatDateLabel(rescheduleData.newDate)} a las ${rescheduleData.newTime}.`;
        sendWhatsApp(rescheduleData.phone, msg);
        
        setRescheduleData(null);
        showToast('Cita reprogramada exitosamente');
      } else {
        showToast('No se pudo reprogramar la cita', 'error');
      }
    } catch (error) {
      console.error("Error:", error);
      showToast("Error de conexión al actualizar", "error");
    }
  };

  // --- Notificaciones ---
  const sendWhatsApp = (phone, message) => {
    const url = `https://wa.me/${phone.replace(/\D/g, '')}?text=${encodeURIComponent(message)}`;
    window.open(url, '_blank');
  };

  // Filtrar citas del día seleccionado
  const todaysAppointments = appointments.filter(apt => apt.date === selectedDate);

  // --- Renderizado de la Vista Mensual ---
  const renderMonthView = () => {
    const currentDateObj = new Date(selectedDate + 'T00:00:00');
    const year = currentDateObj.getFullYear();
    const month = currentDateObj.getMonth();

    const firstDay = new Date(year, month, 1).getDay(); // 0 (Dom) - 6 (Sáb)
    const daysInMonth = new Date(year, month + 1, 0).getDate();

    const days = [];
    // Espacios vacíos previos
    for (let i = 0; i < firstDay; i++) {
      days.push(<div key={`empty-${i}`} className="p-2 border border-gray-100 bg-gray-50/50 min-h-[100px] md:min-h-[120px]"></div>);
    }
    
    // Días del mes
    for (let d = 1; d <= daysInMonth; d++) {
      const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
      const dayAppointments = appointments.filter(a => a.date === dateStr);

      days.push(
        <div key={d} 
             onClick={() => { setSelectedDate(dateStr); setViewMode('day'); }}
             className={`p-2 border border-gray-100 min-h-[100px] md:min-h-[120px] cursor-pointer hover:bg-blue-50 transition group flex flex-col ${dateStr === selectedDate ? 'bg-blue-50 ring-2 ring-inset ring-[#0284c7]' : 'bg-white'}`}>
          <div className="font-bold text-gray-700 text-sm mb-1 flex justify-between items-center">
            <span className={`w-6 h-6 flex items-center justify-center rounded-full ${dateStr === new Date().toISOString().split('T')[0] ? 'bg-[#0284c7] text-white' : ''}`}>{d}</span>
            {dayAppointments.length > 0 && <span className="text-xs text-[#0284c7] bg-blue-100 px-1.5 py-0.5 rounded-full">{dayAppointments.length}</span>}
          </div>
          <div className="space-y-1 overflow-y-auto flex-1 no-scrollbar">
            {dayAppointments.slice(0, 3).map(apt => (
              <div key={apt.id} className="text-[10px] leading-tight bg-blue-100 text-[#0284c7] font-medium px-1.5 py-1 rounded truncate border border-blue-200" title={apt.patientName}>
                {apt.time} {apt.patientName.split(' ')[0]}
              </div>
            ))}
            {dayAppointments.length > 3 && (
              <div className="text-[10px] text-gray-500 font-bold px-1 mt-1 text-center">
                +{dayAppointments.length - 3} más
              </div>
            )}
          </div>
        </div>
      );
    }

    const weekdays = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];

    return (
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div className="grid grid-cols-7 border-b border-gray-200 bg-gray-50">
          {weekdays.map(day => (
            <div key={day} className="py-2 text-center text-xs font-bold text-gray-600 uppercase tracking-wider border-r border-gray-100 last:border-0">
              {day}
            </div>
          ))}
        </div>
        <div className="grid grid-cols-7 auto-rows-fr">
          {days}
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gray-50 font-sans">
      {/* Toast Notification */}
      {toast && (
        <div className={`fixed top-4 right-4 z-50 flex items-center p-4 rounded-lg shadow-lg text-white ${toast.type === 'success' ? 'bg-green-600' : 'bg-red-500'} transition-all duration-300`}>
          {toast.type === 'success' ? <CheckCircle2 className="mr-2" /> : <AlertCircle className="mr-2" />}
          {toast.message}
        </div>
      )}

      {/* Header */}
      <header className="bg-white shadow-sm border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center">
            <div className="bg-blue-100 p-2 rounded-lg mr-3">
              <Calendar className="text-[#0284c7]" size={24} />
            </div>
            <h1 className="text-xl font-bold text-gray-800">Orthostudio Amaya <span className="text-gray-400 font-normal">| Agenda en la Nube</span></h1>
          </div>
          <button 
            onClick={() => setIsAddModalOpen(true)}
            className="bg-[#0284c7] hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium flex items-center transition shadow-sm"
          >
            <Plus size={18} className="mr-1" /> Nueva Cita
          </button>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col lg:flex-row gap-8">
        
        {/* Contenido Principal: Lista de Citas */}
        <div className="flex-1">
          {/* Navegador de Fechas y Vistas */}
          <div className="flex flex-col sm:flex-row items-center justify-between bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-6 gap-4 sm:gap-0">
            <div className="flex items-center gap-2">
              <button onClick={() => changeDate(-1)} className="p-2 hover:bg-gray-100 rounded-full transition">
                <ChevronLeft className="text-gray-600" />
              </button>
              <button onClick={() => changeDate(1)} className="p-2 hover:bg-gray-100 rounded-full transition">
                <ChevronRight className="text-gray-600" />
              </button>
            </div>
            
            <div className="text-center flex-1">
              <h2 className="text-lg font-bold text-gray-800 capitalize">{formatDateLabel(selectedDate)}</h2>
              {viewMode === 'day' && !isLoading && (
                <p className="text-sm text-gray-500">
                  {todaysAppointments.length} {todaysAppointments.length === 1 ? 'cita programada' : 'citas programadas'}
                </p>
              )}
            </div>

            <div className="flex items-center gap-3">
              <button onClick={fetchAppointments} className="p-2 text-gray-400 hover:text-[#0284c7] hover:bg-blue-50 rounded-full transition tooltip" title="Actualizar datos">
                <Loader2 size={20} className={isLoading ? "animate-spin text-[#0284c7]" : ""} />
              </button>
              
              <div className="flex bg-gray-100 p-1 rounded-lg">
                <button 
                  onClick={() => setViewMode('day')}
                  className={`flex items-center gap-1 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${viewMode === 'day' ? 'bg-white text-[#0284c7] shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
                >
                  <List size={16} /> <span className="hidden sm:inline">Día</span>
                </button>
                <button 
                  onClick={() => setViewMode('month')}
                  className={`flex items-center gap-1 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${viewMode === 'month' ? 'bg-white text-[#0284c7] shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
                >
                  <LayoutGrid size={16} /> <span className="hidden sm:inline">Mes</span>
                </button>
              </div>
            </div>
          </div>

          {/* Renderizado condicional basado en el estado de carga y vista */}
          {isLoading ? (
            <div className="flex flex-col items-center justify-center py-20 bg-white rounded-xl border border-gray-100">
              <Loader2 size={48} className="text-[#0284c7] animate-spin mb-4" />
              <p className="text-gray-500 font-medium text-lg">Conectando con la base de datos...</p>
            </div>
          ) : viewMode === 'day' ? (
            <div className="space-y-4">
              {todaysAppointments.length === 0 ? (
                <div className="text-center py-16 bg-white rounded-xl border border-dashed border-gray-300">
                  <Calendar className="mx-auto text-gray-300 mb-3" size={48} />
                  <p className="text-gray-500 font-medium text-lg">No hay citas para este día</p>
                  <p className="text-gray-400 text-sm mt-1">Disfruta el tiempo libre o agrega una nueva cita.</p>
                </div>
              ) : (
                todaysAppointments.map((apt) => (
                  <div key={apt.id} className="bg-white rounded-xl shadow-sm border border-gray-200 p-5 flex flex-col md:flex-row gap-4 items-start md:items-center hover:shadow-md transition">
                    
                    {/* Hora */}
                    <div className="flex items-center justify-center bg-blue-50 text-[#0284c7] font-bold text-xl rounded-lg p-4 min-w-[100px]">
                      {apt.time}
                    </div>

                    {/* Info Paciente */}
                    <div className="flex-1">
                      <h3 className="text-lg font-bold text-gray-900 flex items-center">
                        {apt.patientName}
                        <span className="ml-3 text-xs font-medium bg-green-100 text-green-700 px-2 py-1 rounded-full">
                          {apt.type}
                        </span>
                      </h3>
                      <div className="mt-2 flex flex-wrap gap-4 text-sm text-gray-600">
                        <span className="flex items-center"><Phone size={14} className="mr-1" /> {apt.phone}</span>
                        <span className="flex items-center"><Mail size={14} className="mr-1" /> {apt.email || 'Sin correo'}</span>
                      </div>
                    </div>

                    {/* Acciones */}
                    <div className="flex items-center gap-2 w-full md:w-auto border-t md:border-t-0 pt-4 md:pt-0 border-gray-100">
                      <button 
                        onClick={() => setRescheduleData({ ...apt, newDate: apt.date, newTime: apt.time })}
                        className="flex-1 md:flex-none text-gray-600 hover:text-[#0284c7] hover:bg-blue-50 p-2 rounded-lg transition tooltip flex items-center justify-center gap-1 text-sm font-medium border border-gray-200 md:border-transparent"
                        title="Reprogramar"
                      >
                        <Edit2 size={16} /> <span className="md:hidden">Reprogramar</span>
                      </button>
                      <button 
                        onClick={() => sendWhatsApp(apt.phone, `Hola ${apt.patientName}, te escribimos de Orthostudio Amaya para recordar tu cita hoy a las ${apt.time}.`)}
                        className="flex-1 md:flex-none text-green-600 hover:bg-green-50 p-2 rounded-lg transition tooltip flex items-center justify-center gap-1 text-sm font-medium border border-gray-200 md:border-transparent"
                        title="Notificar por WhatsApp"
                      >
                        <MessageCircle size={16} /> <span className="md:hidden">WhatsApp</span>
                      </button>
                      <button 
                        onClick={() => handleDelete(apt.id, apt.patientName, apt.phone)}
                        className="flex-1 md:flex-none text-red-500 hover:bg-red-50 p-2 rounded-lg transition tooltip flex items-center justify-center gap-1 text-sm font-medium border border-gray-200 md:border-transparent"
                        title="Cancelar Cita"
                      >
                        <Trash2 size={16} /> <span className="md:hidden">Cancelar</span>
                      </button>
                    </div>
                  </div>
                ))
              )}
            </div>
          ) : (
            renderMonthView()
          )}
        </div>

        {/* Sidebar Informativo */}
        <div className="w-full lg:w-80 space-y-6">
          <div className="bg-[#0284c7] rounded-xl p-6 text-white shadow-lg">
            <h3 className="font-bold text-lg mb-2 flex items-center">
              <MessageCircle className="mr-2" /> Automatización
            </h3>
            <p className="text-blue-100 text-sm mb-4 leading-relaxed">
              El sistema genera el enlace de WhatsApp listo para enviarse cada vez que programas o cancelas una cita.
            </p>
            <div className="bg-blue-800/50 rounded-lg p-3 text-xs font-mono">
              🟢 Sistema Activo y Sincronizado
            </div>
          </div>
        </div>
      </main>

      {/* Modal Agregar Cita */}
      {isAddModalOpen && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl w-full max-w-md overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
            <div className="bg-[#0284c7] p-4 text-white flex justify-between items-center">
              <h3 className="font-bold text-lg">Agendar Nueva Cita</h3>
              <button onClick={() => setIsAddModalOpen(false)} className="hover:bg-blue-600 p-1 rounded-full transition">&times;</button>
            </div>
            <form onSubmit={handleAddAppointment} className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nombre del Paciente</label>
                <div className="relative">
                  <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
                  <input type="text" required className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0284c7] outline-none" 
                    value={formData.patientName} onChange={e => setFormData({...formData, patientName: e.target.value})} />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">WhatsApp</label>
                  <input type="tel" required placeholder="504..." className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0284c7] outline-none" 
                    value={formData.phone} onChange={e => setFormData({...formData, phone: e.target.value})} />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Correo (Opcional)</label>
                  <input type="email" placeholder="ejemplo@correo.com" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0284c7] outline-none" 
                    value={formData.email} onChange={e => setFormData({...formData, email: e.target.value})} />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Motivo</label>
                  <select className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0284c7] outline-none"
                    value={formData.type} onChange={e => setFormData({...formData, type: e.target.value})}>
                    <option>Valoración Inicial</option>
                    <option>Ajuste de Brackets / Control</option>
                    <option>Entrega de Alineadores</option>
                    <option>Retiro de Brackets</option>
                    <option>Emergencia</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Hora</label>
                  <input type="time" required className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#0284c7] outline-none" 
                    value={formData.time} onChange={e => setFormData({...formData, time: e.target.value})} />
                </div>
              </div>
              <div className="pt-4 flex gap-3">
                <button type="button" onClick={() => setIsAddModalOpen(false)} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium transition">Cancelar</button>
                <button type="submit" className="flex-1 px-4 py-2 bg-[#0284c7] text-white rounded-lg hover:bg-blue-700 font-medium transition flex items-center justify-center">
                  Guardar Cita
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Modal Reprogramar Cita */}
      {rescheduleData && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl w-full max-w-sm overflow-hidden shadow-2xl animate-in fade-in zoom-in duration-200">
            <div className="bg-orange-500 p-4 text-white">
              <h3 className="font-bold text-lg">Reprogramar Cita</h3>
              <p className="text-orange-100 text-sm">Paciente: {rescheduleData.patientName}</p>
            </div>
            <form onSubmit={handleRescheduleSubmit} className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nueva Fecha</label>
                <input type="date" required className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 outline-none" 
                  value={rescheduleData.newDate} onChange={e => setRescheduleData({...rescheduleData, newDate: e.target.value})} />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nueva Hora</label>
                <input type="time" required className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 outline-none" 
                  value={rescheduleData.newTime} onChange={e => setRescheduleData({...rescheduleData, newTime: e.target.value})} />
              </div>
              <div className="bg-orange-50 p-3 rounded-lg text-sm text-orange-800 flex items-start mt-4">
                <AlertCircle size={16} className="mr-2 flex-shrink-0 mt-0.5" />
                Se actualizará la cita y se abrirá WhatsApp para confirmar el cambio.
              </div>
              <div className="pt-4 flex gap-3">
                <button type="button" onClick={() => setRescheduleData(null)} className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium transition">Cancelar</button>
                <button type="submit" className="flex-1 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 font-medium transition">Confirmar Cambio</button>
              </div>
            </form>
          </div>
        </div>
      )}

    </div>
  );
}