// Reseller portal — Purchase Orders. A customer's own PO reference/
// document (NOT a supplier-facing PO), optionally linked to one or more
// Orders — see routes/portal-purchase-orders.ts. Strictly READ-ONLY,
// force-scoped server-side to the signed-in reseller's own company.
//
// Modeled on admin-purchase-orders-page.jsx's PORow/POEditPanel, but
// defines its own local status-label map rather than reaching for
// ORDER_STATUS_LABELS_LOCAL (that name is undefined in the admin file —
// a pre-existing bug there that is deliberately NOT copied here; this
// file uses RESELLER_ORDER_STATUS_LABELS from reseller-orders-page.jsx,
// loaded just before this file — see index.html).

const RESELLER_PO_STATUS_LABELS = { open: "Open", fulfilled: "Fulfilled", cancelled: "Cancelled" };
const RESELLER_PO_STATUS_COLORS = {
  open: "var(--pt-status-po-requested)",
  fulfilled: "var(--pt-status-accepted)",
  cancelled: "var(--pt-status-rejected)",
};

function ResellerPurchaseOrdersPage({ onNavigate }) {
  const [state, setState] = useState({ status: "loading", user: null, company: null, isSoloStaff: false });
  const [companies, setCompanies] = useState([]);
  const [pos, setPos] = useState({ status: "loading", items: [] });
  const [statusFilter, setStatusFilter] = useState("");
  const [openId, setOpenId] = useState(null);

  const loadPos = (status) => {
    setPos((p) => ({ ...p, status: "loading" }));
    const params = new URLSearchParams();
    if (status) params.set("status", status);
    fetch(`/api/portal/purchase-orders?${params.toString()}`, { credentials: "same-origin" })
      .then((r) => (r.ok ? r.json() : { purchaseOrders: [] }))
      .then((data) => setPos({ status: "ready", items: data.purchaseOrders || [] }))
      .catch(() => setPos({ status: "ready", items: [] }));
  };

  const loadMe = (onDone) => {
    fetch("/api/portal/me", { credentials: "same-origin" })
      .then(async (r) => {
        if (!r.ok) throw new Error("not signed in");
        return r.json();
      })
      .then((data) => {
        setState({ status: "ready", user: data.user, company: data.company, isSoloStaff: !!data.isSoloStaff });
        if (data.isSoloStaff) {
          fetch("/api/portal/companies", { credentials: "same-origin" })
            .then((r) => (r.ok ? r.json() : { companies: [] }))
            .then((d) => setCompanies(d.companies || []))
            .catch(() => setCompanies([]));
        }
        if (onDone) onDone();
      })
      .catch(() => onNavigate("reseller-login"));
  };

  const handleSwitchCompany = (companyId) => {
    fetch("/api/portal/switch-company", {
      method: "POST", credentials: "same-origin",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ companyId }),
    })
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then(() => loadMe(() => loadPos(statusFilter)))
      .catch(() => { /* switch failed silently */ });
  };

  useEffect(() => { loadMe(); }, []); // eslint-disable-line react-hooks/exhaustive-deps -- mount-only
  useEffect(() => { loadPos(statusFilter); }, [statusFilter]); // eslint-disable-line react-hooks/exhaustive-deps

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

  const { user, company, isSoloStaff } = state;

  return (
    <ResellerShell
      page="portal-purchase-orders" onNavigate={onNavigate}
      userName={user.name} companyName={company.name}
      isSoloStaff={isSoloStaff} companies={companies}
      currentCompanyId={company.id} onSwitchCompany={handleSwitchCompany}
      subtitle="Reseller portal"
      title="Purchase orders."
    >
      <p style={{
        fontFamily: "var(--font-body)", fontSize: 14,
        color: "var(--pt-fg-dim)", margin: "-16px 0 28px",
      }}>
        Your own PO references logged against Solo orders — attach or update these from the Quotes page.
      </p>

      <div style={{ marginBottom: 24, maxWidth: 220 }}>
        <FieldBlock label="Status">
          <select
            value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}
            data-testid="portal-pos-status-filter"
            style={{
              width: "100%", boxSizing: "border-box", background: "var(--pt-surface-2)",
              border: "1px solid var(--pt-border-strong)", color: "var(--pt-fg)",
              fontFamily: "var(--font-body)", fontSize: 14, padding: "12px 14px", outline: "none",
            }}
          >
            <option value="">All statuses</option>
            {Object.keys(RESELLER_PO_STATUS_LABELS).map((s) => (
              <option key={s} value={s}>{RESELLER_PO_STATUS_LABELS[s]}</option>
            ))}
          </select>
        </FieldBlock>
      </div>

      <div style={{
        fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.28em",
        textTransform: "uppercase", color: "var(--pt-fg-dimmer)", fontWeight: 500,
        marginBottom: 16,
      }}>
        Purchase orders {pos.status === "ready" && `(${pos.items.length})`}
      </div>

      {pos.status === "loading" ? (
        <div style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--pt-fg-faint2)" }}>Loading\u2026</div>
      ) : pos.items.length === 0 ? (
        <div style={{
          background: "var(--pt-surface)", border: "1px solid var(--pt-border)",
          padding: "22px 24px", fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--pt-fg-dimmer)",
        }}>
          No purchase orders logged yet.
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {pos.items.map((po) => (
            <ResellerPORow
              key={po.id} po={po}
              open={openId === po.id}
              onToggle={() => setOpenId(openId === po.id ? null : po.id)}
            />
          ))}
        </div>
      )}
    </ResellerShell>
  );
}

function ResellerPORow({ po, open, onToggle }) {
  return (
    <div data-testid={`portal-po-row-${po.id}`} style={{
      background: "var(--pt-surface)", border: "1px solid var(--pt-border-2)",
    }}>
      <button
        type="button" onClick={onToggle} data-testid={`portal-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: "var(--pt-fg)" }}>
            {po.po_number}
          </div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--pt-fg-dim)", marginTop: 4 }}>
            <span style={{ color: RESELLER_PO_STATUS_COLORS[po.status] || "var(--pt-fg-dim)", textTransform: "uppercase", letterSpacing: "0.08em", fontSize: 11 }}>
              {RESELLER_PO_STATUS_LABELS[po.status] || po.status}
            </span>
            {" \u00b7 "}{po.currency} \u00b7 {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: "var(--pt-fg-dimmer)" }}>
          {open ? "Close \u2191" : "View \u2192"}
        </span>
      </button>
      {open && (
        <div style={{ borderTop: "1px solid var(--pt-border-2)", padding: "20px" }}>
          <ResellerPODetail po={po} />
        </div>
      )}
    </div>
  );
}

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

  useEffect(() => {
    fetch(`/api/portal/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 }}>
        {po.received_at && <MiniDetail label="Received date" value={String(po.received_at).slice(0, 10)} />}
        <div>
          <div style={{ fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--pt-fg-faint)", marginBottom: 4 }}>Status</div>
          <span style={{ color: RESELLER_PO_STATUS_COLORS[po.status] || "var(--pt-fg-dim)", textTransform: "uppercase", letterSpacing: "0.08em", fontSize: 12, fontFamily: "var(--font-body)" }}>
            {RESELLER_PO_STATUS_LABELS[po.status] || po.status}
          </span>
        </div>
        <MiniDetail label="Currency" value={po.currency} />
      </div>
      {po.notes && <div style={{ marginBottom: 14 }}><MiniDetail label="Notes" value={po.notes} /></div>}

      <div style={{ height: 1, background: "var(--pt-border)", margin: "18px 0" }} />
      <div style={{ fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--pt-fg-dim)", fontWeight: 500, marginBottom: 12 }}>
        Linked orders {orders ? `(${orders.length})` : ""}
      </div>
      {orders === null && <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--pt-fg-dimmer)" }}>Loading\u2026</div>}
      {orders !== null && orders.length === 0 && (
        <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--pt-fg-dimmer)" }}>No orders reference this purchase order yet.</div>
      )}
      {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: "var(--pt-fg-3)", padding: "8px 12px", background: "var(--pt-surface-2)", border: "1px solid var(--pt-border)" }}>
              Order #{o.id} \u00b7 {RESELLER_ORDER_STATUS_LABELS[o.status] || o.status} \u00b7 {o.item_count} item{o.item_count === 1 ? "" : "s"} \u00b7 {o.currency}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ResellerPurchaseOrdersPage });