// 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 MembersScreen = ({ data, openModal }) => {
  const memberState = window.useApi ? useApi("listMembers", { id: data.org.id }, [data.org.id]) : { data: null, loading: false, error: null };
  const rows = Array.isArray(memberState.data?.members) ? memberState.data.members : Array.isArray(memberState.data) ? memberState.data : data.members;
  return (
    <div className="hx-screen">
      <ScreenHeader icon={<IconUsers size={20}/>} title="Members" subtitle="Invite teammates and manage roles for your organization." />
      {memberState.loading && <Banner tone="info" icon={<IconInfo size={14}/>}>Loading members from API...</Banner>}
      {memberState.error && <Banner tone="warn" icon={<IconInfo size={14}/>}>Members API unavailable. Showing local fallback data.</Banner>}
      <Toolbar
        actions={<Btn kind="primary" icon={<IconPlus size={14}/>} onClick={() => window.__nav("invite-member")}>Invite member</Btn>}
        searchPlaceholder="Search by name or email" onSearchChange={() => {}}
      />
      <Card padded={false}>
        <Table
          columns={[
          { key: "name", label: "Name",
            render: (r) => (
              <span style={{ display:"inline-flex", gap:10, alignItems:"center" }}>
                <Avatar name={r.name} size={28} />
                <span>
                  <div style={{ fontWeight: 500 }}>{r.name}</div>
                  <div style={{ color:"var(--muted)", fontSize: 12 }}>{r.email}</div>
                </span>
              </span>
            ) },
          { key: "role", label: "Role", w: 140,
            render: (r) => <Pill tone={r.role === "SuperAdmin" || r.role === "Owner" ? "accent" : "neutral"}>{r.role}</Pill> },
          { key: "lastActive", label: "Last active", w: 150, render: (r) => r.lastActive || r.lastActiveAt || r.last_seen_at || "—" },
          { key: "status", label: "Status", w: 110,
            render: (r) => <Pill tone={r.status === "Active" ? "good" : "warn"}>{r.status}</Pill> },
          { key: "action", label: "", w: 50, align: "right",
            render: (r) => r.role === "Owner" ? <span style={{color:"var(--muted-2)"}}>—</span> : (
              <RowMenu items={[
                { label: "Change role", icon: <IconSettings size={13}/>, onClick: () => window.__changeRole && window.__changeRole(r.id) },
                { label: "Resend invite", icon: <IconBell size={13}/>, onClick: () => window.__toast(`Invite resent to ${r.email}`) },
                { divider: true },
                { label: "Remove from organization", icon: <IconTrash size={13}/>, danger: true, onClick: () => window.__removeMember && window.__removeMember(r.id) },
              ]}/>
            ) },
        ]}
          rows={rows}
        />
      </Card>
    </div>
  );
};

const ApiKeysScreen = ({ data, setData, openModal }) => {
  const keyState = window.useApi ? useApi("listApiKeys", { id: data.org.id }, [data.org.id]) : { data: null, loading: false, error: null };
  const rows = Array.isArray(keyState.data?.apiKeys) ? keyState.data.apiKeys : Array.isArray(keyState.data) ? keyState.data : data.apiKeys;
  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}.`} />
      {keyState.loading && <Banner tone="info" icon={<IconInfo size={14}/>}>Loading API keys from API...</Banner>}
      {keyState.error && <Banner tone="warn" icon={<IconInfo size={14}/>}>API-key endpoint unavailable. Showing local fallback data.</Banner>}
      <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 : `${(r.keyPrefix || r.key || "cm_live").slice(0,14)}${"•".repeat(16)}`}
                  <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={rows}
        />
      </Card>
    </div>
  );
};

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