"use client"

import { useState } 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"

// Mock data for doctors
const mockDoctors = [
  {
    id: 1,
    nome: "Dr. Carlos Silva",
    crm: "CRM/SE 12345",
    especialidade: "Cardiologia",
    telefone: "(79) 99999-1234",
    cidade: "Aracaju",
    estado: "Sergipe",
    ultimoAtendimento: "15/03/2024 14:30",
    proximoAtendimento: "20/03/2024 09:00",
    status: "Ativo",
  },
  {
    id: 2,
    nome: "Dra. Maria Santos",
    crm: "CRM/SE 67890",
    especialidade: "Pediatria",
    telefone: "(79) 99888-5678",
    cidade: "Aracaju",
    estado: "Sergipe",
    ultimoAtendimento: "14/03/2024 16:00",
    proximoAtendimento: "21/03/2024 10:30",
    status: "Ativo",
  },
  {
    id: 3,
    nome: "Dr. João Oliveira",
    crm: "CRM/SE 11111",
    especialidade: "Ortopedia",
    telefone: "(79) 99777-9999",
    cidade: "São Cristóvão",
    estado: "Sergipe",
    ultimoAtendimento: "13/03/2024 11:15",
    proximoAtendimento: "Nenhum atendimento agendado",
    status: "Inativo",
  },
]

export default function MedicosPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [especialidadeFilter, setEspecialidadeFilter] = useState("all")
  const [statusFilter, setStatusFilter] = useState("all")
  const [doctors, setDoctors] = useState(mockDoctors)
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [doctorToDelete, setDoctorToDelete] = useState<number | null>(null)

  const handleDeleteDoctor = (doctorId: number) => {
    setDoctors(doctors.filter((doctor) => doctor.id !== doctorId))
    setDeleteDialogOpen(false)
    setDoctorToDelete(null)
  }

  const openDeleteDialog = (doctorId: number) => {
    setDoctorToDelete(doctorId)
    setDeleteDialogOpen(true)
  }

  const filteredDoctors = doctors.filter((doctor) => {
    const matchesSearch =
      doctor.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
      doctor.crm.toLowerCase().includes(searchTerm.toLowerCase()) ||
      doctor.telefone.includes(searchTerm)
    const matchesEspecialidade = especialidadeFilter === "all" || doctor.especialidade === especialidadeFilter
    const matchesStatus = statusFilter === "all" || doctor.status === statusFilter

    return matchesSearch && matchesEspecialidade && matchesStatus
  })

  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</h1>
          <p className="text-gray-600">Gerencie as informações dos médicos</p>
        </div>
        <Link href="/medicos/novo">
          <Button className="bg-green-600 hover:bg-green-700">
            <Plus className="w-4 h-4 mr-2" />
            Adicionar
          </Button>
        </Link>
      </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">Especialidade</span>
          <Select value={especialidadeFilter} onValueChange={setEspecialidadeFilter}>
            <SelectTrigger className="w-40">
              <SelectValue placeholder="Selecione a Especialidade" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todas</SelectItem>
              <SelectItem value="Cardiologia">Cardiologia</SelectItem>
              <SelectItem value="Pediatria">Pediatria</SelectItem>
              <SelectItem value="Ortopedia">Ortopedia</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="flex items-center gap-2">
          <span className="text-sm font-medium text-gray-700">Status</span>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-32">
              <SelectValue placeholder="Selecione" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todos</SelectItem>
              <SelectItem value="Ativo">Ativo</SelectItem>
              <SelectItem value="Inativo">Inativo</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">CRM</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>
              {filteredDoctors.map((doctor) => (
                <tr key={doctor.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">{doctor.nome.charAt(3)}</span>
                      </div>
                      <span className="font-medium text-gray-900">{doctor.nome}</span>
                    </div>
                  </td>
                  <td className="p-4 text-gray-600">{doctor.crm}</td>
                  <td className="p-4 text-gray-600">{doctor.telefone}</td>
                  <td className="p-4 text-gray-600">{doctor.cidade}</td>
                  <td className="p-4 text-gray-600">{doctor.estado}</td>
                  <td className="p-4 text-gray-600">{doctor.ultimoAtendimento}</td>
                  <td className="p-4 text-gray-600">{doctor.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={`/medicos/${doctor.id}/editar`}>
                            <Edit className="w-4 h-4 mr-2" />
                            Editar
                          </Link>
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                          <Calendar className="w-4 h-4 mr-2" />
                          Ver agenda
                        </DropdownMenuItem>
                        <DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(doctor.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 médico? Esta ação não pode ser desfeita.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => doctorToDelete && handleDeleteDoctor(doctorToDelete)}
              className="bg-red-600 hover:bg-red-700"
            >
              Excluir
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}