import Link from "next/link";
import type { ReactNode } from "react";
import { Eye, Pencil } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { BitacoraDeleteDialog } from "@/components/bitacora/bitacora-delete-dialog";
import {
  labelBitacoraCategoria,
  labelBitacoraEstado,
  labelBitacoraPrioridad,
} from "@/lib/bitacora";
import { badgeClassForBitacoraEstado, badgeClassForBitacoraPrioridad } from "@/lib/state-variants";
import { formatBitacoraDate } from "@/server/queries/bitacora";
import type { getBitacoraHitos } from "@/server/queries/bitacora";

type BitacoraRow = Awaited<ReturnType<typeof getBitacoraHitos>>["items"][number];

export function BitacoraTable({ items }: { items: BitacoraRow[] }) {
  return (
    <Card className="overflow-hidden border-border shadow-sm">
      <div className="overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow className="bg-muted">
              <TableHead className="w-[130px]">Fecha</TableHead>
              <TableHead>Título</TableHead>
              <TableHead className="w-[140px]">Categoría</TableHead>
              <TableHead className="w-[120px]">Estado</TableHead>
              <TableHead className="w-[110px]">Prioridad</TableHead>
              <TableHead className="w-[150px]">Organismo</TableHead>
              <TableHead className="w-[150px]">Responsable</TableHead>
              <TableHead className="w-[90px] text-center">Archivos</TableHead>
              <TableHead className="w-[140px] text-right">Acciones</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {items.length === 0 ? (
              <TableRow>
                <TableCell colSpan={9} className="h-24 text-center text-muted-foreground">
                  No hay hitos para los filtros seleccionados.
                </TableCell>
              </TableRow>
            ) : (
              items.map((item) => (
                <TableRow key={item.id} className="text-sm">
                  <TableCell className="whitespace-nowrap">{formatBitacoraDate(item.fechaHito)}</TableCell>
                  <TableCell>
                    <div className="space-y-1">
                      <p className="font-medium text-foreground">{item.titulo}</p>
                      {item.descripcion ? <p className="line-clamp-2 max-w-3xl text-xs text-muted-foreground">{item.descripcion}</p> : null}
                    </div>
                  </TableCell>
                  <TableCell><Badge variant="outline">{labelBitacoraCategoria(item.categoria) || "-"}</Badge></TableCell>
                  <TableCell><Badge className={badgeClassForBitacoraEstado(item.estado)}>{labelBitacoraEstado(item.estado)}</Badge></TableCell>
                  <TableCell><Badge className={badgeClassForBitacoraPrioridad(item.prioridad)}>{labelBitacoraPrioridad(item.prioridad)}</Badge></TableCell>
                  <TableCell className="max-w-[150px] truncate" title={item.organismo ?? ""}>{item.organismo ?? "-"}</TableCell>
                  <TableCell className="max-w-[150px] truncate" title={item.responsable ?? ""}>{item.responsable ?? "-"}</TableCell>
                  <TableCell className="text-center">
                    <Badge variant="secondary" className="rounded-full">{item._count.archivos}</Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex justify-end gap-1">
                      <IconAction href={`/bitacora-territorial/${item.id}`} title="Ver hito">
                        <Eye className="h-4 w-4" />
                      </IconAction>
                      <IconAction href={`/bitacora-territorial/${item.id}/editar`} title="Editar hito">
                        <Pencil className="h-4 w-4" />
                      </IconAction>
                      <BitacoraDeleteDialog id={item.id} />
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </Card>
  );
}

function IconAction({ href, title, children }: { href: string; title: string; children: ReactNode }) {
  return (
    <Button asChild size="icon" variant="ghost" className="h-8 w-8" title={title} aria-label={title}>
      <Link href={href}>{children}</Link>
    </Button>
  );
}