"use client"

import { useEffect, useState, useCallback } from "react"
import { useI18n } from "@/contexts/I18nContext"
import { LoadingSpinner } from "@/components/ui/loading-spinner"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { useToast } from "@/hooks/use-toast"
import { NotificationBell } from "@/components/NotificationBell"
import { getUpcomingDocuments, type Documento as EquipDoc } from "@/lib/notifications"
import { Button } from "@/components/ui/button"
import { Edit } from "lucide-react"
import Link from "next/link"

interface PersonDocument {
  id: string
  personId: string
  titulo: string
  tipo: string
  arquivo: string
  dataEmissao?: string | null
  dataValidade?: string | null
  person?: {
    nomeCompleto: string
    departamento?: string | null
  }
}

export default function PeopleDocumentsPage() {
  const { t } = useI18n()
  const { toast } = useToast()

  const safeT = (key: string, fallback: string) => {
    const value = t(key)
    if (!value || value === key) return fallback
    return value
  }
  const [documents, setDocuments] = useState<PersonDocument[]>([])
  const [loading, setLoading] = useState(true)

  const fetchData = useCallback(async () => {
    try {
      const docsRes = await fetch("/api/people-documents")

      if (docsRes.ok) {
        const d = await docsRes.json()
        setDocuments(Array.isArray(d) ? d : [])
      }
    } catch (error) {
      toast({
        title: safeT("common.error", "Erro"),
        description: safeT(
          "people.docsLoadError",
          "Erro ao carregar documentos de pessoas"
        ),
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }, [toast, t])

  useEffect(() => {
    fetchData()
  }, [fetchData])

  if (loading) return <LoadingSpinner />

  const today = new Date()
  const in30Days = new Date()
  in30Days.setDate(today.getDate() + 30)

  const getStatus = (d: PersonDocument) => {
    if (!d.dataValidade) return "-"
    const v = new Date(d.dataValidade)
    if (v < today) return safeT("people.docStatus.expired", "Vencido")
    if (v >= today && v <= in30Days)
      return safeT("people.docStatus.expiring", "A vencer")
    return safeT("people.docStatus.ok", "OK")
  }

  const notificationDocs: EquipDoc[] = documents.map((doc) => ({
    id: doc.id,
    titulo: doc.titulo,
    dataVencimento: doc.dataValidade || undefined,
    equipamento: {
      matricula: doc.person?.nomeCompleto,
      parque: doc.person?.departamento || undefined,
      modelo: "Pessoa",
    },
  }))

  const upcomingNotifications = getUpcomingDocuments(notificationDocs)
  const notificationCount = upcomingNotifications.length

  return (
    <div>
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4 sm:mb-6">
        <div>
          <h1 className="text-2xl sm:text-3xl font-bold dark:text-white">
            {safeT("people.documents", "Documentos de pessoas")}
          </h1>
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
            {safeT(
              "people.docsDescription",
              "Gestão de documentos de qualificação (FPC, visitas médicas, etc.)."
            )}
          </p>
        </div>
        <NotificationBell count={notificationCount} items={upcomingNotifications} />
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow className="dark:border-gray-700">
              <TableHead className="dark:text-gray-300">
                {safeT("people.person", "Pessoa")}
              </TableHead>
              <TableHead className="dark:text-gray-300">
                {safeT("documents.titleField", "Título")}
              </TableHead>
              <TableHead className="dark:text-gray-300">
                {safeT("documents.type", "Tipo")}
              </TableHead>
              <TableHead className="dark:text-gray-300">
                {safeT("documents.expiration", "Data de vencimento")}
              </TableHead>
              <TableHead className="dark:text-gray-300">
                {safeT("people.status", "Status")}
              </TableHead>
              <TableHead className="dark:text-gray-300">
                {safeT("common.actions", "Ações")}
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {documents.length === 0 ? (
              <TableRow className="dark:border-gray-700">
                <TableCell colSpan={6} className="text-center dark:text-gray-400">
                  {safeT(
                    "people.noDocuments",
                    "Nenhum documento de pessoa cadastrado"
                  )}
                </TableCell>
              </TableRow>
            ) : (
              documents.map((doc) => (
                <TableRow key={doc.id} className="dark:border-gray-700">
                  <TableCell className="dark:text-gray-300">
                    {doc.person?.nomeCompleto || "-"}
                  </TableCell>
                  <TableCell className="dark:text-gray-300">{doc.titulo}</TableCell>
                  <TableCell className="dark:text-gray-300">{doc.tipo}</TableCell>
                  <TableCell className="dark:text-gray-300">
                    {doc.dataValidade
                      ? new Date(doc.dataValidade).toLocaleDateString("pt-BR")
                      : "-"}
                  </TableCell>
                  <TableCell className="dark:text-gray-300">{getStatus(doc)}</TableCell>
                  <TableCell>
                    <div className="flex gap-2">
                      <Link href={`/module-people/admin/people/${doc.personId}?tab=documents`}>
                        <Button
                          variant="outline"
                          size="icon"
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                      </Link>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}