"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Plus, Edit, Trash2, Eye, Calendar, Filter } from "lucide-react";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
import SecretaryLayout from "@/components/secretary-layout";
import { patientsService } from "@/services/patientsApi.mjs"

export default function PacientesPage() {
    const [searchTerm, setSearchTerm] = useState("");
    const [convenioFilter, setConvenioFilter] = useState("all");
    const [vipFilter, setVipFilter] = useState("all");
    const [patients, setPatients] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [page, setPage] = useState(1);
    const [hasNext, setHasNext] = useState(true);
    const [isFetching, setIsFetching] = useState(false);
    const observerRef = useRef<HTMLDivElement | null>(null);
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
    const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
    const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
    const [patientDetails, setPatientDetails] = useState<any | null>(null);
    const openDetailsDialog = async (patientId: string) => {
        setDetailsDialogOpen(true);
        setPatientDetails(null);
        try {
            const res = await patientsService.getById(patientId);
            console.log(res)
        setPatientDetails(res[0]);
        } catch (e: any) {
            setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
        }
    };
    
    const fetchPacientes = useCallback(
        async (pageToFetch: number) => {
            if (isFetching || !hasNext) return;
            setIsFetching(true);
            setError(null);
            try {
                const res = await patientsService.list();
                console.log(res)
                const mapped = res.map((p: any) => ({
                id: String(p.id ?? ""),
                nome: p.full_name ?? "",
                telefone: p.phone_mobile ?? p.phone1 ?? "",
                cidade: p.city ?? "",
                estado: p.state ?? "",
                ultimoAtendimento: p.last_visit_at ?? "",
                proximoAtendimento: p.next_appointment_at ?? "",
                vip: Boolean(p.vip ?? false),
                convenio: p.convenio ?? "", // se não existir, fica vazio
                status: p.status ?? undefined,
            }));

                setPatients((prev) => {
                    const all = [...prev, ...mapped];
                    const unique = Array.from(new Map(all.map(p => [p.id, p])).values());
                    return unique;
                });

                if (mapped.length === 0) setHasNext(false); // parar carregamento
                else setPage(prev => prev + 1);
            } catch (e: any) {
                setError(e?.message || "Erro ao buscar pacientes");
            } finally {
                setIsFetching(false);
            }
        },
        [isFetching, hasNext]
    );

    useEffect(() => {
        fetchPacientes(page);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        if (!observerRef.current || !hasNext) return;
        const observer = new window.IntersectionObserver((entries) => {
            if (entries[0].isIntersecting && !isFetching && hasNext) {
                fetchPacientes(page);
            }
        });
        observer.observe(observerRef.current);
        return () => {
            if (observerRef.current) observer.unobserve(observerRef.current);
        };
    }, [fetchPacientes, page, hasNext, isFetching]);

    const handleDeletePatient = (patientId: string) => {
        // Remove from current list (client-side deletion)
        setPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId)));
        setDeleteDialogOpen(false);
        setPatientToDelete(null);
    };

    const openDeleteDialog = (patientId: string) => {
        setPatientToDelete(patientId);
        setDeleteDialogOpen(true);
    };

    const filteredPatients = patients.filter((patient) => {
        const matchesSearch = patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) || patient.telefone?.includes(searchTerm);
        const matchesConvenio = convenioFilter === "all" || (patient.convenio ?? "") === convenioFilter;
        const matchesVip = vipFilter === "all" || (vipFilter === "vip" && patient.vip) || (vipFilter === "regular" && !patient.vip);

        return matchesSearch && matchesConvenio && matchesVip;
    });

    return (
        <SecretaryLayout>
            <div className="space-y-6">
                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
       <div>
        <h1 className="text-xl md:text-2xl font-bold text-gray-900">Pacientes</h1>
        <p className="text-gray-600 text-sm md:text-base">Gerencie as informações de seus pacientes</p>
    </div>
    <div className="flex gap-2">
        <Link href="/secretary/pacientes/novo">
            <Button className="bg-blue-600 hover:bg-blue-700 w-full md:w-auto">
                <Plus className="w-4 h-4 mr-2" />
                Adicionar
            </Button>
        </Link>
    </div>
 </div>

        <div className="flex flex-col md:flex-row flex-wrap gap-4 bg-white p-4 rounded-lg border border-gray-200">
    {/* Convênio */}
    <div className="flex items-center gap-2 w-full md:w-auto">
        <span className="text-sm font-medium text-gray-700">Convênio</span>
        <Select value={convenioFilter} onValueChange={setConvenioFilter}>
            <SelectTrigger className="w-full md:w-40">
                <SelectValue placeholder="Selecione o Convênio" />
            </SelectTrigger>
            <SelectContent>
                <SelectItem value="all">Todos</SelectItem>
                <SelectItem value="Particular">Particular</SelectItem>
                <SelectItem value="SUS">SUS</SelectItem>
                <SelectItem value="Unimed">Unimed</SelectItem>
            </SelectContent>
        </Select>
    </div>
    
        <div className="flex items-center gap-2 w-full md:w-auto">
        <span className="text-sm font-medium text-gray-700">VIP</span>
        <Select value={vipFilter} onValueChange={setVipFilter}>
            <SelectTrigger className="w-full md:w-32">
                <SelectValue placeholder="Selecione" />
            </SelectTrigger>
            <SelectContent>
                <SelectItem value="all">Todos</SelectItem>
                <SelectItem value="vip">VIP</SelectItem>
                <SelectItem value="regular">Regular</SelectItem>
            </SelectContent>
        </Select>
              </div>
        <div className="flex items-center gap-2 w-full md:w-auto">
        <span className="text-sm font-medium text-gray-700">Aniversariantes</span>
        <Select>
            <SelectTrigger className="w-full md:w-32">
                <SelectValue placeholder="Selecione" />
            </SelectTrigger>
        <SelectContent>
            <SelectItem value="today">Hoje</SelectItem>
            <SelectItem value="week">Esta semana</SelectItem>
            <SelectItem value="month">Este mês</SelectItem>
            </SelectContent>
                </Select>
                    </div>

                    <div className="flex items-center gap-2">
                        <span className="text-sm font-medium text-gray-700">VIP</span>
                        <Select value={vipFilter} onValueChange={setVipFilter}>
                            <SelectTrigger className="w-32">
                                <SelectValue placeholder="Selecione" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="all">Todos</SelectItem>
                                <SelectItem value="vip">VIP</SelectItem>
                                <SelectItem value="regular">Regular</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>

                    <div className="flex items-center gap-2">
                        <span className="text-sm font-medium text-gray-700">Aniversariantes</span>
                        <Select>
                            <SelectTrigger className="w-32">
                                <SelectValue placeholder="Selecione" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="today">Hoje</SelectItem>
                                <SelectItem value="week">Esta semana</SelectItem>
                                <SelectItem value="month">Este mês</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>

                     <Button variant="outline" className="ml-auto bg-transparent w-full md:w-auto">
        <Filter className="w-4 h-4 mr-2" />
        Filtro avançado
    </Button>

                </div>

                <div className="bg-white rounded-lg border border-gray-200">
                     <div className="overflow-x-auto">
                        {error ? (
                            <div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
                        ) : (
                           <table className="w-full min-w-[600px]">
                                <thead className="bg-gray-50 border-b border-gray-200">
                                    <tr>
                                         <th className="text-left p-2 md:p-4 font-medium text-gray-700">Nome</th>
                                         <th className="text-left p-2 md:p-4 font-medium text-gray-700">Telefone</th>
                                         <th className="text-left p-2 md:p-4 font-medium text-gray-700">Cidade</th>
                                         <th className="text-left p-2 md:p-4 font-medium text-gray-700">Estado</th>
                                         <th className="text-left p-2 md:p-4 font-medium text-gray-700">Último atendimento</th>
                                         <th className="text-left p-2 md:p-4 font-medium text-gray-700">Próximo atendimento</th>
                                         <th className="text-left p-2 md:p-4 font-medium text-gray-700">Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {filteredPatients.length === 0 ? (
                                        <tr>
                                            <td colSpan={7} className="p-8 text-center text-gray-500">
                                                {patients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"}
                                            </td>
                                        </tr>
                                    ) : (
                                        filteredPatients.map((patient) => (
                                            <tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50">
                                                <td className="p-4">
                                                    <div className="flex items-center gap-3">
                                                        <div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                                                            <span className="text-gray-600 font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span>
                                                        </div>
                                                        <span className="font-medium text-gray-900">{patient.nome}</span>
                                                    </div>
                                                </td>
                                                <td className="p-4 text-gray-600">{patient.telefone}</td>
                                                <td className="p-4 text-gray-600">{patient.cidade}</td>
                                                <td className="p-4 text-gray-600">{patient.estado}</td>
                                                <td className="p-4 text-gray-600">{patient.ultimoAtendimento}</td>
                                                <td className="p-4 text-gray-600">{patient.proximoAtendimento}</td>
                                                <td className="p-4">
                                                    <DropdownMenu>
                                                        <DropdownMenuTrigger asChild>
                                                            <div className="text-blue-600">Ações</div>
                                                        </DropdownMenuTrigger>
                                                        <DropdownMenuContent align="end">
                                                            <DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}>
                                                                <Eye className="w-4 h-4 mr-2" />
                                                                Ver detalhes
                                                            </DropdownMenuItem>
                                                            <DropdownMenuItem asChild>
                                                                <Link href={`/secretary/pacientes/${patient.id}/editar`}>
                                                                    <Edit className="w-4 h-4 mr-2" />
                                                                    Editar
                                                                </Link>
                                                            </DropdownMenuItem>
                                                            <DropdownMenuItem>
                                                                <Calendar className="w-4 h-4 mr-2" />
                                                                Marcar consulta
                                                            </DropdownMenuItem>
                                                            <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}>
                                                                <Trash2 className="w-4 h-4 mr-2" />
                                                                Excluir
                                                            </DropdownMenuItem>
                                                        </DropdownMenuContent>
                                                    </DropdownMenu>
                                                </td>
                                            </tr>
                                        ))
                                    )}
                                </tbody>
                            </table>
                        )}
                        <div ref={observerRef} style={{ height: 1 }} />
                        {isFetching && <div className="p-4 text-center text-gray-500">Carregando mais pacientes...</div>}
                    </div>
                </div>

                <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
                    <AlertDialogContent>
                        <AlertDialogHeader>
                            <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
                            <AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
                            <AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700">
                                Excluir
                            </AlertDialogAction>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialog>

                {/* Modal de detalhes do paciente */}
                <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
                    <AlertDialogContent>
                        <AlertDialogHeader>
                            <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
                            <AlertDialogDescription>
                                {patientDetails === null ? (
                                    <div className="text-gray-500">Carregando...</div>
                                ) : patientDetails?.error ? (
                                    <div className="text-red-600">{patientDetails.error}</div>
                                ) : (
                                    <div className="space-y-2 text-left">
                                        <p><strong>Nome:</strong> {patientDetails.full_name}</p>
                                        <p><strong>CPF:</strong> {patientDetails.cpf}</p>
                                        <p><strong>Email:</strong> {patientDetails.email}</p>
                                        <p><strong>Telefone:</strong> {patientDetails.phone_mobile ?? patientDetails.phone1 ?? patientDetails.phone2 ?? "-"}</p>
                                        <p><strong>Nome social:</strong> {patientDetails.social_name ?? "-"}</p>
                                        <p><strong>Sexo:</strong> {patientDetails.sex ?? "-"}</p>
                                        <p><strong>Tipo sanguíneo:</strong> {patientDetails.blood_type ?? "-"}</p>
                                        <p><strong>Peso:</strong> {patientDetails.weight_kg ?? "-"}{patientDetails.weight_kg ? "kg": ""}</p>
                                        <p><strong>Altura:</strong> {patientDetails.height_m ?? "-"}{patientDetails.height_m ? "m": ""}</p>
                                        <p><strong>IMC:</strong> {patientDetails.bmi ?? "-"}</p>
                                        <p><strong>Endereço:</strong> {patientDetails.street ?? "-"}</p>
                                        <p><strong>Bairro:</strong> {patientDetails.neighborhood ?? "-"}</p>
                                        <p><strong>Cidade:</strong> {patientDetails.city ?? "-"}</p>
                                        <p><strong>Estado:</strong> {patientDetails.state ?? "-"}</p>
                                        <p><strong>CEP:</strong> {patientDetails.cep ?? "-"}</p>
                                        <p><strong>Criado em:</strong> {patientDetails.created_at ?? "-"}</p>
                                        <p><strong>Atualizado em:</strong> {patientDetails.updated_at ?? "-"}</p>
                                    </div>
                                )}
                            </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                            <AlertDialogCancel>Fechar</AlertDialogCancel>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialog>
            </div>
        </SecretaryLayout>
    );
}