"use client";

// Imports mantidos
import { useEffect, useState } from "react";
import dynamic from "next/dynamic";

// --- Imports do EventManager (NOVO) - MANTIDOS ---
import { EventManager, type Event } from "@/components/features/general/event-manager";
import { v4 as uuidv4 } from 'uuid'; // Usado para IDs de fallback

// Imports mantidos
import { Button } from "@/components/ui/button";
import { useAuth } from "@/hooks/useAuth";
import { mockWaitingList } from "@/lib/mocks/appointment-mocks";
import "./index.css";
import { ThreeDWallCalendar, CalendarEvent } from "@/components/ui/three-dwall-calendar"; // Calendário 3D mantido
import { PatientRegistrationForm } from "@/components/features/forms/patient-registration-form";

const ListaEspera = dynamic(
  () => import("@/components/features/agendamento/ListaEspera"),
  { ssr: false }
);

export default function AgendamentoPage() {
  const { user, token } = useAuth();
  const [appointments, setAppointments] = useState<any[]>([]);
  const [activeTab, setActiveTab] = useState<"calendar" | "3d">("calendar");
  const [threeDEvents, setThreeDEvents] = useState<CalendarEvent[]>([]);

  // Padroniza idioma da página para pt-BR (afeta componentes que usam o lang do documento)
  useEffect(() => {
    try {
      // Atributos no <html>
      document.documentElement.lang = "pt-BR";
      document.documentElement.setAttribute("xml:lang", "pt-BR");
      document.documentElement.setAttribute("data-lang", "pt-BR");
      // Cookie de locale (usado por apps com i18n)
      const oneYear = 60 * 60 * 24 * 365;
      document.cookie = `NEXT_LOCALE=pt-BR; Path=/; Max-Age=${oneYear}; SameSite=Lax`;
    } catch {
      // ignore
    }
  }, []);

  // --- NOVO ESTADO ---
  // Estado para alimentar o NOVO EventManager com dados da API
  const [managerEvents, setManagerEvents] = useState<Event[]>([]);
  const [managerLoading, setManagerLoading] = useState<boolean>(true);
  
  // Estado para o formulário de registro de paciente
  const [showPatientForm, setShowPatientForm] = useState(false);

  useEffect(() => {
    document.addEventListener("keydown", (event) => {
      if (event.key === "c") setActiveTab("calendar");
      if (event.key === "3") setActiveTab("3d");
    });
  }, []);

  useEffect(() => {
    let mounted = true;
    (async () => {
      try {
        setManagerLoading(true);
        const api = await import('@/lib/api');
        const arr = await api.listarAgendamentos('select=*&order=scheduled_at.desc&limit=500').catch(() => []);
        if (!mounted) return;
        if (!arr || !arr.length) {
          setAppointments([]);
          setThreeDEvents([]);
          setManagerEvents([]); // Limpa o novo calendário
          setManagerLoading(false);
          return;
        }

        const patientIds = Array.from(new Set(arr.map((a: any) => a.patient_id).filter(Boolean)));
        const patients = (patientIds && patientIds.length) ? await api.buscarPacientesPorIds(patientIds) : [];
        const patientsById: Record<string, any> = {};
        (patients || []).forEach((p: any) => { if (p && p.id) patientsById[String(p.id)] = p; });

        setAppointments(arr || []);

        // --- LÓGICA DE TRANSFORMAÇÃO PARA O NOVO EVENTMANAGER ---
        const newManagerEvents: Event[] = (arr || []).map((obj: any) => {
          const scheduled = obj.scheduled_at || obj.scheduledAt || obj.time || null;
          const start = scheduled ? new Date(scheduled) : new Date();
          const duration = Number(obj.duration_minutes ?? obj.duration ?? 30) || 30;
          const end = new Date(start.getTime() + duration * 60 * 1000);
          
          const patient = (patientsById[String(obj.patient_id)]?.full_name) || obj.patient_name || obj.patient_full_name || obj.patient || 'Paciente';
          const title = `${patient}: ${obj.appointment_type ?? obj.type ?? ''}`.trim();

          // Mapeamento de cores padronizado:
          // azul = solicitado; verde = confirmado; laranja = pendente; vermelho = cancelado; azul como fallback
          const status = String(obj.status || "").toLowerCase();
          let color: Event["color"] = "blue";
          if (status === "confirmed" || status === "confirmado") color = "green";
          else if (status === "pending" || status === "pendente") color = "orange";
          else if (status === "canceled" || status === "cancelado" || status === "cancelled") color = "red";
          else if (status === "requested" || status === "solicitado") color = "blue";

          return {
            id: obj.id || uuidv4(),
            title,
            description: `Agendamento para ${patient}. Status: ${obj.status || 'N/A'}.`,
            startTime: start,
            endTime: end,
            color,
          };
        });
        setManagerEvents(newManagerEvents);
        setManagerLoading(false);
        // --- FIM DA LÓGICA ---

        // Convert to 3D calendar events (MANTIDO 100%)
        const threeDEvents: CalendarEvent[] = (arr || []).map((obj: any) => {
          const scheduled = obj.scheduled_at || obj.scheduledAt || obj.time || null;
          const patient = (patientsById[String(obj.patient_id)]?.full_name) || obj.patient_name || obj.patient_full_name || obj.patient || 'Paciente';
          const appointmentType = obj.appointment_type ?? obj.type ?? 'Consulta';
          const title = `${patient}: ${appointmentType}`.trim();
          return {
            id: obj.id || String(Date.now()),
            title,
            date: scheduled ? new Date(scheduled).toISOString() : new Date().toISOString(),
            status: obj.status || 'pending',
            patient,
            type: appointmentType,
          };
        });
        setThreeDEvents(threeDEvents);
      } catch (err) {
        console.warn('[AgendamentoPage] falha ao carregar agendamentos', err);
        setAppointments([]);
        setThreeDEvents([]);
        setManagerEvents([]); // Limpa o novo calendário
        setManagerLoading(false);
      }
    })();
    return () => { mounted = false; };
  }, []);

  // Handlers mantidos
  const handleSaveAppointment = (appointment: any) => {
    if (appointment.id) {
      setAppointments((prev) =>
        prev.map((a) => (a.id === appointment.id ? appointment : a))
      );
    } else {
      const newAppointment = {
        ...appointment,
        id: Date.now().toString(),
      };
      setAppointments((prev) => [...prev, newAppointment]);
    }
  };

  const handleAddEvent = (event: CalendarEvent) => {
    setThreeDEvents((prev) => [...prev, event]);
  };

  const handleRemoveEvent = (id: string) => {
    setThreeDEvents((prev) => prev.filter((e) => e.id !== id));
  };

  return (
    <div className="flex flex-row bg-background">
      <div className="flex w-full flex-col">
        <div className="flex w-full flex-col gap-10 p-6">
          <div className="flex flex-row justify-between items-center">
            {/* Todo o cabeçalho foi mantido */}
            <div>
              <h1 className="text-2xl font-bold text-foreground">
                {activeTab === "calendar" ? "Calendário" : activeTab === "3d" ? "Calendário 3D" : "Lista de Espera"}
              </h1>
              <p className="text-muted-foreground">
                Navegue através dos atalhos: Calendário (C), Fila de espera (F) ou 3D (3).
              </p>
            </div>
            <div className="flex space-x-2 items-center">
              <div className="flex flex-row">
                <Button
                  type="button"
                  variant={"outline"}
                  className="bg-muted hover:bg-primary! hover:text-white! transition-colors rounded-l-[100px] rounded-r-none"
                  onClick={() => setActiveTab("calendar")}
                >
                  Calendário
                </Button>

                <Button
                  type="button"
                  variant={"outline"}
                  className="bg-muted hover:bg-primary! hover:text-white! transition-colors rounded-r-[100px] rounded-l-none"
                  onClick={() => setActiveTab("3d")}
                >
                  3D
                </Button>
              </div>
            </div>
          </div>

          {/* Legenda de status (estilo Google Calendar) */}
          <div className="rounded-md border bg-card/60 p-2 sm:p-3 -mt-4">
            <div className="flex flex-wrap items-center gap-6 text-sm">
              <div className="flex items-center gap-2">
                <span aria-hidden className="h-3 w-3 rounded-full bg-blue-500 ring-2 ring-blue-500/30" />
                <span className="text-foreground">Solicitado</span>
              </div>
              <div className="flex items-center gap-2">
                <span aria-hidden className="h-3 w-3 rounded-full bg-green-500 ring-2 ring-green-500/30" />
                <span className="text-foreground">Confirmado</span>
              </div>
            </div>
          </div>

          {/* --- AQUI ESTÁ A SUBSTITUIÇÃO --- */}
          {activeTab === "calendar" ? (
            <div className="flex w-full">
              {/* mostra loading até managerEvents ser preenchido (API integrada desde a entrada) */}
              <div className="w-full">
                {managerLoading ? (
                  <div className="flex items-center justify-center w-full min-h-[70vh]">
                    <div className="text-sm text-muted-foreground">Conectando ao calendário — carregando agendamentos...</div>
                  </div>
                ) : (
                  // EventManager ocupa a área principal e já recebe events da API
                  <div className="w-full min-h-[70vh]">
                    <EventManager events={managerEvents} className="compact-event-manager" />
                  </div>
                )}
              </div>
            </div>
          ) : activeTab === "3d" ? (
            // O calendário 3D (ThreeDWallCalendar) foi MANTIDO 100%
            <div className="flex w-full justify-center">
              <ThreeDWallCalendar
                events={threeDEvents}
                onAddEvent={handleAddEvent}
                onRemoveEvent={handleRemoveEvent}
                onOpenAddPatientForm={() => setShowPatientForm(true)}
              />
            </div>
          ) : null}
        </div>
        
        {/* Formulário de Registro de Paciente */}
        <PatientRegistrationForm
          open={showPatientForm}
          onOpenChange={setShowPatientForm}
          mode="create"
          onSaved={(newPaciente) => {
            console.log('[Calendar] Novo paciente registrado:', newPaciente);
            setShowPatientForm(false);
          }}
        />
      </div>
    </div>
  );
}