// Reseller portal — Assets. Promoted out of reseller-portal-dashboard.jsx
// into its own dedicated nav page (see reseller-shell.jsx's
// RESELLER_NAV_ITEMS) — same "My assets" table/search/device-linking
// behaviour as the dashboard used to own inline, GET /api/portal/assets
// force-scoped server-side to the signed-in reseller's own company.
// Reuses ResellerDeviceLinkingModal from reseller-device-linking.jsx
// (already loaded — see index.html) and the AssetTh/AssetTd table
// helpers, re-declared locally here rather than importing them from
// reseller-portal-dashboard.jsx (no module system in this Babel-in-
// browser setup — every file's top-level declarations share one global
// scope, but keeping each page's own small helpers colocated with it
// is clearer than reaching across files for two tiny functions).

function ResellerAssetsPage({ onNavigate }) {
  const [state, setState] = useState({ status: "loading", user: null, company: null, isSoloStaff: false });
  const [companies, setCompanies] = useState([]);
  const [assets, setAssets] = useState({ status: "loading", items: [] });
  const [assetSearch, setAssetSearch] = useState("");
  const [linkingUnit, setLinkingUnit] = useState(null);
  const [canManageDevices, setCanManageDevices] = useState(false);

  const loadAssets = (search) => {
    const params = new URLSearchParams();
    if (search) params.set("search", search);
    fetch(`/api/portal/assets?${params.toString()}`, { credentials: "same-origin" })
      .then((r) => (r.ok ? r.json() : { assets: [] }))
      .then((data) => setAssets({ status: "ready", items: data.assets || [] }))
      .catch(() => setAssets({ 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(() => loadAssets(assetSearch)))
      .catch(() => { /* switch failed silently */ });
  };

  useEffect(() => {
    loadMe();
    loadAssets("");
    fetch("/api/portal/device-connections", { credentials: "same-origin" })
      .then((r) => (r.ok ? r.json() : { canManage: false }))
      .then((data) => setCanManageDevices(!!data.canManage))
      .catch(() => setCanManageDevices(false));
  }, []); // eslint-disable-line react-hooks/exhaustive-deps -- mount-only

  useEffect(() => {
    if (state.status !== "ready") return;
    const t = setTimeout(() => loadAssets(assetSearch), 250);
    return () => clearTimeout(t);
  }, [assetSearch]); // 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-assets" onNavigate={onNavigate}
      userName={user.name} companyName={company.name}
      isSoloStaff={isSoloStaff} companies={companies}
      currentCompanyId={company.id} onSwitchCompany={handleSwitchCompany}
      subtitle="Reseller portal"
      title="Assets."
    >
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        flexWrap: "wrap", gap: 14, marginBottom: 20,
      }}>
        <p style={{
          fontFamily: "var(--font-body)", fontSize: 14,
          color: "var(--pt-fg-dim)", margin: 0,
        }}>
          Every serialized unit currently assigned to your company{assets.status === "ready" && ` (${assets.items.length})`}.
        </p>
        <input
          value={assetSearch}
          onChange={(e) => setAssetSearch(e.target.value)}
          placeholder="Search by serial number or product\u2026"
          data-testid="portal-assets-search-input"
          style={{
            width: 280, boxSizing: "border-box",
            background: "var(--pt-surface-2)", border: "1px solid var(--pt-border-strong)",
            color: "var(--pt-fg)", fontFamily: "var(--font-body)",
            fontSize: 13.5, padding: "9px 12px", outline: "none",
          }}
        />
      </div>

      <div style={{
        background: "var(--pt-surface)",
        border: "1px solid var(--pt-border)",
      }}>
        {assets.status === "loading" ? (
          <div style={{ padding: "22px 24px", fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--pt-fg-faint2)" }}>
            Loading\u2026
          </div>
        ) : assets.items.length === 0 ? (
          <div style={{ padding: "22px 24px", fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--pt-fg-dimmer)" }}>
            {assetSearch
              ? "No assets match that search."
              : "No hardware has been assigned to your account yet. Your account manager will be in touch once units are allocated."}
          </div>
        ) : (
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--font-body)" }}>
              <thead>
                <tr style={{ borderBottom: "1px solid var(--pt-border-2)" }}>
                  <AssetTh2>Product</AssetTh2>
                  <AssetTh2>Serial number</AssetTh2>
                  <AssetTh2>Assigned to</AssetTh2>
                  <AssetTh2>Location</AssetTh2>
                  <AssetTh2>Since</AssetTh2>
                  <AssetTh2>&nbsp;</AssetTh2>
                  <AssetTh2>&nbsp;</AssetTh2>
                </tr>
              </thead>
              <tbody>
                {assets.items.map((a) => {
                  const disabled = !a.management_access_enabled;
                  return (
                    <tr
                      key={a.id} data-testid={`portal-asset-row-${a.id}`}
                      onClick={() => { if (!disabled) onNavigate("unit-management", { unitId: a.id }); }}
                      style={{
                        borderBottom: "1px solid var(--pt-surface-3)",
                        cursor: disabled ? "default" : "pointer",
                        opacity: disabled ? 0.55 : 1,
                      }}
                      onMouseEnter={(e) => { if (!disabled) e.currentTarget.style.background = "var(--pt-surface-2)"; }}
                      onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
                    >
                      <AssetTd2>{a.product_name}</AssetTd2>
                      <AssetTd2 mono>{a.serial_number}</AssetTd2>
                      <AssetTd2>{a.assigned_to_name || <span style={{ color: "var(--pt-fg-faint2)" }}>Company-wide</span>}</AssetTd2>
                      <AssetTd2>{[a.country, a.region].filter(Boolean).join(", ") || <span style={{ color: "var(--pt-fg-faint2)" }}>\u2014</span>}</AssetTd2>
                      <AssetTd2>{(a.updated_at || "").slice(0, 10)}</AssetTd2>
                      <AssetTd2>
                        {disabled ? (
                          <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--pt-warn-text)" }}>Access disabled</span>
                        ) : (
                          <span style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--pt-fg-dimmer)" }}>Mission Control &rarr;</span>
                        )}
                      </AssetTd2>
                      <AssetTd2>
                        <button
                          type="button"
                          data-testid={`portal-link-devices-${a.id}`}
                          onClick={(e) => { e.stopPropagation(); setLinkingUnit(a); }}
                          style={{
                            background: "none", border: "1px solid var(--pt-border-strong)",
                            color: "var(--pt-fg-3)", cursor: "pointer", padding: "6px 12px",
                            fontFamily: "var(--font-body)", fontSize: 10.5, fontWeight: 500,
                            letterSpacing: "0.08em", textTransform: "uppercase",
                          }}
                        >Link devices</button>
                      </AssetTd2>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {linkingUnit && (
        <ResellerDeviceLinkingModal
          unit={linkingUnit}
          canManage={canManageDevices}
          onCancel={() => setLinkingUnit(null)}
          onChanged={() => loadAssets(assetSearch)}
        />
      )}
    </ResellerShell>
  );
}

function AssetTh2({ children }) {
  return (
    <th style={{
      textAlign: "left", padding: "14px 18px",
      fontFamily: "var(--font-body)", fontSize: 10.5,
      letterSpacing: "0.16em", textTransform: "uppercase",
      color: "var(--pt-fg-faint)", fontWeight: 500,
    }}>{children}</th>
  );
}

function AssetTd2({ children, mono }) {
  return (
    <td style={{
      padding: "14px 18px",
      fontFamily: mono ? "monospace" : "var(--font-body)",
      fontSize: 13.5, color: "var(--pt-fg-2)",
    }}>{children}</td>
  );
}

Object.assign(window, { ResellerAssetsPage });