"use client";

import { useState, useRef, useTransition } from "react";
import { useRouter } from "next/navigation";
import {
  Upload, FileText, ChevronDown, ChevronRight, Loader2, TriangleAlert,
  Check, ShoppingCart, X,
} from "lucide-react";
import { ZAR, ZAR2 } from "@/lib/utils";

const ACCENT = "#30638E";

export type PurchaseLineView = {
  id: string;
  line_no: number;
  material_code: string;
  cost_code: string;
  description: string;
  qty: number | null;
  rate: number | null;
  amount_excl: number;
  vat: number | null;
  total_incl: number | null;
  assetCode: string;
  assetName: string;
};

export type PurchaseView = {
  id: string;
  po_no: string;
  supplier: string;
  supplier_code: string;
  po_date: string;
  required_by: string;
  req_no: string;
  currency: string;
  subtotal: number;
  vat: number;
  total: number;
  source_file: string;
  lines: PurchaseLineView[];
};

export function PurchaseIntake({ purchases }: { purchases: PurchaseView[] }) {
  const router = useRouter();
  const inputRef = useRef<HTMLInputElement>(null);
  const [pending, startTransition] = useTransition();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [open, setOpen] = useState<string | null>(null);

  async function upload(files: FileList | null) {
    if (!files || !files.length) return;
    setBusy(true);
    setError(null);
    setNotice(null);
    try {
      for (const f of Array.from(files)) {
        const fd = new FormData();
        fd.append("file", f);
        const res = await fetch("/api/purchases/intake", { method: "POST", body: fd });
        const body = await res.json();
        if (!body.ok) {
          setError(`${f.name}: ${body.error}`);
          break;
        }
        // A line that found no machine is money that exists but is not yet on one.
        // Named, not buried — that is the whole point of reading the cost code.
        setNotice(
          body.unallocated?.length
            ? `${body.purchase.po_no}: ${body.lines} line(s) imported, but no machine matched ${body.unallocated.join(", ")} — left unallocated.`
            : `${body.purchase.po_no}: ${body.lines} line(s) imported and allocated.`,
        );
      }
      startTransition(() => router.refresh());
    } catch {
      setError("Upload failed — check your connection");
    } finally {
      setBusy(false);
      if (inputRef.current) inputRef.current.value = "";
    }
  }

  const totalSpend = purchases.reduce((s, p) => s + p.total, 0);
  const unallocatedLines = purchases.reduce(
    (s, p) => s + p.lines.filter((l) => !l.assetCode).length,
    0,
  );

  return (
    <div>
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
        <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 flex-wrap">
          <span className="px-2.5 py-1 rounded-md font-medium" style={{ background: `${ACCENT}1a`, color: ACCENT }}>
            {purchases.length} purchase order{purchases.length !== 1 && "s"}
          </span>
          <span className="px-2.5 py-1 rounded-md bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400 font-medium">
            {ZAR(totalSpend)} total
          </span>
          {unallocatedLines > 0 && (
            <span className="px-2.5 py-1 rounded-md bg-[#EDAE49]/10 text-[#EDAE49] font-medium">
              {unallocatedLines} line{unallocatedLines !== 1 && "s"} with no machine
            </span>
          )}
        </div>

        <div>
          <input
            ref={inputRef}
            type="file"
            accept="application/pdf,.pdf"
            multiple
            // The input stays sr-only and the LABEL is the 44px control. It is still
            // focusable, so `peer-focus-visible` puts the focus ring on the label —
            // otherwise a keyboard user tabs onto an invisible 1px target.
            className="sr-only peer"
            id="po-upload"
            onChange={(e) => upload(e.target.files)}
          />
          <label
            htmlFor="po-upload"
            className="min-h-[44px] px-4 rounded-lg text-xs font-medium inline-flex items-center gap-2 text-white cursor-pointer peer-focus-visible:ring-2 peer-focus-visible:ring-[#30638E] peer-focus-visible:ring-offset-2"
            style={{ background: ACCENT }}
          >
            {busy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
            {busy ? "Reading…" : "Upload purchase orders"}
          </label>
        </div>
      </div>

      {error && (
        <div className="mb-4 flex items-start gap-2 rounded-2xl border border-[#D1495B]/30 bg-[#D1495B]/[0.06] p-4">
          <TriangleAlert className="w-4 h-4 mt-0.5 shrink-0 text-[#D1495B] dark:text-[#D94F60]" />
          <div className="text-xs text-gray-600 dark:text-gray-400">
            <span className="font-semibold text-[#003D5B] dark:text-white">Could not import</span>
            <div className="mt-1">{error}</div>
          </div>
          <button onClick={() => setError(null)} aria-label="Dismiss"
            className="ml-auto min-h-[44px] min-w-[44px] grid place-items-center rounded-lg hover:bg-white dark:hover:bg-white/5">
            <X className="w-4 h-4" />
          </button>
        </div>
      )}
      {notice && (
        <div className="mb-4 flex items-start gap-2 rounded-2xl border border-[#00798C]/30 bg-[#00798C]/[0.06] p-4 text-xs text-gray-600 dark:text-gray-400">
          <Check className="w-4 h-4 mt-0.5 shrink-0 text-[#00798C]" />
          <span>{notice}</span>
        </div>
      )}

      {purchases.length === 0 ? (
        <section className="bg-white dark:bg-surface rounded-2xl border border-gray-100 dark:border-border p-12 shadow-sm text-center">
          <ShoppingCart className="w-8 h-8 mx-auto mb-3 text-gray-300" />
          <div className="text-sm text-gray-500 dark:text-gray-400">No purchase orders yet.</div>
          <div className="text-xs text-gray-400 dark:text-text-soft mt-1">
            Upload a PO PDF above. Each line is allocated to a machine by its cost code.
          </div>
        </section>
      ) : (
        <div className="space-y-2">
          {purchases.map((p) => {
            const isOpen = open === p.id;
            const unalloc = p.lines.filter((l) => !l.assetCode).length;
            return (
              <div key={p.id} className="bg-white dark:bg-surface border border-gray-100 dark:border-border rounded-xl overflow-hidden shadow-sm">
                <button
                  onClick={() => setOpen(isOpen ? null : p.id)}
                  aria-expanded={isOpen}
                  className="w-full flex items-center gap-3 sm:gap-4 p-4 text-left min-h-[44px]"
                >
                  <FileText className="w-4 h-4 shrink-0" style={{ color: ACCENT }} />
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      <span className="font-mono text-xs px-2 py-1 rounded-md bg-[#00798C]/10 text-[#00798C] font-semibold">
                        {p.po_no}
                      </span>
                      <span className="text-sm font-medium text-[#003D5B] dark:text-white truncate">{p.supplier}</span>
                      {unalloc > 0 && (
                        <TriangleAlert className="w-3.5 h-3.5 text-[#EDAE49]" aria-label="Some lines have no machine" />
                      )}
                    </div>
                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                      {p.po_date || "no date"} · {p.lines.length} line{p.lines.length !== 1 && "s"} ·{" "}
                      {p.lines.filter((l) => l.assetCode).length} allocated
                    </div>
                  </div>
                  <div className="text-right shrink-0">
                    <div className="text-[12px] text-gray-400 uppercase tracking-wider">Total</div>
                    <div className="text-sm font-semibold tabular-nums text-[#003D5B] dark:text-white">
                      {ZAR(p.total)}
                    </div>
                  </div>
                  {isOpen ? <ChevronDown className="w-4 h-4 text-gray-400 shrink-0" /> : <ChevronRight className="w-4 h-4 text-gray-400 shrink-0" />}
                </button>

                {isOpen && (
                  <div className="border-t border-gray-100 dark:border-border px-4 py-4 bg-gray-50/50 dark:bg-white/[0.04]">
                    <dl className="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-2 text-xs mb-4">
                      <Meta label="Supplier" value={p.supplier} />
                      <Meta label="Supplier code" value={p.supplier_code || "—"} />
                      <Meta label="PO date" value={p.po_date || "—"} />
                      <Meta label="Required by" value={p.required_by || "—"} />
                      <Meta label="Requisition" value={p.req_no || "—"} />
                      <Meta label="Currency" value={p.currency || "—"} />
                      <Meta label="Sub-total" value={ZAR2(p.subtotal)} />
                      <Meta label="VAT" value={ZAR2(p.vat)} />
                    </dl>

                    <div className="overflow-x-auto rounded-lg border border-gray-100 dark:border-border bg-white dark:bg-surface">
                      <table className="w-full text-xs">
                        <thead>
                          <tr className="text-gray-500 dark:text-gray-400 uppercase tracking-wider bg-gray-50 dark:bg-surface-muted">
                            <th className="text-left py-2 px-3 font-medium">#</th>
                            <th className="text-left py-2 px-3 font-medium">Description</th>
                            <th className="text-left py-2 px-3 font-medium">Cost code</th>
                            <th className="text-left py-2 px-3 font-medium">Machine</th>
                            <th className="text-right py-2 px-3 font-medium">Amount</th>
                            <th className="text-right py-2 px-3 font-medium">Incl VAT</th>
                          </tr>
                        </thead>
                        <tbody>
                          {p.lines.map((l) => (
                            <tr key={l.id} className="border-t border-gray-100 dark:border-border">
                              <td className="py-2 px-3 text-gray-400">{l.line_no}</td>
                              <td className="py-2 px-3 text-[#003D5B] dark:text-gray-300">
                                {l.description || <span className="italic text-gray-400">no description</span>}
                              </td>
                              <td className="py-2 px-3 font-mono text-gray-500 dark:text-gray-400">{l.cost_code || "—"}</td>
                              <td className="py-2 px-3">
                                {l.assetCode ? (
                                  <span className="inline-flex items-center gap-1.5 text-gray-700 dark:text-gray-300">
                                    <span className="font-mono text-[12px] px-1.5 py-0.5 rounded bg-[#00798C]/10 text-[#00798C]">
                                      {l.assetCode}
                                    </span>
                                    <span className="truncate">{l.assetName}</span>
                                  </span>
                                ) : (
                                  <span className="text-[12px] text-[#EDAE49] italic">no matching machine</span>
                                )}
                              </td>
                              <td className="py-2 px-3 text-right tabular-nums text-gray-600 dark:text-gray-400">
                                {ZAR2(l.amount_excl)}
                              </td>
                              <td className="py-2 px-3 text-right tabular-nums font-semibold text-[#003D5B] dark:text-white">
                                {l.total_incl == null ? "—" : ZAR2(l.total_incl)}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function Meta({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <dt className="text-gray-400 uppercase tracking-wider text-[12px]">{label}</dt>
      <dd className="text-gray-700 dark:text-gray-300 mt-0.5 break-words">{value}</dd>
    </div>
  );
}