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 { formatDateTimeCL } from "@/lib/date-format";
import { labelEstadoFicha } from "@/lib/estado-ficha";
import { labelTramoRsh } from "@/lib/tramo-rsh";
import type { FichaAuditLogResult } from "@/server/queries/fichas";

function actionLabel(action: string) {
  const labels: Record<string, string> = {
    CREATE: "Creó ficha",
    UPDATE: "Actualizó ficha",
    UPDATE_OCUPANTE: "Actualizó ocupante responsable",
    UPDATE_STATUS: "Actualizó estado de ficha",
    UPDATE_LOTE: "Actualizó antecedentes del lote",
    UPDATE_VIVIENDA: "Actualizó situación vivienda",
    UPDATE_DESLINDE: "Actualizó deslindes",
    UPDATE_OBSERVACIONES: "Actualizó observaciones",
    ADD_CURRENT_OCCUPANTS: "Agregó ocupante actual",
    REMOVE_CURRENT_OCCUPANTS: "Eliminó ocupante actual",
    UPLOAD_DOCUMENT: "Subió documento",
    VIEW_DOCUMENT: "Visualizó documento",
    DOWNLOAD_DOCUMENT: "Descargó documento",
    VALIDATE_DOCUMENT: "Validó documento",
    REJECT_DOCUMENT: "Rechazó documento",
    DELETE_DOCUMENT: "Eliminó documento",
    ADD_COMMENT: "Agregó comentario",
    SOFT_DELETE: "Eliminó ficha",
  };
  return labels[action] ?? action;
}

function sectionLabel(entity: string) {
  const labels: Record<string, string> = {
    EmpadronamientoFicha: "Ficha",
    Ocupante: "Ocupante actual",
    OcupanteActualLote: "Ocupantes actuales",
    Lote: "Antecedentes del lote",
    SituacionVivienda: "Situación vivienda",
    Deslinde: "Deslindes",
    Documento: "Documentos",
    Comentario: "Observaciones",
  };
  return labels[entity] ?? entity;
}

function detailText(metadata: unknown) {
  if (!metadata || typeof metadata !== "object") return "-";
  const value = metadata as Record<string, unknown>;
  if (typeof value.observacion === "string" && value.observacion) return value.observacion;
  if (typeof value.estadoAnterior === "string" && typeof value.estadoNuevo === "string") {
    return `${labelEstadoFicha(value.estadoAnterior)} → ${labelEstadoFicha(value.estadoNuevo)}`;
  }
  if ("tramoRshAnterior" in value || "tramoRshNuevo" in value) {
    const anterior = labelTramoRsh(typeof value.tramoRshAnterior === "string" ? value.tramoRshAnterior : null) || "-";
    const nuevo = labelTramoRsh(typeof value.tramoRshNuevo === "string" ? value.tramoRshNuevo : null) || "-";
    if (anterior !== "-" || nuevo !== "-") return `Tramo % RSH: ${anterior} → ${nuevo}`;
  }
  if (typeof value.nombreArchivo === "string" && value.nombreArchivo) return value.nombreArchivo;
  if (typeof value.cantidad === "number") return `Cantidad: ${value.cantidad}`;
  if (typeof value.codigo === "string" && value.codigo) return `Código: ${value.codigo}`;
  return "-";
}

export function HistorialPanel({
  fichaId,
  result,
}: {
  fichaId: string;
  result: FichaAuditLogResult;
}) {
  const from = result.total === 0 ? 0 : (result.page - 1) * result.pageSize + 1;
  const to = Math.min(result.page * result.pageSize, result.total);

  return (
    <Card>
      <CardHeader>
        <CardTitle>Historial de cambios</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="overflow-hidden rounded-md border border-border bg-card">
          <div className="hidden grid-cols-[150px_180px_170px_220px_1fr] gap-3 border-b bg-muted px-4 py-3 text-xs font-medium text-muted-foreground lg:grid">
            <span>Fecha</span>
            <span>Usuario</span>
            <span>Sección</span>
            <span>Acción</span>
            <span>Detalle</span>
          </div>
          {result.logs.length === 0 ? (
            <p className="p-4 text-sm text-muted-foreground">No hay movimientos registrados.</p>
          ) : (
            <div className="divide-y">
              {result.logs.map((log) => (
                <div key={log.id} className="grid gap-2 p-4 text-sm lg:grid-cols-[150px_180px_170px_220px_1fr] lg:items-center">
                  <p className="text-muted-foreground">{formatDateTimeCL(log.createdAt)}</p>
                  <p>{log.user?.name ?? "Sistema"}</p>
                  <Badge variant="secondary" className="w-fit">
                    {sectionLabel(log.entity)}
                  </Badge>
                  <p className="font-medium">{actionLabel(log.action)}</p>
                  <p className="text-muted-foreground">{detailText(log.metadata)}</p>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-sm text-muted-foreground">
            Mostrando {from}-{to} de {result.total} registros · Página {result.page} de {result.totalPages}
          </p>
          <div className="flex gap-2">
            <Button asChild variant="outline" size="sm" disabled={result.page <= 1}>
              <Link href={`/fichas/${fichaId}?historialPage=${Math.max(result.page - 1, 1)}`}>Anterior</Link>
            </Button>
            <Button asChild variant="outline" size="sm" disabled={result.page >= result.totalPages}>
              <Link href={`/fichas/${fichaId}?historialPage=${Math.min(result.page + 1, result.totalPages)}`}>Siguiente</Link>
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}