import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft, Pencil } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { BitacoraFilesPanel } from "@/components/bitacora/bitacora-files-panel";
import { BitacoraCommentsPanel } from "@/components/bitacora/bitacora-comments-panel";
import { BitacoraDeleteDialog } from "@/components/bitacora/bitacora-delete-dialog";
import { can } from "@/lib/permissions";
import { requireUser } from "@/lib/session";
import {
  formatBitacoraDate,
  formatBitacoraDateTime,
  getBitacoraHitoById,
} from "@/server/queries/bitacora";
import {
  labelBitacoraCategoria,
  labelBitacoraEstado,
  labelBitacoraPrioridad,
} from "@/lib/bitacora";
import { badgeClassForBitacoraEstado, badgeClassForBitacoraPrioridad } from "@/lib/state-variants";

export const dynamic = "force-dynamic";

export default async function BitacoraDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const user = await requireUser();
  if (!can(user.role, "bitacora:read")) notFound();

  const { id } = await params;
  const hito = await getBitacoraHitoById(id);
  if (!hito) notFound();

  const canManage = can(user.role, "bitacora:manage");

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div className="space-y-3">
          <Button asChild variant="outline" size="sm" className="w-fit">
            <Link href="/bitacora-territorial">
              <ArrowLeft className="h-4 w-4" />
              Volver
            </Link>
          </Button>
          <div className="space-y-2">
            <div className="flex flex-wrap gap-2">
              <Badge variant="outline">{labelBitacoraCategoria(hito.categoria)}</Badge>
              <Badge className={badgeClassForBitacoraEstado(hito.estado)}>{labelBitacoraEstado(hito.estado)}</Badge>
              <Badge className={badgeClassForBitacoraPrioridad(hito.prioridad)}>{labelBitacoraPrioridad(hito.prioridad)}</Badge>
            </div>
            <h2 className="text-3xl font-semibold tracking-tight text-foreground">{hito.titulo}</h2>
            <p className="max-w-4xl whitespace-pre-wrap text-sm leading-6 text-muted-foreground">{hito.descripcion ?? "Sin descripción."}</p>
          </div>
        </div>
        {canManage ? (
          <div className="flex gap-2">
            <Button asChild variant="outline">
              <Link href={`/bitacora-territorial/${hito.id}/editar`}>
                <Pencil className="h-4 w-4" />
                Editar
              </Link>
            </Button>
            <BitacoraDeleteDialog id={hito.id} />
          </div>
        ) : null}
      </div>

      <Card className="border-border shadow-sm">
        <CardContent className="grid gap-4 p-6 md:grid-cols-2 xl:grid-cols-4">
          <Meta label="Fecha del hito" value={formatBitacoraDate(hito.fechaHito)} />
          <Meta label="Organismo" value={hito.organismo} />
          <Meta label="Ubicación" value={hito.ubicacion} />
          <Meta label="Responsable" value={hito.responsable} />
          <Meta label="Creado por" value={hito.createdBy.name ?? hito.createdBy.email} />
          <Meta label="Creado el" value={formatBitacoraDateTime(hito.createdAt)} />
          <Meta label="Actualizado el" value={formatBitacoraDateTime(hito.updatedAt)} />
          <Meta label="Etiquetas" value={((hito.etiquetas as string[]) ?? []).length > 0 ? (hito.etiquetas as string[]).join(", ") : "-"} />
        </CardContent>
      </Card>

      <div className="grid gap-6 xl:grid-cols-[1.2fr_0.9fr]">
        <BitacoraFilesPanel hitoId={hito.id} archivos={hito.archivos} canManage={canManage} />
        <BitacoraCommentsPanel
          hitoId={hito.id}
          comentarios={hito.comentarios}
          canManage={canManage}
          currentUserId={user.id}
        />
      </div>
    </div>
  );
}

function Meta({ label, value }: { label: string; value: string | null | undefined }) {
  return (
    <div>
      <p className="text-xs uppercase tracking-[0.15em] text-muted-foreground">{label}</p>
      <p className="mt-1 font-medium text-foreground">{value?.trim() || "-"}</p>
    </div>
  );
}