"use client";

import React, { useEffect, useState, useCallback } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { medicosApi, Doctor } from "@/services/medicosApi";
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, MoreVertical, Loader2 } from "lucide-react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

interface DoctorDetails {
  nome: string;
  crm: string;
  especialidade: string;
  contato: {
    celular?: string;
    telefone1?: string;
  };
  endereco: {
    cidade?: string;
    estado?: string;
  };
  convenio?: string;
  vip?: boolean;
  status?: string;
  ultimo_atendimento?: string;
  proximo_atendimento?: string;
  error?: string;
}

export default function DoctorsPage() {
  const router = useRouter();

  const [doctors, setDoctors] = useState<Doctor[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
  const [doctorDetails, setDoctorDetails] = useState<DoctorDetails | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [doctorToDeleteId, setDoctorToDeleteId] = useState<string | null>(null);

  const fetchDoctors = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    try {
      const data: Doctor[] = await medicosApi.list();
      setDoctors(data || []);
    } catch (e: any) {
      console.error("Erro ao carregar lista de médicos:", e);
      setError("Não foi possível carregar a lista de médicos. Verifique a conexão com a API.");
      setDoctors([]);
    } finally {
      setIsLoading(false);
    }
  }, []);

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

  const openDetailsDialog = async (doctor: Doctor) => {
    setDetailsDialogOpen(true);
    setDoctorDetails({
      nome: doctor.full_name,
      crm: doctor.crm,
      especialidade: doctor.specialty,
      contato: {
        celular: doctor.phone_mobile ?? undefined,
        telefone1: undefined,
      },
      endereco: {
        cidade: doctor.city ?? undefined,
        estado: doctor.state ?? undefined,
      },
      convenio: "Particular",
      vip: false,
      status: "Ativo",
      ultimo_atendimento: "N/A",
      proximo_atendimento: "N/A",
    });
  };

  const handleDelete = async () => {
    if (doctorToDeleteId === null) return;

    try {
      await medicosApi.delete(doctorToDeleteId);
      setDeleteDialogOpen(false);
      setDoctorToDeleteId(null);
      await fetchDoctors();
    } catch (e) {
      console.error("Erro ao excluir:", e);
      setError("Erro ao excluir o médico. Tente novamente.");
      setDeleteDialogOpen(false);
    }
  };

  const openDeleteDialog = (doctorId: string) => {
    setDoctorToDeleteId(doctorId);
    setDeleteDialogOpen(true);
  };

  const handleEdit = (doctorId: string) => {
    router.push(`/manager/home/${doctorId}/editar`);
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Médicos Cadastrados</h1>
          <p className="text-sm text-gray-500">Gerencie todos os profissionais de saúde.</p>
        </div>
        <Link href="/manager/home/novo">
          <Button className="bg-green-600 hover:bg-green-700">
            <Plus className="w-4 h-4 mr-2" />
            Adicionar Novo
          </Button>
        </Link>
      </div>

      <div className="flex items-center space-x-4 bg-white p-4 rounded-lg border border-gray-200">
        <Filter className="w-5 h-5 text-gray-400" />
        <Select>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Especialidade" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="cardiologia">Cardiologia</SelectItem>
            <SelectItem value="dermatologia">Dermatologia</SelectItem>
            <SelectItem value="pediatria">Pediatria</SelectItem>
          </SelectContent>
        </Select>
        <Select>
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Status" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="ativo">Ativo</SelectItem>
            <SelectItem value="ferias">Férias</SelectItem>
            <SelectItem value="inativo">Inativo</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden">
        {isLoading ? (
          <div className="p-8 text-center text-gray-500">
            <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" />
            Carregando médicos...
          </div>
        ) : error ? (
          <div className="p-8 text-center text-red-600">{error}</div>
        ) : doctors.length === 0 ? (
          <div className="p-8 text-center text-gray-500">
            Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-green-600 hover:underline">Adicione um novo</Link>.
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CRM</th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Especialidade</th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Celular</th>
                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cidade/Estado</th>
                  <th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {doctors.map((doctor) => (
                  <tr key={doctor.id} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{doctor.full_name}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{doctor.crm}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{doctor.specialty}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{doctor.phone_mobile || "N/A"}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {(doctor.city || doctor.state) ? `${doctor.city || ""}${doctor.city && doctor.state ? "/" : ""}${doctor.state || ""}` : "N/A"}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <div className="flex justify-end space-x-1">
                        <Button variant="outline" size="icon" onClick={() => openDetailsDialog(doctor)} title="Visualizar Detalhes">
                          <Eye className="h-4 w-4" />
                        </Button>
                        <Button variant="outline" size="icon" onClick={() => handleEdit(doctor.id)} title="Editar">
                          <Edit className="h-4 w-4 text-blue-600" />
                        </Button>
                        <Button variant="outline" size="icon" onClick={() => openDeleteDialog(doctor.id)} title="Excluir">
                          <Trash2 className="h-4 w-4 text-red-600" />
                        </Button>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0" title="Mais Ações">
                              <span className="sr-only">Mais Ações</span>
                              <MoreVertical className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem>
                              <Calendar className="mr-2 h-4 w-4" />
                              Agendar Consulta
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Confirma a exclusão?</AlertDialogTitle>
            <AlertDialogDescription>
              Esta ação é irreversível e excluirá permanentemente o registro deste médico.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700">
              Excluir
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      <AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle className="text-2xl">{doctorDetails?.nome}</AlertDialogTitle>
            <AlertDialogDescription className="text-left text-gray-700">
              {doctorDetails && (
                <div className="space-y-3 text-left">
                  <h3 className="font-semibold mt-2">Informações Principais</h3>
                  <div className="grid grid-cols-2 gap-y-1 gap-x-4 text-sm">
                    <div><strong>CRM:</strong> {doctorDetails.crm}</div>
                    <div><strong>Especialidade:</strong> {doctorDetails.especialidade}</div>
                    <div><strong>Celular:</strong> {doctorDetails.contato.celular || "N/A"}</div>
                    <div><strong>Localização:</strong> {`${doctorDetails.endereco.cidade || "N/A"}/${doctorDetails.endereco.estado || "N/A"}`}</div>
                  </div>
                  <h3 className="font-semibold mt-4">Atendimento e Convênio</h3>
                  <div className="grid grid-cols-2 gap-y-1 gap-x-4 text-sm">
                    <div><strong>Convênio:</strong> {doctorDetails.convenio || "N/A"}</div>
                    <div><strong>VIP:</strong> {doctorDetails.vip ? "Sim" : "Não"}</div>
                    <div><strong>Status:</strong> {doctorDetails.status || "N/A"}</div>
                    <div><strong>Último atendimento:</strong> {doctorDetails.ultimo_atendimento || "N/A"}</div>
                    <div><strong>Próximo atendimento:</strong> {doctorDetails.proximo_atendimento || "N/A"}</div>
                  </div>
                </div>
              )}
              {doctorDetails === null && !isLoading && (
                <div className="text-red-600">Detalhes não disponíveis.</div>
              )}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Fechar</AlertDialogCancel>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}