"use client"

import { useState, useEffect } 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 { dataStore } from "@/lib/data-store"

export default function PacientesPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [convenioFilter, setConvenioFilter] = useState("all")
  const [vipFilter, setVipFilter] = useState("all")
  const [patients, setPatients] = useState(dataStore.getPatients())
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [patientToDelete, setPatientToDelete] = useState<number | null>(null)

  useEffect(() => {
    setPatients(dataStore.getPatients())
  }, [])

  const handleDeletePatient = (patientId: number) => {
    dataStore.deletePatient(patientId)
    setPatients(dataStore.getPatients())
    setDeleteDialogOpen(false)
    setPatientToDelete(null)
  }

  const openDeleteDialog = (patientId: number) => {
    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 (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Pacientes</h1>
          <p className="text-gray-600">Gerencie as informações de seus pacientes</p>
        </div>
        <div className="flex gap-2">
          <Link href="/pacientes/novo">
            <Button className="bg-blue-600 hover:bg-blue-700">
              <Plus className="w-4 h-4 mr-2" />
              Adicionar
            </Button>
          </Link>
        </div>
      </div>

      <div className="flex items-center gap-4 bg-white p-4 rounded-lg border border-gray-200">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium text-gray-700">Convênio</span>
          <Select value={convenioFilter} onValueChange={setConvenioFilter}>
            <SelectTrigger className="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">
          <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">
          <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">
          <table className="w-full">
            <thead className="bg-gray-50 border-b border-gray-200">
              <tr>
                <th className="text-left p-4 font-medium text-gray-700">Nome</th>
                <th className="text-left p-4 font-medium text-gray-700">Telefone</th>
                <th className="text-left p-4 font-medium text-gray-700">Cidade</th>
                <th className="text-left p-4 font-medium text-gray-700">Estado</th>
                <th className="text-left p-4 font-medium text-gray-700">Último atendimento</th>
                <th className="text-left p-4 font-medium text-gray-700">Próximo atendimento</th>
                <th className="text-left 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>
                          <Button variant="ghost" size="sm" className="text-blue-600">
                            Ações
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem>
                            <Eye className="w-4 h-4 mr-2" />
                            Ver detalhes
                          </DropdownMenuItem>
                          <DropdownMenuItem asChild>
                            <Link href={`/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(patient.id!)}>
                            <Trash2 className="w-4 h-4 mr-2" />
                            Excluir
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </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>
    </div>
  )
}