"use client";
import React, { useEffect, useState } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
import { Calendar as LucideCalendar, RefreshCw, ExternalLink, Mail, CheckCircle2, AlertCircle } from "lucide-react";
import { getCalendarioEvents } from "@/app/actions/calendario";

export default function CalendarioClient() {
  const [events, setEvents] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [syncing, setSyncing] = useState(false);
  const [showGoogleModal, setShowGoogleModal] = useState(false);

  useEffect(() => {
    loadEvents();
  }, []);

  const loadEvents = async () => {
    setLoading(true);
    const res = await getCalendarioEvents();
    if (res.success) {
      setEvents(res.events || []);
    }
    setLoading(false);
  };

  const handleSyncGoogle = () => {
    setSyncing(true);
    // Simulación de sincronización
    setTimeout(() => {
      setSyncing(false);
      setShowGoogleModal(true);
    }, 1500);
  };

  return (
    <div className="space-y-6">
      {/* Header Panel */}
      <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <div className="bg-blue-600 p-3 rounded-xl text-white shadow-lg shadow-blue-200">
            <LucideCalendar className="w-6 h-6" />
          </div>
          <div>
            <h1 className="text-2xl font-bold text-gray-800">Calendario Institucional</h1>
            <p className="text-gray-500 text-sm">Gestiona el horario de clases y eventos académicos</p>
          </div>
        </div>
        
        <div className="flex items-center gap-3">
          <button 
            onClick={loadEvents}
            disabled={loading}
            className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg transition-all text-sm font-semibold border border-gray-200"
          >
            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
            Refrescar
          </button>
          
          <button 
            onClick={handleSyncGoogle}
            disabled={syncing}
            className="flex items-center gap-2 px-6 py-2 bg-[#1e2a47] hover:bg-black text-white rounded-lg transition-all text-sm font-bold shadow-md shadow-blue-100 disabled:opacity-50"
          >
            {syncing ? <RefreshCw className="w-4 h-4 animate-spin" /> : <img src="https://www.gstatic.com/images/branding/product/1x/calendar_2020q4_48dp.png" className="w-4 h-4" alt="GCal" />}
            Sincronizar con Google
          </button>
        </div>
      </div>

      {/* Main Calendar Section */}
      <div className="bg-white rounded-3xl p-6 shadow-xl shadow-gray-100 border border-gray-100 min-h-[700px] relative">
        {loading && (
          <div className="absolute inset-0 bg-white/60 backdrop-blur-[2px] z-20 flex items-center justify-center rounded-3xl">
             <div className="flex flex-col items-center gap-3">
                <RefreshCw className="w-10 h-10 text-blue-600 animate-spin" />
                <p className="text-blue-700 font-bold animate-pulse">Cargando Agenda...</p>
             </div>
          </div>
        )}
        
        <div className="calendar-container h-full">
          <FullCalendar
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
            initialView="dayGridMonth"
            headerToolbar={{
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth,timeGridWeek,listMonth'
            }}
            events={events}
            locale="es"
            buttonText={{
              today: 'Hoy',
              month: 'Mes',
              week: 'Semana',
              day: 'Día',
              list: 'Agenda'
            }}
            eventClick={(info) => {
              alert(`Evento: ${info.event.title}\nSede: ${info.event.extendedProps.colegio || 'Institución'}`);
            }}
            height="auto"
            eventTimeFormat={{
              hour: '2-digit',
              minute: '2-digit',
              meridiem: 'short'
            }}
            dayMaxEvents={true}
          />
        </div>
      </div>

      {/* Modal de Conexión Google (Simulado) */}
      {showGoogleModal && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-300">
          <div className="bg-white rounded-3xl w-full max-w-md shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300">
            <div className="p-1 bg-gradient-to-r from-blue-600 via-red-500 to-yellow-500"></div>
            <div className="p-8">
              <div className="flex justify-center mb-6">
                <div className="relative">
                  <img src="https://www.gstatic.com/images/branding/product/1x/calendar_2020q4_48dp.png" className="w-20 h-20" alt="Google Calendar" />
                  <div className="absolute -bottom-1 -right-1 bg-green-500 text-white p-1 rounded-full border-4 border-white">
                    <CheckCircle2 className="w-5 h-5" />
                  </div>
                </div>
              </div>
              
              <h2 className="text-2xl font-bold text-center text-gray-800 mb-2">Conexión con Google</h2>
              <p className="text-gray-500 text-center text-sm mb-8 leading-relaxed">
                El sistema está listo para sincronizar eventos institucionales con tu cuenta personal de Google Calendar.
              </p>

              <div className="space-y-4">
                <div className="bg-amber-50 border border-amber-100 p-4 rounded-2xl flex gap-3">
                  <AlertCircle className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
                  <div>
                    <p className="text-xs font-bold text-amber-800 uppercase tracking-wider mb-1">Nota del Desarrollador</p>
                    <p className="text-xs text-amber-700 leading-normal">
                      Para activar la sincronización real en producción, es necesario configurar las <b>API CREDENTIALS</b> de Google Cloud en el archivo <code className="bg-white px-1 rounded">.env</code> del servidor.
                    </p>
                  </div>
                </div>

                <div className="flex flex-col gap-3">
                   <button 
                    onClick={() => setShowGoogleModal(false)}
                    className="w-full py-4 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-2xl font-bold transition-all"
                   >
                     Entendido
                   </button>
                   <button 
                    className="w-full py-4 bg-blue-600 text-white rounded-2xl font-bold flex items-center justify-center gap-2 shadow-lg shadow-blue-100"
                   >
                     <ExternalLink className="w-4 h-4" />
                     Abrir Consola de Google
                   </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* CSS Overrides para FullCalendar */}
      <style jsx global>{`
        .fc { --fc-border-color: #f3f4f6; --fc-button-bg-color: #1e2a47; --fc-button-border-color: #1e2a47; --fc-button-hover-bg-color: #000; }
        .fc .fc-toolbar-title { font-size: 1.25rem; font-weight: 800; color: #1e2a47; text-transform: capitalize; }
        .fc .fc-button { border-radius: 10px; font-weight: 700; text-transform: capitalize; padding: 8px 16px; }
        .fc .fc-button-primary:not(:disabled).fc-button-active { background-color: #3b82f6; border-color: #3b82f6; }
        .fc-theme-standard td, .fc-theme-standard th { border-color: #f1f5f9; }
        .fc .fc-daygrid-day.fc-day-today { background-color: #eff6ff !important; }
        .fc-event { border-radius: 6px; padding: 2px 6px; border: none; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: transform 0.2s; }
        .fc-event:hover { transform: scale(1.02); }
        .fc .fc-list-event:hover td { background-color: #f8fafc; cursor: pointer; }
      `}</style>
    </div>
  );
}