import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { FichaForm } from "@/components/fichas/ficha-form";
import { DocumentosPanel } from "@/components/fichas/documentos-panel";
import { ComentariosPanel } from "@/components/fichas/comentarios-panel";
import { HistorialPanel } from "@/components/fichas/historial-panel";
import { can } from "@/lib/permissions";
import { requireUser } from "@/lib/session";
import { formatDateCL } from "@/lib/date-format";
import { getFichaAuditLogs, getFichaById } from "@/server/queries/fichas";

export const dynamic = "force-dynamic";

export default async function EditarFichaPage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ historialPage?: string }>;
}) {
  const { id } = await params;
  const { historialPage } = await searchParams;
  const user = await requireUser();
  const ficha = await getFichaById(id);
  if (!ficha) notFound();
  const historial = await getFichaAuditLogs(id, historialPage);

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <Button asChild variant="ghost" size="sm" className="mb-2 px-0">
            <Link href="/fichas">
              <ArrowLeft className="h-4 w-4" />
              Volver a fichas
            </Link>
          </Button>
          <h2 className="text-2xl font-semibold tracking-tight">Ficha {ficha.codigo}</h2>
          <p className="text-sm text-muted-foreground">
            Creada por {ficha.createdBy.name} el {formatDateCL(ficha.createdAt)}.
          </p>
        </div>
        <Button asChild variant="outline">
          <Link href={`/api/fichas/${ficha.id}/pdf`} target="_blank">
            Descargar PDF
          </Link>
        </Button>
      </div>

      <FichaForm
        ficha={ficha}
        documentosContent={
          <DocumentosPanel
            ficha={ficha}
            currentUserId={user.id}
            currentUserRole={user.role}
            canUpload={can(user.role, "documento:upload")}
            canValidate={can(user.role, "documento:validate")}
          />
        }
        observacionesContent={
          <ComentariosPanel
            ficha={ficha}
            canComment={can(user.role, "ficha:update") || can(user.role, "documento:validate")}
          />
        }
        historialContent={<HistorialPanel fichaId={ficha.id} result={historial} />}
      />
    </div>
  );
}