// Agency & white-label — client-facing branding + compliance/audit export.

function AgencyPage() {
  const hub = window.useClearCast();
  const data = hub.data || {};
  const wl = (data.workspace && data.workspace.whiteLabel) || { enabled: false, appName: "", accentColor: "#14b88a" };
  const auditLog = data.auditLog || [];
  const [enabled, setEnabled] = React.useState(!!wl.enabled);
  const [appName, setAppName] = React.useState(wl.appName || "");
  const [accent, setAccent] = React.useState(wl.accentColor || "#14b88a");

  const save = () => hub.actions.setWhiteLabel({ enabled, appName: appName.trim(), accentColor: accent });

  const download = (filename, obj) => {
    try {
      const blob = new Blob([JSON.stringify(obj, null, 2)], { type: "application/json" });
      const a = document.createElement("a");
      a.href = URL.createObjectURL(blob);
      a.download = filename;
      a.click();
      hub.toast("Export downloaded");
    } catch (e) { hub.toast("Export failed"); }
  };

  return (
    <div className="page agency-page">
      {/* White-label */}
      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <h3 style={{ margin: "0 0 4px", fontSize: 15 }}>White-label branding</h3>
        <div className="muted" style={{ fontSize: 12.5, marginBottom: 14 }}>Brand the client-facing review portal with your agency's name and color — clients never see "ClearCast".</div>
        <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, marginBottom: 12 }}>
          <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} style={{ accentColor: "var(--accent)" }} />
          Enable white-label on client portals
        </label>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
          <input className="input" placeholder="Your brand name" value={appName} onChange={(e) => setAppName(e.target.value)} style={{ flex: 1, minWidth: 200 }} disabled={!enabled} />
          <input type="color" value={accent} onChange={(e) => setAccent(e.target.value)} style={{ width: 40, height: 38, borderRadius: 8, border: "1px solid var(--border-2)", background: "var(--bg-2)" }} disabled={!enabled} />
          <button className="btn btn-primary" onClick={save}>Save branding</button>
        </div>
      </div>

      {/* Client management note */}
      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <h3 style={{ margin: "0 0 4px", fontSize: 15 }}>Client management</h3>
        <div className="muted" style={{ fontSize: 12.5, marginBottom: 12 }}>Each client is a separate business with isolated data, free reviewer seats, and a no-login approval link.</div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <button className="btn" onClick={() => hub.setPage("businesses")}><Icon.Users width="14" height="14" /> Manage businesses</button>
          <button className="btn" onClick={() => hub.setPage("approvals")}><Icon.Check width="14" height="14" /> Client approvals</button>
        </div>
      </div>

      {/* Compliance / audit */}
      <div className="card" style={{ padding: 20 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 10 }}>
          <div>
            <h3 style={{ margin: 0, fontSize: 15 }}>Compliance & audit log</h3>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 3 }}>Every sensitive action is recorded. Export for compliance or client reporting.</div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-sm" onClick={() => download("clearcast-audit-log.json", auditLog)}><Icon.Download width="13" height="13" /> Export audit log</button>
            <button className="btn btn-sm" onClick={() => download(`${(data.workspace?.name || "business").replace(/\s+/g, "-").toLowerCase()}-export.json`, data)}><Icon.Download width="13" height="13" /> Export all data</button>
          </div>
        </div>
        <div style={{ display: "grid", gap: 6, marginTop: 14, maxHeight: 360, overflowY: "auto" }}>
          {auditLog.map((e) => (
            <div key={e.id} style={{ display: "flex", gap: 10, fontSize: 12, padding: "8px 10px", borderRadius: 8, background: "var(--bg-2)", border: "1px solid var(--border)" }}>
              <span style={{ color: "var(--text-3)", whiteSpace: "nowrap" }}>{new Date(e.createdAt).toLocaleString()}</span>
              <b style={{ whiteSpace: "nowrap" }}>{e.actor}</b>
              <span>{e.action}{e.note ? ` — ${e.note}` : ""}</span>
            </div>
          ))}
          {!auditLog.length && <div className="muted" style={{ fontSize: 12.5 }}>No audit events recorded yet.</div>}
        </div>
      </div>
    </div>
  );
}

window.AgencyPage = AgencyPage;