const ApiKeys = ({ onNav }) => {
  const [newKeyCopied, setNewKeyCopied] = React.useState(false);
  const [keys, setKeys] = React.useState([
    { id: 'k_dev', name: 'Local Development', prefix: 'ar_dev_', created: 'Mar 12, 2026', lastUsed: '2 min ago', active: true },
    { id: 'k_prod', name: 'Production — Northwind API', prefix: 'ar_live_', created: 'Feb 3, 2026', lastUsed: '12 sec ago', active: true },
    { id: 'k_staging', name: 'Staging — Vercel', prefix: 'ar_test_', created: 'Jan 28, 2026', lastUsed: '4 hours ago', active: true },
    { id: 'k_ci', name: 'CI/CD (GitHub Actions)', prefix: 'ar_live_', created: 'Jan 10, 2026', lastUsed: 'Yesterday', active: false },
    { id: 'k_old', name: 'Legacy — Zapier import', prefix: 'ar_live_', created: 'Nov 4, 2025', lastUsed: '3 weeks ago', active: false, revoked: true },
  ]);

  const newKey = 'ar_live_sk_7x9Qf2vLm8nR4TpW6ZjKc3bEhN1aSyU5oP0dI';

  const copyKey = () => {
    setNewKeyCopied(true);
    setTimeout(() => setNewKeyCopied(false), 1800);
  };

  const toggleKey = (id) => {
    setKeys(keys.map(k => k.id === id ? { ...k, active: !k.active } : k));
  };

  return (
    <div className="shell">
      <Sidebar current="keys" onNav={onNav} />
      <div className="main">
        <div className="main-head">
          <div>
            <div className="crumb">
              <span>Workspace</span>
              <span className="sep"><Icon name="chevron_right" size={11} /></span>
              <span>Settings</span>
            </div>
            <h1>API Keys</h1>
            <div className="sub">Scoped credentials for calling the Arcrun API from your code and CI.</div>
          </div>
          <div className="flex gap-8">
            <button className="btn btn-secondary"><Icon name="book" size={14} /> API docs</button>
            <button className="btn btn-primary"><Icon name="plus" size={14} /> Create new key</button>
          </div>
        </div>

        <div className="main-body" style={{maxWidth: 1080}}>
          <div className="new-key-box">
            <div className="warn-row">
              <span className="warn-icon"><Icon name="warn" size={12} /></span>
              <span><strong style={{color: '#FBBF24'}}>Save this key now.</strong> For security, we won't show it again — if you lose it, you'll need to create a new one.</span>
            </div>
            <h3>Your new API key</h3>
            <p className="desc">Key named <strong style={{color: 'var(--text)'}}>"Production — Northwind API"</strong> · created just now · all scopes</p>
            <div className="key-display">
              <span className="key-val">{newKey}</span>
              <button className={`copy-btn ${newKeyCopied ? 'copied' : ''}`} onClick={copyKey}>
                <Icon name={newKeyCopied ? 'check' : 'copy'} size={12} />
                {newKeyCopied ? 'Copied' : 'Copy'}
              </button>
            </div>
            <div style={{marginTop: 14, display: 'flex', gap: 16, fontSize: 12, color: 'var(--text-mute)', alignItems: 'center'}}>
              <span className="flex gap-6" style={{alignItems: 'center'}}><Icon name="check" size={12} /> Full workspace access</span>
              <span className="flex gap-6" style={{alignItems: 'center'}}><Icon name="clock" size={12} /> Never expires</span>
              <span style={{marginLeft: 'auto'}}><span className="link">Add expiry or restrict scopes →</span></span>
            </div>
          </div>

          <div className="section-head">
            <div>
              <h2>All keys</h2>
              <div className="subtle" style={{marginTop: 2}}>{keys.filter(k => !k.revoked).length} active · {keys.filter(k => k.revoked).length} revoked</div>
            </div>
            <div className="flex gap-8">
              <button className="btn btn-secondary btn-sm"><Icon name="filter" size={12} /> Filter</button>
            </div>
          </div>

          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr>
                  <th style={{width: '32%'}}>Name</th>
                  <th>Key</th>
                  <th>Created</th>
                  <th>Last used</th>
                  <th>Status</th>
                  <th style={{width: 60, textAlign: 'right'}}></th>
                </tr>
              </thead>
              <tbody>
                {keys.map(k => (
                  <tr key={k.id}>
                    <td>
                      <div style={{fontWeight: 500, fontSize: 13.5}}>{k.name}</div>
                    </td>
                    <td className="mono">{k.prefix}••••{k.id.slice(-4)}</td>
                    <td className="dim" style={{fontSize: 12.5}}>{k.created}</td>
                    <td className="dim" style={{fontSize: 12.5}}>{k.lastUsed}</td>
                    <td>
                      {k.revoked ? (
                        <span className="pill revoked"><span className="pdot" /> Revoked</span>
                      ) : (
                        <div className="flex gap-8" style={{alignItems: 'center'}}>
                          <span className={`toggle ${k.active ? 'on' : ''}`} onClick={() => toggleKey(k.id)} />
                          <span className={`pill ${k.active ? 'active' : 'idle'}`}>
                            <span className="pdot" /> {k.active ? 'Active' : 'Paused'}
                          </span>
                        </div>
                      )}
                    </td>
                    <td style={{textAlign: 'right'}}>
                      {!k.revoked && (
                        <button className="btn btn-danger-ghost btn-sm"><Icon name="trash" size={12} /></button>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div style={{marginTop: 18, fontSize: 12, color: 'var(--text-mute)', display: 'flex', alignItems: 'center', gap: 8}}>
            <Icon name="warn" size={12} />
            <span>Revoking a key stops all in-flight requests within 60 seconds. This cannot be undone.</span>
          </div>
        </div>
      </div>
    </div>
  );
};

window.ApiKeys = ApiKeys;