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

export const Route = createFileRoute("/client/")({
  head: () => ({
    meta: [
      { title: "My documents — Abdelouhab client portal" },
      { name: "description", content: "Track your invoices and documents sent to your accountant." },
      { property: "og:title", content: "My documents — Abdelouhab" },
      { property: "og:description", content: "See the processing status of every document you sent." },
    ],
  }),
  component: ClientDocuments,
});

function ClientDocuments() {
  const { invoices } = useLedger();
  const rows = invoices.filter((i) => i.clientId === CLIENT_PORTAL_CLIENT_ID);

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Client portal"
        title="My documents"
        subtitle="Track your invoices and documents sent to your accountant."
        actions={
          <Button asChild>
            <Link to="/client/upload">
              <Upload size={16} /> Upload document
            </Link>
          </Button>
        }
      />

      <SectionCard>
        {rows.length === 0 ? (
          <EmptyState
            icon={FileStack}
            title="No documents yet"
            description="Upload your first invoice and your accountant will take it from there."
            action={
              <Button asChild>
                <Link to="/client/upload">Upload document</Link>
              </Button>
            }
          />
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full min-w-[720px] text-[13.5px]">
              <thead className="border-b border-border bg-muted/50 text-[11.5px] tracking-wide text-muted-foreground uppercase">
                <tr>
                  <th className="px-5 py-3 text-left font-semibold">File</th>
                  <th className="px-3 py-3 text-left font-semibold">Uploaded</th>
                  <th className="px-3 py-3 text-left font-semibold">Supplier</th>
                  <th className="px-3 py-3 text-right font-semibold">Amount</th>
                  <th className="px-5 py-3 text-left font-semibold">Status</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {rows.map((i) => (
                  <tr key={i.id} className="transition-colors hover:bg-muted/50">
                    <td className="px-5 py-3 font-medium">{i.file}</td>
                    <td className="px-3 py-3 text-muted-foreground">{i.uploadedAt}</td>
                    <td className="px-3 py-3">{i.supplier}</td>
                    <td className="num px-3 py-3 text-right font-medium">{eur(i.total)}</td>
                    <td className="px-5 py-3">
                      <StatusBadge status={i.status} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </SectionCard>
    </div>
  );
}