// Screens: Project List, Members, API Keys, Profile, General, Cost Analytics, Files, Integrations, SSH Key

const ProjectListScreen = ({ data, setData, openModal }) => {
  const [q, setQ] = React.useState("");
  const rows = data.projects.filter(p => p.name.toLowerCase().includes(q.toLowerCase()));
  return (
    <div className="hx-screen">
      <ScreenHeader
        icon={<IconFolder size={20}/>}
        title="Project List"
        subtitle={<>View your organizations, projects, and resources. <a className="hx-link">Learn more.</a></>}
      />
      <Toolbar
        actions={<Btn kind="primary" icon={<IconPlus size={14}/>} onClick={() => window.__nav("new-project")}>Add project</Btn>}
        search={q} searchPlaceholder="Search projects" onSearchChange={setQ}
      />
      <Card padded={false}>
        <Table
          columns={[
            { key: "name", label: "Project name",
              render: (r) => (
                <span style={{ display:"inline-flex", gap:8, alignItems:"center" }}>
                  <IconFolder size={14}/>
                  <span style={{ fontWeight: 500 }}>{r.name}</span>
                  {r.default && <Pill tone="neutral">Default</Pill>}
                  {r.current && <Pill tone="accent">Current</Pill>}
                </span>
              ) },
            { key: "created", label: "Created", w: 160 },
            { key: "cost", label: <span>Cost <IconInfo size={12}/></span>, w: 110, align: "right",
              render: (r) => <span style={{ fontFamily: "var(--mono)", fontSize: 12.5 }}>${r.cost.toFixed(2)}</span> },
            { key: "collab", label: "Collaborators", w: 130, align: "right" },
            { key: "action", label: "", w: 130, align: "right",
              render: (r) => <Btn kind="secondary" size="sm" icon={<IconSettings size={13}/>} onClick={() => window.__editProject && window.__editProject(r.id)}>Manage</Btn> },
          ]}
          rows={rows}
        />
        <div className="hx-pagination">
          <span className="hx-pg-meta">Rows per page: <select defaultValue={10}><option>10</option><option>25</option><option>50</option></select></span>
          <span className="hx-pg-meta">1 – {rows.length} of {rows.length}</span>
          <button className="hx-icon-btn" aria-label="Previous"><IconChevL size={14}/></button>
          <button className="hx-icon-btn" aria-label="Next"><IconChevR size={14}/></button>
        </div>
      </Card>
      <style>{`
        .hx-toolbar { display:flex; gap: 10px; align-items: center; flex-wrap: wrap; }
        .hx-pagination { display:flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--line-2); background: var(--panel-2); font-size: 12.5px; color: var(--muted); border-radius: 0 0 var(--r-md) var(--r-md); }
        .hx-pagination select { font: inherit; padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); }
      `}</style>
    </div>
  );
};

const ROLE_LABELS = {
  superadmin: "Super Admin", consultant: "Consultant", tenant_admin: "Client Admin",
  analyst: "Analyst", viewer: "Viewer",
};
const ROLE_TONE = {
  superadmin: "accent", consultant: "accent", tenant_admin: "neutral",
  analyst: "neutral", viewer: "neutral",
};

const MembersScreen = () => {
  const [rows, setRows]       = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [q, setQ]             = React.useState("");
  const [acting, setActing]   = React.useState(null);

  const load = () => {
    setLoading(true);
    api.tcall("listMembers")
      .then(r => setRows(Array.isArray(r) ? r : (r.items ?? [])))
      .catch(() => setRows([]))
      .finally(() => setLoading(false));
  };
  React.useEffect(load, []);

  const toggle = async (user) => {
    setActing(user.id);
    try {
      await api.tcall(user.is_active ? "deactivateMember" : "reactivateMember", { userId: user.id });
      window.__toast(user.is_active ? `${user.full_name || user.email} deactivated` : `${user.full_name || user.email} reactivated`);
      load();
    } catch {
      window.__toast("Action failed", "error");
    } finally {
      setActing(null);
    }
  };

  const filtered = rows.filter(r =>
    (r.full_name || "").toLowerCase().includes(q.toLowerCase()) ||
    (r.email || "").toLowerCase().includes(q.toLowerCase())
  );

  return (
    <div className="hx-screen">
      <ScreenHeader icon={<IconUsers size={20}/>} title="Members"
        subtitle="Invite teammates and manage roles for your organization."
        right={<StatusDot tone={loading ? "neutral" : "good"}>{loading ? "Loading…" : "Live"}</StatusDot>}
      />
      <Toolbar
        actions={<Btn kind="primary" icon={<IconPlus size={14}/>} onClick={() => window.__nav("invite-member")}>Invite member</Btn>}
        search={q} searchPlaceholder="Search by name or email" onSearchChange={setQ}
      />
      <Card padded={false}>
        {loading ? (
          <div style={{ padding: "48px 20px", textAlign: "center", color: "var(--muted)", fontSize: 14 }}>Loading members…</div>
        ) : (
          <DataTable
            rows={filtered}
            keyField="id"
            defaultSort={{ key: "full_name", dir: "asc" }}
            empty={q ? "No members match your search." : "No members yet — invite someone to get started."}
            columns={[
              { key: "full_name", label: "Name",
                render: (r) => (
                  <span style={{ display:"inline-flex", gap:10, alignItems:"center" }}>
                    <Avatar name={r.full_name || r.email} size={28}/>
                    <span>
                      <div style={{ fontWeight: 500 }}>{r.full_name || r.email.split("@")[0]}</div>
                      <div style={{ color:"var(--muted)", fontSize: 12 }}>{r.email}</div>
                    </span>
                  </span>
                )},
              { key: "role", label: "Role", w: 140,
                render: (r) => <Pill tone={ROLE_TONE[r.role] || "neutral"}>{ROLE_LABELS[r.role] || r.role}</Pill> },
              { key: "created_at", label: "Joined", w: 150,
                render: (r) => r.created_at ? new Date(r.created_at).toLocaleDateString("en-IN", { day:"numeric", month:"short", year:"numeric" }) : "—" },
              { key: "is_active", label: "Status", w: 110,
                render: (r) => <Pill tone={r.is_active ? "good" : "warn"}>{r.is_active ? "Active" : "Inactive"}</Pill> },
              { key: "_actions", label: "", w: 50, align: "right", sortable: false,
                render: (r) => r.role === "superadmin" ? null : (
                  <RowMenu items={[
                    { label: r.is_active ? "Deactivate" : "Reactivate",
                      icon: r.is_active ? <IconTrash size={13}/> : <IconCheck size={13}/>,
                      danger: r.is_active,
                      disabled: acting === r.id,
                      onClick: () => toggle(r) },
                  ]}/>
                )},
            ]}
          />
        )}
      </Card>
    </div>
  );
};

const ApiKeysScreen = ({ data, setData, openModal }) => {
  const reveal = (id) => setData(d => ({ ...d, apiKeys: d.apiKeys.map(k => k.id === id ? { ...k, revealed: !k.revealed } : k) }));
  return (
    <div className="hx-screen">
      <ScreenHeader icon={<IconKey size={20}/>} title="API Keys" subtitle={`Manage credentials your applications use to call ${window.APP_CONFIG.brand.productName}.`} />
      <Banner tone="warn" icon={<IconInfo size={16}/>}>
        Keep your API keys secret. Never share them in public repositories, client-side code, or chat messages.
      </Banner>
      <Toolbar actions={<Btn kind="primary" icon={<IconPlus size={14}/>} onClick={() => window.__nav("new-api-key")}>Create new key</Btn>}/>
      <Card padded={false}>
        <Table
          columns={[
            { key: "name", label: "Name", render: (r) => <span style={{ fontWeight: 500 }}>{r.name}</span> },
            { key: "key", label: "Key",
              render: (r) => (
                <span style={{ display:"inline-flex", gap:6, alignItems:"center", fontFamily:"var(--mono)", fontSize: 12 }}>
                  {r.revealed ? r.key : `${r.key.slice(0,7)}${"•".repeat(20)}${r.key.slice(-4)}`}
                  <button className="hx-icon-btn" onClick={() => reveal(r.id)} aria-label="Toggle key">
                    {r.revealed ? <IconCheck size={13}/> : <IconCopy size={13}/>}
                  </button>
                </span>
              ) },
            { key: "created", label: "Created", w: 130 },
            { key: "lastUsed", label: "Last used", w: 140 },
            { key: "action", label: "", w: 60, align: "right",
              render: (r) => (
                <RowMenu items={[
                  { label: "View usage", icon: <IconChart size={13}/>, onClick: () => window.__nav("cost-analytics") },
                  { label: "Rotate key", icon: <IconKey size={13}/>, onClick: () => window.__rotateKey && window.__rotateKey(r.id) },
                  { divider: true },
                  { label: "Revoke key", icon: <IconTrash size={13}/>, danger: true, onClick: () => window.__revokeKey && window.__revokeKey(r.id) },
                ]}/>
              ) },
          ]}
          rows={data.apiKeys}
        />
      </Card>
    </div>
  );
};

window.ProjectListScreen = ProjectListScreen;
window.MembersScreen = MembersScreen;
window.ApiKeysScreen = ApiKeysScreen;