import { Icon } from "@/components/icons";
import { LandingShell } from "@/components/landing/shell";
import type { LandingProps } from "@/components/landing/types";
import { pdfDataSchema } from "@/lib/qr/types/pdf";
import { formatBytes } from "@/lib/uploads";

export function PdfLanding({ data }: LandingProps) {
  const { fileId, filename, size, title, description } =
    pdfDataSchema.parse(data);
  const href = `/api/uploads/${fileId}`;

  return (
    <LandingShell
      title={title || filename || "PDF-Dokument"}
      subtitle={description || null}
    >
      <div className="rounded-2xl border border-slate-200 bg-surface p-5 shadow-sm">
        <div className="flex items-center gap-4">
          <span className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-red-50 text-red-600">
            <Icon name="document" className="size-6" />
          </span>
          <div className="min-w-0 flex-1">
            <p className="truncate font-medium text-slate-900">{filename}</p>
            <p className="text-sm text-slate-500">
              PDF{size > 0 ? ` · ${formatBytes(size)}` : ""}
            </p>
          </div>
        </div>

        <div className="mt-5 grid gap-2 sm:grid-cols-2">
          <a
            href={href}
            className="inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
          >
            <Icon name="document" className="size-4" />
            Dokument öffnen
          </a>
          <a
            href={`${href}?download`}
            className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-surface px-4 py-2.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
          >
            <Icon name="download" className="size-4" />
            Herunterladen
          </a>
        </div>
      </div>
    </LandingShell>
  );
}