import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowLeft, FileText, HelpCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DocumentPreview } from "@/components/ledger/DocumentPreview";
import { PageHeader, SectionCard } from "@/components/ledger/Primitives";
import {
  CLIENT_STATUS_META,
  ClientStatusBadge,
  clientFacingHint,
  toClientStatus,
} from "@app/components/ClientStatusBadge";
import { useAuthSession } from "@/hooks/useAuthSession";
import { useClientId } from "@/hooks/useClientId";
import { eur, useLedger } from "@/lib/ledger-store";
import { formatFileSize } from "@/lib/document-upload";

export const Route = createFileRoute("/documents/$id")({
  head: () => ({
    meta: [{ title: "Document — Amanah Client" }],
  }),
  component: ClientDocumentDetail,
});

function formatDate(value: string): string {
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return value;
  return d.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
}

function ClientDocumentDetail() {
  const { id } = Route.useParams();
  const session = useAuthSession("client");
  const clientId = useClientId();
  const { getInvoice, queries } = useLedger();
  const doc = getInvoice(id);
  const relatedQuestions = clientId
    ? queries.filter((q) => q.clientId === clientId && q.invoiceId === id)
    : [];
  const openQuestion = relatedQuestions.find((q) => q.status === "Delivered");

  if (!doc || !clientId || doc.clientId !== clientId) {
    return (
      <div className="space-y-4">
        <Button variant="ghost" size="sm" className="-ml-2 text-muted-foreground" asChild>
          <Link to="/documents">
            <ArrowLeft size={15} aria-hidden="true" />
            Back to documents
          </Link>
        </Button>
        <SectionCard>
          <div className="px-6 py-12 text-center">
            <h1 className="font-display text-[18px] font-semibold">Document not found</h1>
            <p className="mt-2 text-[13.5px] text-muted-foreground">
              This document isn’t available in your workspace.
            </p>
          </div>
        </SectionCard>
      </div>
    );
  }

  const facing = toClientStatus(doc.status);
  const meta = CLIENT_STATUS_META[facing];
  const statusHint = clientFacingHint(doc.status, doc.rejectionReason, doc.ocrStatus);
  const title =
    doc.supplier?.trim() && doc.supplier !== "Pending extraction" ? doc.supplier : doc.file;

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Documents"
        title={title}
        subtitle={title === doc.file ? "Uploaded document" : doc.file}
        actions={<ClientStatusBadge status={doc.status} duplicateStatus={doc.duplicateStatus} showHint />}
      />

      <div className="grid gap-4 lg:grid-cols-[1.5fr_1fr]">
        <SectionCard title="Document preview" description="Original uploaded file">
          {doc.storageKey && session?.email ? (
            <DocumentPreview
              invoiceId={doc.id}
              platform="client"
              email={session.email}
              mimeType={doc.mimeType ?? null}
              fileName={doc.file}
            />
          ) : (
            <div className="flex min-h-[200px] items-center justify-center bg-muted/30 px-6 py-10">
              <div className="w-full max-w-sm rounded-lg border border-border bg-surface p-5 shadow-sm">
                <div className="flex items-center gap-2 text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
                  <FileText size={14} aria-hidden="true" />
                  Document
                </div>
                <p className="mt-3 text-[16px] font-semibold text-foreground">{doc.file}</p>
                <p className="mt-1 text-[13px] text-muted-foreground">
                  {doc.number?.trim() ? `No. ${doc.number}` : "Not processed yet"}
                </p>
                {doc.total > 0 ? (
                  <p className="num mt-4 text-[1.35rem] font-semibold text-foreground">{eur(doc.total)}</p>
                ) : null}
              </div>
            </div>
          )}
        </SectionCard>

        <div className="space-y-4">
          <SectionCard title="Details" bodyClassName="divide-y divide-border">
            <DetailRow label="File" value={doc.file} />
            {doc.fileSize ? (
              <DetailRow label="Size" value={formatFileSize(doc.fileSize)} />
            ) : null}
            <DetailRow label="Uploaded" value={formatDate(doc.uploadedAt)} />
            <DetailRow label="Status" value={meta.label} />
          </SectionCard>

          <SectionCard title="What’s happening" bodyClassName="px-5 py-4">
            <p className="text-[13.5px] leading-6 text-muted-foreground">{statusHint}</p>
          </SectionCard>

          {doc.status === "Rejected" && doc.rejectionReason ? (
            <SectionCard title="Rejection reason" bodyClassName="px-5 py-4">
              <p className="text-[13.5px] leading-6 text-foreground">{doc.rejectionReason}</p>
            </SectionCard>
          ) : null}

          {openQuestion ? (
            <SectionCard title="Open question" bodyClassName="px-5 py-4">
              <div className="flex items-start gap-3">
                <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-attention-soft text-attention">
                  <HelpCircle size={16} aria-hidden="true" />
                </span>
                <div>
                  <p className="text-[13.5px] leading-6 text-foreground">{openQuestion.question}</p>
                  <Button variant="brand" size="sm" className="mt-3" asChild>
                    <Link to="/queries/$id" params={{ id: openQuestion.id }}>
                      Answer question
                    </Link>
                  </Button>
                </div>
              </div>
            </SectionCard>
          ) : null}
        </div>
      </div>
    </div>
  );
}

function DetailRow({
  label,
  value,
  strong = false,
}: {
  label: string;
  value: string;
  strong?: boolean;
}) {
  return (
    <div className="flex items-center justify-between gap-3 px-5 py-3">
      <span className="text-[12.5px] text-muted-foreground">{label}</span>
      <span
        className={
          strong
            ? "num text-[14px] font-semibold text-foreground"
            : "text-[13.5px] font-medium text-foreground"
        }
      >
        {value}
      </span>
    </div>
  );
}