import { useState } from "react";
import { createFileRoute, Link } from "@tanstack/react-router";
import { CheckCircle2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PageHeader, SectionCard } from "@/components/ledger/Primitives";
import { StatusBadge } from "@/components/ledger/StatusBadge";
import { UploadDropzone } from "@/components/ledger/UploadDropzone";
import { CLIENT_PORTAL_CLIENT_ID, useLedger } from "@/lib/ledger-store";

export const Route = createFileRoute("/client/upload")({
  head: () => ({
    meta: [
      { title: "Upload a document — Abdelouhab client portal" },
      { name: "description", content: "Send an invoice or scanned document to your accountant." },
      { property: "og:title", content: "Upload a document — Abdelouhab" },
      { property: "og:description", content: "Drop an invoice and watch it get processed automatically." },
    ],
  }),
  component: ClientUpload,
});

function ClientUpload() {
  const { uploadDocument, getInvoice } = useLedger();
  const [uploadedId, setUploadedId] = useState<string | null>(null);
  const uploaded = uploadedId ? getInvoice(uploadedId) : undefined;

  return (
    <div className="mx-auto max-w-2xl space-y-6">
      <PageHeader eyebrow="Client portal" title="Upload a document" />

      <SectionCard bodyClassName="p-5">
        <UploadDropzone
          size="large"
          multiple={false}
          heading="Upload a document"
          description="Drop an invoice or scanned document here, or choose a file from your computer. Supported: PDF, JPG, PNG"
          buttonLabel="Choose file"
          onFiles={(names) => {
            const id = uploadDocument(CLIENT_PORTAL_CLIENT_ID, names[0] ?? "document.pdf", "Bakkerij De Mol");
            setUploadedId(id);
          }}
        />

        {uploaded ? (
          <div className="mt-5 rounded-lg border border-border bg-muted/50 p-4">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div>
                <p className="text-[14px] font-medium">{uploaded.file}</p>
                <p className="mt-0.5 text-[12.5px] text-muted-foreground">
                  {uploaded.status === "New" || uploaded.status === "AI processed"
                    ? "Abdelouhab is reading your document…"
                    : "Your accountant has received this document."}
                </p>
              </div>
              <StatusBadge status={uploaded.status} />
            </div>
            {uploaded.status !== "New" && uploaded.status !== "AI processed" ? (
              <p className="mt-3 flex items-center gap-2 text-[13px] text-success">
                <CheckCircle2 size={16} aria-hidden="true" /> Upload complete and processed.
              </p>
            ) : null}
            <div className="mt-4">
              <Button variant="outline" asChild>
                <Link to="/client">Back to my documents</Link>
              </Button>
            </div>
          </div>
        ) : null}
      </SectionCard>
    </div>
  );
}