// RUT241 eSIM Auto Provisioning — Fleet table (spec §40). "All Routers"
// plus the spec's status sub-views (Waiting for Connection / Provisioning
// / Ready / Failed) are all this same table with a pre-applied status
// filter, rather than four separate pages — matches
// admin-rut241-dashboard-page.jsx's design note.
//
// `initialFilter` (from app.jsx's onNavigate("admin-rut241-fleet", {...}))
// may carry { region, status, statusBucket, openAuditLog }. statusBucket
// is one of ONLINE/WAITING/PROVISIONING/FAULT (the dashboard's grouping)
// and is expanded client-side into the underlying provisioning_status
// values the backend actually filters on, since the API's ?status=
// param takes one exact rut241_devices.provisioning_status value, not a
// bucket.
//
// Reuses SectionLabel/EmptyNote/MiniField/ActionButton/adminInputStyle/
// adminSelectStyle from admin-assets-page.jsx, AdminShell from
// admin-shell.jsx, and RUT241_REGION_LABELS from
// admin-rut241-dashboard-page.jsx — must load after all three.

const RUT241_STATUS_BUCKET_STATES = {
  ONLINE: ["READY"],
  WAITING: ["WAITING_FOR_BOOTSTRAP", "WAITING_FOR_WAN"],
  FAULT: ["NEEDS_ATTENTION"], // exact FAILED_* states are matched with a LIKE on the server via a dedicated flag below
};

function AdminRut241FleetPage({ onNavigate, initialFilter }) {
  const [admin, setAdmin] = useState(null);
  const [status, setStatus] = useState("loading");
  const [routers, setRouters] = useState([]);
  const [error, setError] = useState("");
  const [canAdd, setCanAdd] = useState(false);
  const [canViewLogs, setCanViewLogs] = useState(false);

  const [region, setRegion] = useState((initialFilter && initialFilter.region) || "");
  const [statusFilter, setStatusFilter] = useState((initialFilter && initialFilter.status) || "");
  const [connectionMethod, setConnectionMethod] = useState("");
  const [search, setSearch] = useState("");
  const [showAuditLog, setShowAuditLog] = useState(!!(initialFilter && initialFilter.openAuditLog));

  const statusBucket = initialFilter && initialFilter.statusBucket;

  const load = () => {
    const params = new URLSearchParams();
    if (region) params.set("region", region);
    if (statusFilter) params.set("status", statusFilter);
    if (connectionMethod) params.set("connectionMethod", connectionMethod);
    if (search.trim()) params.set("search", search.trim());

    Promise.all([
      fetch("/api/admin/me", { credentials: "same-origin" }).then((r) => (r.ok ? r.json() : Promise.reject())),
      fetch("/api/admin/rut241/me", { credentials: "same-origin" }).then((r) => (r.ok ? r.json() : Promise.reject())),
      fetch(`/api/admin/rut241/routers?${params.toString()}`, { credentials: "same-origin" }).then((r) => (r.ok ? r.json() : Promise.reject())),
    ])
      .then(([me, rut241Me, list]) => {
        setAdmin(me.admin);
        setCanAdd(rut241Me.permissions.includes("add_router"));
        setCanViewLogs(rut241Me.permissions.includes("view_logs"));
        let visible = list.routers || [];
        if (statusBucket === "FAULT") {
          visible = visible.filter((r) => r.provisioning_status === "NEEDS_ATTENTION" || String(r.provisioning_status).endsWith("_FAILED") || String(r.provisioning_status).includes("FAILED"));
        } else if (statusBucket === "PROVISIONING") {
          const excluded = new Set(["READY", "WAITING_FOR_BOOTSTRAP", "WAITING_FOR_WAN", "NEEDS_ATTENTION"]);
          visible = visible.filter((r) => !excluded.has(r.provisioning_status) && !String(r.provisioning_status).includes("FAILED"));
        } else if (statusBucket && RUT241_STATUS_BUCKET_STATES[statusBucket]) {
          const allow = new Set(RUT241_STATUS_BUCKET_STATES[statusBucket]);
          visible = visible.filter((r) => allow.has(r.provisioning_status));
        }
        setRouters(visible);
        setStatus("ready");
      })
      .catch(() => onNavigate("admin-login"));
  };

  useEffect(load, [region, statusFilter, connectionMethod]); // eslint-disable-line react-hooks/exhaustive-deps

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

  return (
    <AdminShell admin={admin} page="admin-rut241-dashboard" onNavigate={onNavigate}
      subtitle="RUT241 eSIM Auto Provisioning" title="All routers."
      actions={(
        <>
          {canViewLogs && (
            <ActionButton onClick={() => setShowAuditLog(true)} testId="rut241-open-audit-log">Audit Log</ActionButton>
          )}
          {canAdd && (
            <ActionButton onClick={() => onNavigate("admin-rut241-add")} testId="rut241-fleet-add">+ Add RUT241</ActionButton>
          )}
        </>
      )}
    >
      {error && <ModalError>{error}</ModalError>}

      <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 24, alignItems: "flex-end" }}>
        <MiniField label="Region">
          <select value={region} onChange={(e) => setRegion(e.target.value)} style={adminSelectStyle}>
            <option value="">All regions</option>
            {Object.entries(RUT241_REGION_LABELS).map(([v, l]) => <option key={v} value={v}>{l}</option>)}
          </select>
        </MiniField>
        <MiniField label="Status">
          <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} style={adminSelectStyle}>
            <option value="">All statuses</option>
            <option value="READY">Ready</option>
            <option value="WAITING_FOR_BOOTSTRAP">Waiting for bootstrap</option>
            <option value="WAITING_FOR_WAN">Waiting for WAN</option>
            <option value="NEEDS_ATTENTION">Needs attention</option>
          </select>
        </MiniField>
        <MiniField label="Connection method">
          <select value={connectionMethod} onChange={(e) => setConnectionMethod(e.target.value)} style={adminSelectStyle}>
            <option value="">Any</option>
            <option value="ESIM_BOOTSTRAP">eSIM bootstrap</option>
            <option value="WAN_ETHERNET">WAN Ethernet</option>
          </select>
        </MiniField>
        <MiniField label="Search">
          <input
            value={search} onChange={(e) => setSearch(e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter") load(); }}
            placeholder="Serial, IMEI, MAC, ICCID, asset id…"
            style={{ ...adminInputStyle, minWidth: 240 }}
          />
        </MiniField>
        <ActionButton onClick={load} testId="rut241-fleet-search">Search</ActionButton>
      </div>

      <SectionLabel>{routers.length} router{routers.length === 1 ? "" : "s"}</SectionLabel>
      {routers.length === 0 ? (
        <EmptyNote>No routers match these filters.</EmptyNote>
      ) : (
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--font-body)", fontSize: 13 }}>
            <thead>
              <tr style={{ borderBottom: "1px solid rgba(0,0,0,0.15)" }}>
                <Th>Serial</Th><Th>Asset</Th><Th>Customer</Th><Th>Region</Th><Th>Status</Th><Th>Config</Th><Th>Firmware</Th><Th></Th>
              </tr>
            </thead>
            <tbody>
              {routers.map((r) => (
                <tr key={r.id} style={{ borderBottom: "1px solid rgba(0,0,0,0.08)" }}>
                  <Td>{r.serial_number}</Td>
                  <Td>{r.asset_serial || `#${r.asset_id}`}</Td>
                  <Td>{r.company_name || "—"}</Td>
                  <Td>{RUT241_REGION_LABELS[r.deployment_region] || r.deployment_region || "—"}</Td>
                  <Td><Rut241StatusPill status={r.provisioning_status} /></Td>
                  <Td>{r.configuration_profile ? `${r.configuration_profile}${r.configuration_version ? " v" + r.configuration_version : ""}` : "—"}</Td>
                  <Td>{r.firmware_version || "—"}</Td>
                  <Td>
                    <ActionButton onClick={() => onNavigate("admin-rut241-router", { routerId: r.id })} testId={`rut241-open-${r.id}`}>Open</ActionButton>
                  </Td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {showAuditLog && <Rut241AuditLogModal onClose={() => setShowAuditLog(false)} />}
    </AdminShell>
  );
}

function Rut241StatusPill({ status }) {
  let tone = "rgba(0,0,0,0.5)";
  if (status === "READY") tone = "rgba(20,140,60,0.95)";
  else if (status === "NEEDS_ATTENTION" || String(status).includes("FAILED")) tone = "rgba(190,40,40,0.95)";
  else if (String(status).startsWith("WAITING")) tone = "rgba(180,120,0,0.95)";
  return (
    <span style={{
      fontSize: 10.5, letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 600,
      color: tone, border: `1px solid ${tone}`, padding: "3px 8px", whiteSpace: "nowrap",
    }}>{String(status || "").replace(/_/g, " ")}</span>
  );
}

function Th({ children }) {
  return <th style={{ textAlign: "left", padding: "8px 10px", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(0,0,0,0.5)", fontWeight: 600 }}>{children}</th>;
}
function Td({ children }) {
  return <td style={{ padding: "10px 10px", color: "#000", verticalAlign: "top" }}>{children}</td>;
}

function Rut241AuditLogModal({ onClose }) {
  const [entries, setEntries] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/admin/rut241/audit-log", { credentials: "same-origin" })
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then((data) => { setEntries(data.entries || []); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);

  return (
    <ModalShell title="RUT241 audit log" onCancel={onClose} wide>
      {loading ? (
        <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "rgba(0,0,0,0.55)" }}>Loading…</div>
      ) : entries.length === 0 ? (
        <EmptyNote>No RUT241 activity logged yet.</EmptyNote>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 10, maxHeight: 480, overflowY: "auto" }}>
          {entries.map((e) => (
            <div key={e.id} style={{ borderBottom: "1px solid rgba(0,0,0,0.08)", paddingBottom: 10 }}>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "#000" }}>
                <strong>{e.actor_name || e.actor_type}</strong> — {e.action}
                {e.result && e.result !== "success" && (
                  <span style={{ color: "rgba(190,40,40,0.9)", marginLeft: 6, textTransform: "uppercase", fontSize: 10.5 }}>({e.result})</span>
                )}
              </div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 11, color: "rgba(0,0,0,0.45)", marginTop: 2 }}>
                {e.created_at} {e.router_id ? `· router #${e.router_id}` : ""} {e.new_value ? `· ${e.new_value}` : ""}
              </div>
            </div>
          ))}
        </div>
      )}
    </ModalShell>
  );
}

Object.assign(window, { AdminRut241FleetPage, Rut241StatusPill, Rut241AuditLogModal });