import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Download, FileJson2, HardDriveDownload, ShieldCheck, ShieldX, Users } from "lucide-react";
import { format } from "date-fns";
import { es } from "date-fns/locale";
import type { ConfiguracionOverview } from "@/server/queries/configuracion";
import { ChangePasswordForm } from "@/components/configuracion/change-password-form";
import { semanticBadgeClass, semanticSurfaceClass } from "@/lib/badge-variants";

function formatDate(value: Date | null) {
  return value ? format(value, "dd-MM-yyyy HH:mm", { locale: es }) : "-";
}

export function ConfiguracionDashboard({ overview }: { overview: ConfiguracionOverview }) {
  return (
    <div className="space-y-6">
      <section className="grid gap-4 lg:grid-cols-3">
        <Card className="border-border shadow-sm lg:col-span-2">
          <CardHeader>
            <CardTitle>Información del sistema</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            <Metric label="Sistema" value={overview.sistema.nombre} />
            <Metric label="Versión" value={overview.sistema.version} />
            <Metric label="Ambiente" value={overview.sistema.ambiente === "produccion" ? "Producción" : "Desarrollo"} />
            <Metric label="Base de datos" value={overview.sistema.baseDatos} />
            <Metric label="Proveedor" value={overview.sistema.proveedor} />
            <Metric label="Última actualización" value={formatDate(overview.sistema.fechaUltimaActualizacion)} />
          </CardContent>
        </Card>

        <Card className="border-border shadow-sm">
          <CardHeader>
            <CardTitle>Seguridad</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {overview.seguridad.map((item) => (
              <div key={item.label} className={semanticSurfaceClass("neutral", { padding: "sm" })}>
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <p className="text-sm font-medium text-foreground">{item.label}</p>
                    <p className="text-xs text-muted-foreground">{item.detail}</p>
                  </div>
                  {item.ok ? (
                    <Badge className={semanticBadgeClass("success", { shape: "pill" })}>
                      <ShieldCheck className="mr-1 h-3.5 w-3.5" />
                      OK
                    </Badge>
                  ) : (
                    <Badge className={semanticBadgeClass("warning", { shape: "pill" })}>
                      <ShieldX className="mr-1 h-3.5 w-3.5" />
                      Pendiente
                    </Badge>
                  )}
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      </section>

      <section className="grid gap-4 xl:grid-cols-3">
        <Card className="border-border shadow-sm xl:col-span-2">
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <CardTitle>Respaldo de base de datos</CardTitle>
            <HardDriveDownload className="h-5 w-5 text-muted-foreground" />
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-muted-foreground">
              Exporta datos principales del sistema sin incluir contraseñas. El respaldo se descarga como JSON para uso
              administrativo e importaciones futuras.
            </p>
            <div className="flex flex-wrap gap-2">
              <Button asChild className="gap-2">
                <Link href="/api/configuracion/respaldo">
                  <Download className="h-4 w-4" />
                  Generar respaldo
                </Link>
              </Button>
              <Button asChild variant="outline" className="gap-2">
                <Link href="/api/configuracion/respaldo/documentos">
                  <FileJson2 className="h-4 w-4" />
                  Respaldo de documentos
                </Link>
              </Button>
            </div>
            <div className="h-px w-full bg-border" />
            <div className="grid gap-3 md:grid-cols-2">
              <BackupHint label="Incluye" value="Fichas, ocupantes, lotes, vivienda, deslindes, documentos, comentarios, auditoría y usuarios sin hash." />
              <BackupHint label="Documentos" value="Se exporta el manifiesto de uploads con estructura preparada para ZIP." />
            </div>
          </CardContent>
        </Card>

        <Card className="border-border shadow-sm">
          <CardHeader>
            <CardTitle>Seguridad de usuarios</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className={`text-sm text-muted-foreground ${semanticSurfaceClass("neutral", { padding: "sm" })}`}>
              Administra contraseñas, activación e inactivación desde el módulo de usuarios.
            </div>
            <div className="flex flex-col gap-2">
              <Button asChild variant="outline" className="justify-start">
                <Link href="/usuarios">
                  <Users className="mr-2 h-4 w-4" />
                  Administrar usuarios
                </Link>
              </Button>
              <Button asChild variant="outline" className="justify-start">
                <Link href="/usuarios/nuevo">Crear usuario</Link>
              </Button>
              <Button asChild variant="outline" className="justify-start">
                <Link href="/usuarios">Forzar cambio de contraseña / desactivar</Link>
              </Button>
            </div>
          </CardContent>
        </Card>
      </section>

      <ChangePasswordForm />

      <section className="grid gap-4 xl:grid-cols-3">
        <Card className="border-border shadow-sm xl:col-span-2">
          <CardHeader>
            <CardTitle>Auditoría reciente</CardTitle>
          </CardHeader>
          <CardContent>
            {overview.auditLogs.length === 0 ? (
              <p className="text-sm text-muted-foreground">No hay eventos recientes para mostrar.</p>
            ) : (
              <div className="overflow-hidden rounded-xl border border-border">
                <table className="min-w-full divide-y divide-border text-sm">
                  <thead className="bg-muted text-left text-xs uppercase tracking-wide text-muted-foreground">
                    <tr>
                      <th className="px-4 py-3">Fecha</th>
                      <th className="px-4 py-3">Usuario</th>
                      <th className="px-4 py-3">Acción</th>
                      <th className="px-4 py-3">Sección</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border bg-card">
                    {overview.auditLogs.map((log) => (
                      <tr key={log.id} className="hover:bg-muted/50">
                        <td className="px-4 py-3 whitespace-nowrap text-foreground">{formatDate(log.createdAt)}</td>
                        <td className="px-4 py-3 text-foreground">{log.user?.name ?? log.user?.email ?? "-"}</td>
                        <td className="px-4 py-3 text-foreground">{humanizeAction(log.action)}</td>
                        <td className="px-4 py-3 text-foreground">{humanizeEntity(log.entity)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </CardContent>
        </Card>

        <Card className="border-border shadow-sm">
          <CardHeader>
            <CardTitle>Estado administrativo</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-sm text-muted-foreground">
            <p>Los respaldos manuales quedan disponibles mediante descarga directa.</p>
            <p>Las rutas sensibles ya están protegidas por sesión y permisos.</p>
            <p>No se exponen contraseñas, secretos ni archivos `.env` en esta vista.</p>
          </CardContent>
        </Card>
      </section>
    </div>
  );
}

function Metric({ label, value }: { label: string; value: string }) {
  return (
    <div className={semanticSurfaceClass("neutral", { padding: "md" })}>
      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{label}</p>
      <p className="mt-2 text-base font-semibold text-foreground">{value}</p>
    </div>
  );
}

function BackupHint({ label, value }: { label: string; value: string }) {
  return (
    <div className={semanticSurfaceClass("neutral", { padding: "sm" })}>
      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{label}</p>
      <p className="mt-1 text-sm text-foreground">{value}</p>
    </div>
  );
}

function humanizeAction(value: string) {
  const map: Record<string, string> = {
    CREATE: "Creó",
    UPDATE: "Actualizó",
    DELETE: "Eliminó",
    DOWNLOAD_DOCUMENT: "Descargó documento",
    VIEW_DOCUMENT: "Visualizó documento",
    GENERATE_BACKUP: "Generó respaldo",
    DOWNLOAD_BACKUP: "Descargó respaldo",
  };
  return map[value] ?? value.replaceAll("_", " ").toLowerCase();
}

function humanizeEntity(value: string) {
  const map: Record<string, string> = {
    User: "Usuarios",
    Documento: "Documentos",
    EmpadronamientoFicha: "Fichas",
    Lote: "Lotes",
    Ocupante: "Ocupante responsable",
    OcupanteActualLote: "Ocupantes actuales",
    SituacionVivienda: "Situación vivienda",
    Deslinde: "Deslindes",
    Comentario: "Observaciones",
    AuditLog: "Auditoría",
  };
  return map[value] ?? value;
}