// Solo staff admin area — Customer Purchase Orders: a customer's own PO
// reference/document (NOT a supplier-facing PO — see
// migrations/0004_crm.sql rule #1), optionally linked to one or more
// Orders. Reached via the sidebar nav in AdminShell (see
// admin-shell.jsx). Reuses ModalError/SectionLabel/EmptyNote/MiniField/
// adminSelectStyle from admin-assets-page.jsx (loaded earlier — see
// index.html).
//
// READ-ONLY ON PURPOSE: purchase order records will be pulled from Xero/
// QuickBooks rather than logged in Solo Secure directly, so create/edit/
// status-change controls have been removed from this page (and the
// backing endpoints in routes/admin-purchase-orders.ts). Staff can only
// VIEW purchase order records — and their linked Orders — here.

const PO_STATUS_LABELS = { open: "Open", fulfilled: "Fulfilled", cancelled: "Cancelled" };
const PO_STATUS_COLORS = {
  open: "rgba(180,110,0,0.95)",
  fulfilled: "rgba(20,140,60,0.95)",
  cancelled: "rgba(190,40,40,0.9)",
};

function AdminPurchaseOrdersPage({ onNavigate, initialPoId }) {
  const [state, setState] = useState({ status: "loading", admin: null, purchaseOrders: [], companies: [] });
  const [companyFilter, setCompanyFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [openId, setOpenId] = useState(initialPoId != null ? initialPoId : null);
  const [error, setError] = useState("");

  const load = () => {
    const params = new URLSearchParams();
    if (companyFilter) params.set("companyId", companyFilter);
    if (statusFilter) params.set("status", statusFilter);
    Promise.all([
      fetch("/api/admin/me", { credentials: "same-origin" }).then((r) => (r.ok ? r.json() : Promise.reject())),
      fetch(`/api/admin/purchase-orders?${params.toString()}`, { credentials: "same-origin" }).then((r) => (r.ok ? r.json() : Promise.reject())),
      fetch("/api/admin/companies", { credentials: "same-origin" }).then((r) => (r.ok ? r.json() : Promise.reject())),
    ])
      .then(([me, pos, companies]) => {
        setState({
          status: "ready", admin: me.admin,
          purchaseOrders: pos.purchaseOrders || [], companies: companies.companies || [],
        });
      })
      .catch(() => onNavigate("admin-login"));
  };

  useEffect(load, [companyFilter, statusFilter]); // eslint-disable-line react-hooks/exhaustive-deps
  // Re-apply a deep-linked PO id if it changes while already on this page
  // (e.g. clicking another unit's "PO ..." link from a second browser tab
  // isn't possible, but this keeps behaviour correct if onNavigate is ever
  // called again without a full remount).
  useEffect(() => { if (initialPoId != null) setOpenId(initialPoId); }, [initialPoId]);

  if (state.status === "loading") {
    return <section style={{ background: "#fff", minHeight: "calc(100vh - 88px)" }} />;
  }

  return (
    <AdminShell admin={state.admin} page="admin-purchase-orders" onNavigate={onNavigate}
      subtitle="Staff only — read-only, pulled from Xero/QuickBooks" title="Purchase orders.">
      {error && <ModalError>{error}</ModalError>}
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 24 }}>
        <MiniField label="Customer">
          <select value={companyFilter} onChange={(e) => setCompanyFilter(e.target.value)} style={adminSelectStyle}>
            <option value="">All customers</option>
            {state.companies.map((co) => <option key={co.id} value={co.id}>{co.name}</option>)}
          </select>
        </MiniField>
        <MiniField label="Status">
          <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} style={adminSelectStyle}>
            <option value="">All statuses</option>
            <option value="open">Open</option>
            <option value="fulfilled">Fulfilled</option>
            <option value="cancelled">Cancelled</option>
          </select>
        </MiniField>
      </div>

      <SectionLabel>Purchase orders ({state.purchaseOrders.length})</SectionLabel>
      {state.purchaseOrders.length === 0 ? (
        <EmptyNote>No customer purchase orders logged yet.</EmptyNote>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {state.purchaseOrders.map((po) => (
            <PORow
              key={po.id} po={po}
              open={openId === po.id}
              onToggle={() => setOpenId(openId === po.id ? null : po.id)}
            />
          ))}
        </div>
      )}
    </AdminShell>
  );
}

function PORow({ po, open, onToggle }) {
  return (
    <div data-testid={`po-row-${po.id}`} style={{
      background: "rgba(0,0,0,0.02)", border: "1px solid rgba(0,0,0,0.14)",
    }}>
      <button
        type="button" onClick={onToggle} data-testid={`po-toggle-${po.id}`}
        style={{
          width: "100%", background: "none", border: "none", cursor: "pointer",
          padding: "16px 20px", display: "flex", justifyContent: "space-between",
          alignItems: "center", flexWrap: "wrap", gap: 12, textAlign: "left",
        }}>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, textTransform: "uppercase", color: "#000" }}>
            {po.po_number} <span style={{ color: "rgba(0,0,0,0.55)", fontSize: 12, fontWeight: 400 }}>· {po.company_name}</span>
          </div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "rgba(0,0,0,0.55)", marginTop: 4 }}>
            <span style={{ color: PO_STATUS_COLORS[po.status] || "rgba(0,0,0,0.55)", textTransform: "uppercase", letterSpacing: "0.08em", fontSize: 11 }}>
              {PO_STATUS_LABELS[po.status] || po.status}
            </span>
            {" · "}{po.currency} · {po.order_count} order{po.order_count === 1 ? "" : "s"} linked
          </div>
        </div>
        <span style={{ fontFamily: "var(--font-body)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(0,0,0,0.55)" }}>
          {open ? "Close ↑" : "Amend →"}
        </span>
      </button>
      {open && (
        <div style={{ borderTop: "1px solid rgba(0,0,0,0.14)", padding: "20px" }}>
          <POEditPanel po={po} />
        </div>
      )}
    </div>
  );
}

function POEditPanel({ po }) {
  const [orders, setOrders] = useState(null);

  useEffect(() => {
    fetch(`/api/admin/purchase-orders/${po.id}`, { credentials: "same-origin" })
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then((data) => setOrders(data.orders || []))
      .catch(() => setOrders([]));
  }, [po.id]);

  return (
    <div>
      <div style={{ display: "grid", gap: 14, gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", marginBottom: 14 }}>
        <div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(0,0,0,0.45)", marginBottom: 4 }}>PO number</div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "rgba(0,0,0,0.8)" }}>{po.po_number}</div>
        </div>
        {po.received_at ? (
          <div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(0,0,0,0.45)", marginBottom: 4 }}>Received date</div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "rgba(0,0,0,0.8)" }}>{String(po.received_at).slice(0, 10)}</div>
          </div>
        ) : null}
        <div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(0,0,0,0.45)", marginBottom: 4 }}>Status</div>
          <span style={{ color: PO_STATUS_COLORS[po.status] || "rgba(0,0,0,0.55)", textTransform: "uppercase", letterSpacing: "0.08em", fontSize: 12, fontFamily: "var(--font-body)" }}>
            {PO_STATUS_LABELS[po.status] || po.status}
          </span>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(0,0,0,0.45)", marginBottom: 4 }}>Currency</div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "rgba(0,0,0,0.8)" }}>{po.currency}</div>
        </div>
      </div>
      {po.notes ? (
        <div style={{ marginBottom: 14 }}>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(0,0,0,0.45)", marginBottom: 4 }}>Notes</div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "rgba(0,0,0,0.8)", whiteSpace: "pre-wrap" }}>{po.notes}</div>
        </div>
      ) : null}

      <div style={{ height: 1, background: "rgba(0,0,0,0.1)", margin: "18px 0" }} />
      <div style={{ fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "rgba(180,110,0,0.95)", fontWeight: 500, marginBottom: 12 }}>
        Linked orders {orders ? `(${orders.length})` : ""}
      </div>
      {orders === null && <EmptyNote>Loading…</EmptyNote>}
      {orders !== null && orders.length === 0 && <EmptyNote>No orders reference this purchase order yet.</EmptyNote>}
      {orders !== null && orders.length > 0 && (
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {orders.map((o) => (
            <div key={o.id} style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "rgba(0,0,0,0.75)", padding: "8px 12px", background: "rgba(0,0,0,0.02)", border: "1px solid rgba(0,0,0,0.1)" }}>
              Order #{o.id} · {ORDER_STATUS_LABELS_LOCAL[o.status] || o.status} · {o.item_count} item{o.item_count === 1 ? "" : "s"} · {o.currency}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { AdminPurchaseOrdersPage });