import { useMemo, useState } from "react";
import { createFileRoute, Link } from "@tanstack/react-router";
import { ChevronRight, FileStack, Search, Upload } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { EmptyState, PageHeader, SectionCard } from "@/components/ledger/Primitives";
import { ClientStatusBadge, toClientStatus, type ClientFacingStatus } from "@app/components/ClientStatusBadge";
import { useClientId } from "@/hooks/useClientId";
import { eur, useLedger } from "@/lib/ledger-store";
import { cn } from "@/lib/utils";

export const Route = createFileRoute("/documents")({
  head: () => ({
    meta: [
      { title: "Documents — Amanah Client" },
      { name: "description", content: "Browse and track documents you've sent to your accountant." },
      { property: "og:title", content: "Documents — Amanah Client" },
    ],
  }),
  component: ClientDocumentsPage,
});

type FilterKey = "all" | ClientFacingStatus;

const FILTERS: { key: FilterKey; label: string }[] = [
  { key: "all", label: "All" },
  { key: "processing", label: "Processing" },
  { key: "review", label: "Under review" },
  { key: "complete", label: "Complete" },
  { key: "action", label: "Action needed" },
];

function ClientDocumentsPage() {
  const { invoices } = useLedger();
  const clientId = useClientId();
  const [query, setQuery] = useState("");
  const [filter, setFilter] = useState<FilterKey>("all");

  const rows = useMemo(() => {
    const base = clientId
      ? invoices
          .filter((i) => i.clientId === clientId)
          .slice()
          .sort((a, b) => b.uploadedAt.localeCompare(a.uploadedAt))
      : [];

    return base.filter((doc) => {
      const facing = toClientStatus(doc.status);
      if (filter !== "all" && facing !== filter) return false;
      if (!query.trim()) return true;
      const q = query.trim().toLowerCase();
      return (
        doc.supplier.toLowerCase().includes(q) ||
        doc.file.toLowerCase().includes(q) ||
        doc.number.toLowerCase().includes(q)
      );
    });
  }, [invoices, clientId, query, filter]);

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Workspace"
        title="Documents"
        subtitle="Everything you’ve sent to your accountant, with a clear status for each one."
        actions={
          <Button variant="brand" asChild>
            <Link to="/upload">
              <Upload size={16} /> Send document
            </Link>
          </Button>
        }
      />

      <SectionCard bodyClassName="p-0">
        <div className="flex flex-col gap-3 border-b border-border px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="relative w-full sm:max-w-xs">
            <Search
              size={15}
              className="pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-muted-foreground"
              aria-hidden="true"
            />
            <Input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Search documents"
              aria-label="Search documents"
              className="h-9 bg-surface pl-8 text-[13px]"
            />
          </div>
          <div className="flex flex-wrap gap-1.5">
            {FILTERS.map((f) => (
              <button
                key={f.key}
                type="button"
                onClick={() => setFilter(f.key)}
                className={cn(
                  "rounded-full px-3 py-1.5 text-[12px] font-medium transition-colors",
                  filter === f.key
                    ? "bg-primary text-primary-foreground"
                    : "bg-muted text-muted-foreground hover:text-foreground",
                )}
              >
                {f.label}
              </button>
            ))}
          </div>
        </div>

        {rows.length === 0 ? (
          <EmptyState
            icon={FileStack}
            title={query || filter !== "all" ? "No documents found" : "No documents yet"}
            description={
              query || filter !== "all"
                ? "Try a different search or filter."
                : "Send your first invoice or receipt to your accountant."
            }
            action={
              !query && filter === "all" ? (
                <Button variant="brand" asChild>
                  <Link to="/upload">
                    <Upload size={16} /> Send document
                  </Link>
                </Button>
              ) : undefined
            }
          />
        ) : (
          <>
            {/* Desktop / tablet table-style rows */}
            <div className="hidden md:block">
              <div className="grid grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)_100px_140px_24px] gap-3 border-b border-border bg-muted/40 px-5 py-2.5 text-[11.5px] font-semibold tracking-wide text-muted-foreground uppercase">
                <span>Document</span>
                <span>Supplier</span>
                <span className="text-right">Amount</span>
                <span>Status</span>
                <span />
              </div>
              <ul className="divide-y divide-border">
                {rows.map((doc) => (
                  <li key={doc.id}>
                    <Link
                      to="/documents/$id"
                      params={{ id: doc.id }}
                      className="grid grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)_100px_140px_24px] items-center gap-3 px-5 py-3.5 transition-colors hover:bg-brand-soft/40"
                    >
                      <div className="min-w-0">
                        <p className="truncate text-[13.5px] font-medium">{doc.file}</p>
                        <p className="truncate text-[12px] text-muted-foreground">
                          {doc.number} · {doc.uploadedAt}
                        </p>
                      </div>
                      <p className="truncate text-[13.5px]">{doc.supplier}</p>
                      <p className="num text-right text-[13.5px] font-semibold">{eur(doc.total)}</p>
                      <ClientStatusBadge status={doc.status} duplicateStatus={doc.duplicateStatus} />
                      <ChevronRight size={16} className="text-muted-foreground" aria-hidden="true" />
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* Mobile stacked cards */}
            <ul className="divide-y divide-border md:hidden">
              {rows.map((doc) => (
                <li key={doc.id}>
                  <Link
                    to="/documents/$id"
                    params={{ id: doc.id }}
                    className="flex items-start gap-3 px-5 py-4 transition-colors hover:bg-brand-soft/40"
                  >
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-[13.5px] font-medium">{doc.supplier}</p>
                      <p className="truncate text-[12px] text-muted-foreground">{doc.file}</p>
                      <div className="mt-2 flex flex-wrap items-center gap-2">
                        <span className="num text-[13.5px] font-semibold">{eur(doc.total)}</span>
                        <ClientStatusBadge status={doc.status} duplicateStatus={doc.duplicateStatus} />
                      </div>
                    </div>
                    <ChevronRight size={16} className="mt-1 text-muted-foreground" aria-hidden="true" />
                  </Link>
                </li>
              ))}
            </ul>
          </>
        )}
      </SectionCard>
    </div>
  );
}