/* ============================================================
   VYRON App — Screens (part 2)
   Staking · Discovery · Governance · Settings
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------------- STAKING ---------------- */
function Staking({ state, actions }) {
  const [tab, setTab] = useState('stake');
  const [amt, setAmt] = useState('');
  const APR = 8.4;
  const go = () => {
    const v = parseFloat(amt);
    if (!v || v <= 0) return;
    if (tab === 'stake') actions.stake(v); else actions.unstake(v);
    setAmt('');
  };
  const max = tab === 'stake' ? state.balance : state.staked;
  return (
    <div className="ap-page">
      <PageHead eyebrow="$VYRON" title="Staking" sub="Stake to secure infrastructure, unlock settlement discounts and earn routing incentives." />
      <div className="ap-grid-4">
        <Stat label="Staked" value={VY.fmt(state.staked)} unit="VYRON" icon={I.stake} accent />
        <Stat label="Available" value={VY.fmt(state.balance)} unit="VYRON" icon={I.up} />
        <Stat label="Rewards" value={VY.fmt(state.rewards, 4)} unit="VYRON" icon={I.bolt} />
        <Stat label="Current APR" value={APR} unit="%" icon={I.pulse} />
      </div>

      <div className="ap-grid-1-2">
        <div className="ap-card">
          <div className="ap-tabs">
            <button className={tab === 'stake' ? 'active' : ''} onClick={() => setTab('stake')}>Stake</button>
            <button className={tab === 'unstake' ? 'active' : ''} onClick={() => setTab('unstake')}>Unstake</button>
          </div>
          <label className="ap-field">
            <span>Amount (VYRON)</span>
            <div className="ap-amt">
              <input type="number" placeholder="0.00" value={amt} onChange={e => setAmt(e.target.value)} />
              <button onClick={() => setAmt(String(max))}>MAX</button>
            </div>
          </label>
          <div className="ap-amt-meta"><span>Available</span><b>{VY.fmt(max)} VYRON</b></div>
          <button className="btn btn-primary" style={{ width: '100%', marginTop: 14 }} onClick={go}>
            {tab === 'stake' ? 'Stake VYRON' : 'Unstake VYRON'}
          </button>
          {state.rewards > 0 && (
            <button className="btn btn-ghost" style={{ width: '100%', marginTop: 10 }} onClick={actions.claimRewards}>
              Claim {VY.fmt(state.rewards, 4)} VYRON rewards
            </button>
          )}
        </div>

        <div className="ap-card">
          <div className="ap-card-head"><h3>Your staking position</h3></div>
          <div className="ap-benefits">
            <div className="ap-benefit"><span className="ap-benefit-ic"><Ic d={I.settle} s={16} /></span><div><b>−15% settlement fees</b><p>Reduced fees on Idle-powered rails while staked.</p></div></div>
            <div className="ap-benefit"><span className="ap-benefit-ic"><Ic d={I.routing} s={16} /></span><div><b>Routing incentives</b><p>Earn a share of network routing rewards each epoch.</p></div></div>
            <div className="ap-benefit"><span className="ap-benefit-ic"><Ic d={I.gov} s={16} /></span><div><b>Governance power</b><p>{VY.fmtInt(Math.round(state.staked))} votes in active proposals.</p></div></div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- DISCOVERY ---------------- */
function Discovery({ state, actions }) {
  const [q, setQ] = useState('');
  const [cat, setCat] = useState('All');
  const [busy, setBusy] = useState(null);
  const tick = state.tick || 0;
  const cats = ['All', ...new Set(VY.CATALOG.map(c => c.cat))];
  const list = VY.CATALOG.filter(c => (cat === 'All' || c.cat === cat) && (!q || c.cap.includes(q.toLowerCase())));
  const call = async (c) => {
    setBusy(c.cap);
    await new Promise(r => setTimeout(r, 700 + Math.random() * 500));
    actions.callCapability(c);
    setBusy(null);
  };
  return (
    <div className="ap-page">
      <PageHead eyebrow="Registry" title="Discover Services" sub="Browse the live capability registry. Call any service — Idle settles the cost instantly." />
      <div className="ap-disc-controls">
        <div className="ap-searchbox grow"><Ic d={I.search} s={15} /><input placeholder="Search capabilities…" value={q} onChange={e => setQ(e.target.value)} /></div>
        <div className="ap-chips">
          {cats.map(c => <button key={c} className={"ap-fchip" + (cat === c ? ' active' : '')} onClick={() => setCat(c)}>{c}</button>)}
        </div>
      </div>
      <div className="ap-disc-grid">
        {list.map((c, idx) => {
          const liveLat = Math.max(8, c.latency + Math.round(Math.sin((tick + idx * 3) * 0.5) * Math.max(3, c.latency * 0.05)));
          const liveNodes = c.providers + Math.round(Math.sin((tick + idx) * 0.3) * 2);
          return (
          <div key={c.cap} className="ap-disc-card">
            <div className="ap-disc-head">
              <span className="ap-disc-cat">{c.cat}</span>
              <span className="ap-disc-prov mono">{liveNodes} nodes</span>
            </div>
            <h4 className="mono">{c.cap}</h4>
            <p>{c.desc}</p>
            <div className="ap-disc-meta">
              <span className="mono"><b>{VY.fmt(c.price, 4)}</b> VYRON</span>
              <span className="mono dim">~{liveLat}ms</span>
            </div>
            <button className="btn btn-ghost btn-sm" style={{ width: '100%' }} disabled={busy === c.cap} onClick={() => call(c)}>
              {busy === c.cap ? 'Calling…' : <span><Ic d={I.bolt} s={14} /> Call service</span>}
            </button>
          </div>
        );})}
      </div>
    </div>
  );
}

/* ---------------- GOVERNANCE ---------------- */
function Governance({ state, actions }) {
  const power = Math.round(state.staked);
  return (
    <div className="ap-page">
      <PageHead eyebrow="DAO" title="Governance" sub={`Vote on protocol parameters and upgrades. Your voting power: ${VY.fmtInt(power)} VYRON.`} />
      {power === 0 && <div className="ap-warn"><Ic d={I.stake} s={16} /> Stake $VYRON to unlock voting power.</div>}
      <div className="ap-prop-list">
        {state.proposals.map(p => {
          const total = p.forVotes + p.againstVotes;
          const forPct = total ? p.forVotes / total * 100 : 0;
          return (
            <div key={p.id} className="ap-card ap-prop">
              <div className="ap-prop-top">
                <div>
                  <Badge kind="green">{p.status}</Badge>
                  <h3>{p.title}</h3>
                  <p>{p.desc}</p>
                </div>
              </div>
              <div className="ap-prop-bar">
                <div className="ap-prop-bar-fill" style={{ width: forPct + '%' }} />
              </div>
              <div className="ap-prop-stats">
                <span className="pos">For · {VY.fmtInt(p.forVotes)} ({forPct.toFixed(0)}%)</span>
                <span className="neg">Against · {VY.fmtInt(p.againstVotes)} ({(100 - forPct).toFixed(0)}%)</span>
              </div>
              <div className="ap-prop-act">
                {p.voted ? (
                  <span className="ap-voted"><Ic d={I.check} s={15} /> You voted <b>{p.voted}</b></span>
                ) : (
                  <>
                    <button className="btn btn-primary btn-sm" disabled={power === 0} onClick={() => actions.vote(p.id, 'for')}>Vote For</button>
                    <button className="btn btn-ghost btn-sm" disabled={power === 0} onClick={() => actions.vote(p.id, 'against')}>Vote Against</button>
                  </>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ---------------- SETTINGS ---------------- */
function Settings({ state, actions, onLogout }) {
  const [name, setName] = useState(state.user.name);
  const [copied, setCopied] = useState(null);
  const copy = (k, id) => {
    navigator.clipboard && navigator.clipboard.writeText(k);
    setCopied(id); setTimeout(() => setCopied(null), 1400);
  };
  return (
    <div className="ap-page">
      <PageHead eyebrow="Account" title="Settings" sub="Manage your profile, API keys and session." />

      <div className="ap-card">
        <div className="ap-card-head"><h3>Profile</h3></div>
        <div className="ap-grid-2">
          <Field label="Display name" value={name} onChange={e => setName(e.target.value)} />
          <Field label="Email" value={state.user.email} disabled />
        </div>
        <button className="btn btn-primary btn-sm" style={{ marginTop: 14 }} onClick={() => actions.updateProfile({ name })}>Save changes</button>
      </div>

      <div className="ap-card">
        <div className="ap-card-head">
          <h3>API Keys</h3>
          <button className="btn btn-ghost btn-sm" onClick={() => actions.genApiKey('Key ' + (state.apiKeys.length + 1))}><Ic d={I.plus} s={14} /> New key</button>
        </div>
        <table className="ap-table">
          <thead><tr><th>Label</th><th>Key</th><th>Created</th><th></th></tr></thead>
          <tbody>
            {state.apiKeys.map(k => (
              <tr key={k.id}>
                <td>{k.label}</td>
                <td className="mono dim">{VY.shortKey(k.key)}</td>
                <td className="dim">{VY.ago(k.created)}</td>
                <td className="ap-rowact">
                  <button onClick={() => copy(k.key, k.id)}>{copied === k.id ? 'Copied!' : 'Copy'}</button>
                  <button className="danger" onClick={() => actions.revokeKey(k.id)}><Ic d={I.x} s={14} /></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {state.apiKeys.length === 0 && <Empty text="No API keys. Generate one to authenticate your services." />}
      </div>

      <div className="ap-card ap-danger-card">
        <div className="ap-card-head"><h3>Session</h3></div>
        <p className="dim" style={{ marginTop: 0 }}>Sign out of the VYRON dashboard. Your data stays saved on this device.</p>
        <button className="btn btn-ghost btn-sm" onClick={onLogout}><Ic d={I.logout} s={14} /> Sign out</button>
      </div>
    </div>
  );
}

Object.assign(window, { Staking, Discovery, Governance, Settings });