// Settings — pulls live user profile + active sessions + vault summary
// from the backend.  No hardcoded names, emails, or addresses.
const Settings = () => {
  const [tab, setTab] = React.useState('account');
  const ctx = (window.useChData && window.useChData()) || { phase: 'loading' };
  const me = ctx && ctx.phase === 'ready' ? ctx.bundle.me : null;

  const [vault,    setVault]    = React.useState(null);
  const [sessions, setSessions] = React.useState(null);

  React.useEffect(() => {
    let dead = false;
    (async () => {
      try {
        const r = await fetch(window.CHVault.apiRoot + '/api/v1/vault/summary', { credentials: 'include', headers: { 'Accept': 'application/json' } });
        if (r.ok) { const j = await r.json(); if (!dead) setVault(j); }
      } catch {}
      try {
        const r2 = await fetch(window.CHVault.apiRoot + '/api/v1/auth/sessions', { credentials: 'include', headers: { 'Accept': 'application/json' } });
        if (r2.ok) { const j = await r2.json(); if (!dead) setSessions(Array.isArray(j) ? j : (j.sessions || [])); }
      } catch {}
    })();
    return () => { dead = true; };
  }, []);

  const tabs = [];

  const Row = ({ label, value, action, onAction }) => (
    <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr auto', gap: 16, alignItems: 'center', padding: '16px 0', borderBottom: '1px solid var(--border-1)' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{label}</div>
      <div style={{ fontSize: 13.5, color: 'var(--fg-1)' }}>{value || <span style={{ color: 'var(--fg-3)', fontStyle: 'italic' }}>—</span>}</div>
      {action && <button onClick={onAction} style={{ padding: '7px 12px', borderRadius: 8, background: 'transparent', border: '1px solid var(--border-1)', fontSize: 12.5, cursor: 'pointer' }}>{action}</button>}
    </div>
  );

  const renderAccount = () => (
    <div className="k-card" style={{ padding: 22 }}>
      <Row label="Display name" value={me && (me.display_name || me.name)} />
      <Row label="Member ID"    value={me && (me.member_id || me.id)} />
      <Row label="Email"        value={me && me.email} />
      <Row label="Phone"        value={me && (me.phone_number || me.phone)} />
      <Row label="Role"         value={me && (me.role || me.account_role)} />
      <Row label="Joined"       value={me && me.created_at ? new Date(me.created_at).toLocaleDateString() : null} />
    </div>
  );

  const renderSecurity = () => (
    <div className="k-card" style={{ padding: 22 }}>
      <Row label="MFA" value={me && me.mfa_enabled ? 'Enabled · biometric + PIN' : 'Not enabled — turn on in mobile app'} action={me && !me.mfa_enabled ? 'Enable' : null} />
      <Row label="Active sessions" value={sessions === null ? 'Checking…' : `${sessions.length} active`} action={sessions && sessions.length > 0 ? 'View' : null} />
      <Row label="Last sign-in" value={me && (me.last_sign_in || me.last_login) ? new Date(me.last_sign_in || me.last_login).toLocaleString() : null} />
      <div style={{ marginTop: 14 }}>
        <button onClick={() => window.CHVault.logout()} style={{ padding: '10px 16px', borderRadius: 8, background: 'transparent', border: '1px solid rgba(229,72,77,0.3)', color: 'var(--accent-coral)', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>Sign out everywhere</button>
      </div>
    </div>
  );

  const renderData = () => {
    const entryCount    = vault && (vault.total_entries || vault.entry_count || vault.entries);
    const totalBytes    = vault && (vault.total_bytes || vault.size_bytes);
    const grantsActive  = vault && (vault.active_grants || vault.shares_active);
    return (
      <div>
        <div className="k-card" style={{ padding: 22, marginBottom: 14 }}>
          <div className="k-eyebrow">Datavault</div>
          <h3 className="k-h3" style={{ marginTop: 4, marginBottom: 8 }}>Everything Conceptual Health® touches lives here.</h3>
          <Row label="Encrypted entries" value={entryCount != null ? entryCount.toLocaleString() : null} />
          <Row label="Total size" value={totalBytes != null ? `${(totalBytes/1e6).toFixed(2)} MB · encrypted at rest` : null} />
          <Row label="Active grants" value={grantsActive != null ? `${grantsActive} share${grantsActive === 1 ? '' : 's'}` : null} />
        </div>
        <div className="k-card" style={{ padding: 22 }}>
          <div className="k-eyebrow">Exports</div>
          <h3 className="k-h3" style={{ marginTop: 4, marginBottom: 8 }}>Take it with you, any time.</h3>
          <Row label="Full vault export" value="Chain-anchored ZIP · everything · encrypted to your key" action="Generate" onAction={() => window.location.href = window.CHVault.apiRoot + '/api/v1/vault/export'} />
          <Row label="Master Equation spec" value="The exact formula + constants your CH is computed from" action="View spec" onAction={() => window.open('/ui_kits/master-equation/spec.html', '_blank')} />
          <Row label="Validator program" value="Anyone can reproduce your CH score from the published formula" action="Read" onAction={() => window.open('/ui_kits/master-equation/validators/README.md', '_blank')} />
        </div>
      </div>
    );
  };

  return (
    <div data-screen-label="Settings">
      <div style={{ marginBottom: 24 }}>
        <div className="k-eyebrow" style={{ color: 'var(--accent-clinical)' }}>Settings</div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40, margin: '8px 0 0', letterSpacing: '-0.02em' }}>Your account. Your keys. Your rules.</h1>
      </div>

      <div style={{ display: 'flex', gap: 4, padding: 4, background: 'var(--bg-mist)', borderRadius: 10, border: '1px solid var(--border-1)', marginBottom: 18, width: 'fit-content' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{ padding: '8px 18px', borderRadius: 8, background: tab === t.id ? 'var(--bg-parchment)' : 'transparent', border: 'none', fontSize: 12.5, color: tab === t.id ? 'var(--fg-1)' : 'var(--fg-3)', cursor: 'pointer', fontWeight: tab === t.id ? 600 : 500 }}>{t.label}</button>
        ))}
      </div>

      {tab === 'account'  && renderAccount()}
      {tab === 'security' && renderSecurity()}
      {tab === 'data'     && renderData()}
    </div>
  );
};
window.Settings = Settings;