/* Admin: Permissions matrix + Settings (option lists) + Users. */

function AdminScreen({ state, go }) {
  const [tab, setTab] = useState("permissions");
  const [perms, setPerms] = useState(() => JSON.parse(JSON.stringify(VCP.permDefaults)));
  const [activeList, setActiveList] = useState("Funds");

  const toggle = (feature, role) => setPerms(p => ({ ...p, [feature]: { ...p[feature], [role]: !p[feature][role] } }));
  const reset = () => { setPerms(JSON.parse(JSON.stringify(VCP.permDefaults))); window.vcpToast?.("Permissions reset to defaults"); };

  return <div className="route-fade" style={{ padding: "22px 28px 60px", maxWidth: 1100, margin: "0 auto" }}>
    <SectionHeader eyebrow="Firm settings" title="Admin"
      sub="Permissions, the option lists the rest of the platform reads, and user-to-contact links." />
    <Tabs tabs={[{ key: "permissions", label: "Permissions", icon: "shield" }, { key: "settings", label: "Settings", icon: "sliders" }, { key: "users", label: "Users", icon: "users" }]} active={tab} onChange={setTab} />

    {tab === "permissions" && <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <p style={{ margin: 0, fontSize: 12.5, color: "var(--ink-soft)", maxWidth: 560 }}>Feature flags by role. Disabling a feature only hides the UI: the API stays permission-protected on the server.</p>
        <div style={{ display: "flex", gap: 8 }}><Btn variant="ghost" size="sm" icon="refresh" onClick={() => window.vcpToast?.("Refreshed")}>Refresh</Btn><Btn variant="ghost" size="sm" onClick={reset}>Reset to defaults</Btn></div>
      </div>
      <div style={{ background: "var(--surface-card)", border: "1px solid var(--line)", borderRadius: "var(--radius)", overflow: "hidden", boxShadow: "var(--shadow-card)" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
          <thead><tr style={{ background: "var(--surface-deep)" }}>
            <th style={{ textAlign: "left", padding: "10px 16px", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--ink-soft)", fontWeight: 600 }}>Feature</th>
            {VCP.permRoles.map(r => <th key={r} style={{ padding: "10px 16px", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--ink-soft)", fontWeight: 600, width: 140, textAlign: "center" }}>{r}</th>)}
          </tr></thead>
          <tbody>
            {Object.entries(VCP.permFeatures).map(([group, feats]) => <React.Fragment key={group}>
              <tr><td colSpan={3} style={{ padding: "8px 16px", background: "var(--surface)", borderBottom: "1px solid var(--line-soft)" }}><span className="micro">{group}</span></td></tr>
              {feats.map(f => <tr key={f}>
                <td style={{ padding: "10px 16px", borderBottom: "1px solid var(--line-soft)", fontWeight: 500 }}>{f}</td>
                {VCP.permRoles.map(r => <td key={r} style={{ textAlign: "center", borderBottom: "1px solid var(--line-soft)" }}><Toggle on={perms[f][r]} onClick={() => toggle(f, r)} /></td>)}
              </tr>)}
            </React.Fragment>)}
          </tbody>
        </table>
      </div>
    </div>}

    {tab === "settings" && <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 18 }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        {Object.keys(VCP.optionLists).map(k => <button key={k} onClick={() => setActiveList(k)} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "9px 12px", borderRadius: 8, border: "none", background: activeList === k ? "var(--accent-soft)" : "transparent", color: activeList === k ? "var(--accent)" : "var(--ink-muted)", fontWeight: activeList === k ? 600 : 500, fontSize: 13, textAlign: "left", cursor: "pointer" }}>{k}<span style={{ fontSize: 11, color: "var(--ink-faint)" }} className="tabular">{VCP.optionLists[k].length}</span></button>)}
      </div>
      <Card>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
          <div><div style={{ fontWeight: 700, fontSize: 15 }}>{activeList}</div><div style={{ fontSize: 12, color: "var(--ink-soft)" }}>Option list read across the platform</div></div>
          <Btn size="sm" icon="plus" onClick={() => window.vcpToast?.("Add option (demo)")}>Add</Btn>
        </div>
        <div style={{ border: "1px solid var(--line)", borderRadius: 9, overflow: "hidden" }}>
          {VCP.optionLists[activeList].map((opt, i) => <div key={opt} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", borderBottom: i < VCP.optionLists[activeList].length - 1 ? "1px solid var(--line-soft)" : "none" }}>
            <Icon name="grip" size={14} color="var(--ink-faint)" /><span style={{ flex: 1, fontSize: 13 }}>{opt}</span>
            <IconBtn name="pencil" size={14} onClick={() => window.vcpToast?.("Edit (demo)")} /><IconBtn name="trash" size={14} onClick={() => window.vcpToast?.("Remove (demo)")} />
          </div>)}
        </div>
      </Card>
    </div>}

    {tab === "users" && <div>
      <p style={{ fontSize: 12.5, color: "var(--ink-soft)", marginTop: 0, marginBottom: 12 }}>Link each platform user to a contact so personal views (My Tasks) resolve.</p>
      <div style={{ background: "var(--surface-card)", border: "1px solid var(--line)", borderRadius: "var(--radius)", overflow: "hidden", boxShadow: "var(--shadow-card)" }}>
        {VCP.contacts.lexar.map((u, i) => <div key={u.email} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 16px", borderBottom: i < VCP.contacts.lexar.length - 1 ? "1px solid var(--line-soft)" : "none" }}>
          <Avatar name={u.fullName} size={32} color="var(--accent)" />
          <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 13 }}>{u.fullName}</div><div style={{ fontSize: 11.5, color: "var(--ink-soft)" }}>{u.email}</div></div>
          <Badge variant="positive"><Icon name="check" size={11} /> Linked to contact</Badge>
        </div>)}
        <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 16px" }}>
          <span style={{ width: 32, height: 32, borderRadius: "50%", border: "1px dashed var(--line)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Icon name="plus" size={15} color="var(--ink-faint)" /></span>
          <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 13, color: "var(--ink-muted)" }}>tomas.reinder@northbridge.capital</div><div style={{ fontSize: 11.5, color: "var(--warn)" }}>Not linked — My Tasks will be empty</div></div>
          <Btn variant="ghost" size="sm" icon="link" onClick={() => window.vcpToast?.("Link to contact (demo)")}>Link</Btn>
        </div>
      </div>
    </div>}
  </div>;
}

Object.assign(window, { AdminScreen });