"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useI18n } from "@/contexts/I18nContext"
import { LoadingSpinner } from "@/components/ui/loading-spinner"

interface PersonStats {
  id: string
}

interface PersonDocument {
  id: string
  dataValidade?: string | null
}

export default function PeopleDashboard() {
  const { t } = useI18n()

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [peopleRes, docsRes] = await Promise.all([
          fetch("/api/people"),
          fetch("/api/people-documents"),
        ])

        if (peopleRes.ok) {
          const p = await peopleRes.json()
          setPeople(Array.isArray(p) ? p : [])
        }

        if (docsRes.ok) {
          const d = await docsRes.json()
          setDocuments(Array.isArray(d) ? d : [])
        }
      } catch (error) {
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [])

  if (loading) return <LoadingSpinner />

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

  const docsWithValidity = documents.filter((d) => d.dataValidade)

  const expiringSoon = docsWithValidity.filter((d) => {
    const v = new Date(d.dataValidade as string)
    return v >= today && v <= in30Days
  })

  const expired = docsWithValidity.filter((d) => {
    const v = new Date(d.dataValidade as string)
    return v < today
  })

  return (
    <div>
      <h1 className="text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 dark:text-white">
        {safeT("modules.people.title", "Pessoas")}
      </h1>
      <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
        {safeT(
          "people.dashboardDescription",
          "Resumo geral de pessoas e validade de documentos (FPC, visitas médicas, etc.)."
        )}
      </p>

      <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
        <Card className="dark:bg-gray-800">
          <CardHeader>
            <CardTitle className="dark:text-white">
              {safeT("people.totalPeople", "Total de pessoas")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold dark:text-white">{people.length}</p>
          </CardContent>
        </Card>

        <Card className="dark:bg-gray-800">
          <CardHeader>
            <CardTitle className="dark:text-white">
              {safeT("people.docsExpiringSoon", "Documentos a vencer (30 dias)")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold dark:text-white">{expiringSoon.length}</p>
          </CardContent>
        </Card>

        <Card className="dark:bg-gray-800">
          <CardHeader>
            <CardTitle className="dark:text-white">
              {safeT("people.docsExpired", "Documentos vencidos")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold dark:text-white">{expired.length}</p>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}