// Dashboard view — hero metrics, live feed, cash, runway
(function() {
  const { useState, useEffect } = React;
  const { Spark, Bars, CatPill, Amount, AccountTag, Confidence } = window.UI;

  function LiveFeed() {
    const [idx, setIdx] = useState(0);
    useEffect(() => {
      const i = setInterval(() => setIdx(x => x + 1), 2400);
      return () => clearInterval(i);
    }, []);
    const visible = DATA.transactions.slice(0, 8);
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {visible.map((t, i) => (
          <div key={t.id + '-' + idx} style={{
            display: 'grid',
            gridTemplateColumns: '72px 1fr auto',
            alignItems: 'center',
            padding: '6px var(--pad-x)',
            borderBottom: '1px solid var(--line)',
            fontSize: 'var(--fs-sm)',
            animation: i === 0 && idx > 0 ? 'flash 1s ease' : 'none',
          }}>
            <span className="mono" style={{ color: 'var(--fg-3)', fontSize: 10 }}>{t.ts}</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2, overflow: 'hidden' }}>
              <span className="truncate" style={{ color: 'var(--fg-0)' }}>{t.merchant}</span>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <CatPill cat={t.cat} small />
                <AccountTag id={t.account} />
              </div>
            </div>
            <Amount v={t.amount} />
          </div>
        ))}
      </div>
    );
  }

  function CashFlow() {
    return (
      <div className="panel">
        <div className="panel-head">
          <span className="panel-title">Cash Flow · 12 mo</span>
          <div style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-2)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
            <span><span style={{ width: 8, height: 8, background: 'var(--pos)', display: 'inline-block', marginRight: 4 }} />in</span>
            <span><span style={{ width: 8, height: 8, background: 'var(--neg)', display: 'inline-block', marginRight: 4 }} />out</span>
          </div>
        </div>
        <div style={{ padding: 'var(--pad-x)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20 }}>
          <Bars data={DATA.cashflow} w={420} h={110} accessor={d => [d.in, d.out]} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 11 }}>
            <div><span className="caps" style={{ padding: 0, display: 'block' }}>Net · Apr</span><span style={{ fontFamily: 'var(--font-serif)', fontSize: 22, color: 'var(--pos)' }}>+$53.4k</span></div>
            <div><span className="caps" style={{ padding: 0, display: 'block' }}>Avg Net</span><span style={{ fontFamily: 'var(--font-serif)', fontSize: 18, color: 'var(--fg-0)' }}>+$29.8k</span></div>
            <div><span className="caps" style={{ padding: 0, display: 'block' }}>Runway</span><span style={{ fontFamily: 'var(--font-serif)', fontSize: 18, color: 'var(--fg-0)' }}>18.4 mo</span></div>
          </div>
        </div>
      </div>
    );
  }

  function Accounts() {
    return (
      <div className="panel">
        <div className="panel-head">
          <span className="panel-title">Accounts · {DATA.accounts.length}</span>
          <span className="mono" style={{ fontSize: 10, color: 'var(--fg-3)' }}>sum · ${(DATA.accounts.filter(a=>a.currency==='USD').reduce((s,a)=>s+a.balance,0)/1000).toFixed(1)}k</span>
        </div>
        <table className="data">
          <thead>
            <tr>
              <th>Account</th>
              <th>Source</th>
              <th>Type</th>
              <th className="num">Balance</th>
              <th className="num">30d</th>
            </tr>
          </thead>
          <tbody>
            {DATA.accounts.map(a => (
              <tr key={a.id}>
                <td>
                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <span>{a.name}</span>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--fg-3)' }}>{a.mask}</span>
                  </div>
                </td>
                <td><span className="mono" style={{ fontSize: 10, color: 'var(--fg-2)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{a.source}</span></td>
                <td><span className="mono" style={{ fontSize: 10, color: 'var(--fg-2)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{a.type}</span></td>
                <td className="num" style={{ color: a.balance < 0 ? 'var(--neg)' : 'var(--fg-0)' }}>
                  {a.currency === 'BTC' ? `₿ ${a.balance.toFixed(4)}` :
                   (a.balance < 0 ? '−$' : '$') + Math.abs(a.balance).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                </td>
                <td className="num" style={{ color: a.delta < 0 ? 'var(--neg)' : 'var(--pos)' }}>
                  {a.delta < 0 ? '−' : '+'}
                  {a.currency === 'BTC' ? a.delta.toFixed(4) : Math.abs(a.delta).toLocaleString('en-US', { maximumFractionDigits: 2 })}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }

  function Metrics() {
    const cash = DATA.accounts.filter(a=>a.currency==='USD' && a.balance>0).reduce((s,a)=>s+a.balance,0);
    return (
      <div className="g-4">
        <div className="metric">
          <span className="label">Total Cash · USD</span>
          <span className="value">${(cash/1000).toFixed(1)}<span style={{ color: 'var(--fg-3)', fontSize: 18 }}>k</span></span>
          <div className="sub">
            <span style={{ color: 'var(--pos)' }}>+$19,841 · 30d</span>
            <Spark points={DATA.spark30} w={80} h={18} stroke="var(--pos)" />
          </div>
        </div>
        <div className="metric">
          <span className="label">Revenue · April</span>
          <span className="value">$241<span style={{ color: 'var(--fg-3)', fontSize: 18 }}>,880</span></span>
          <div className="sub">
            <span style={{ color: 'var(--pos)' }}>+12.4% vs Mar</span>
            <Spark points={[160,162,172,178,190,202,215,228,241]} w={80} h={18} stroke="var(--cat-lime)" />
          </div>
        </div>
        <div className="metric">
          <span className="label">Burn · April</span>
          <span className="value">$94<span style={{ color: 'var(--fg-3)', fontSize: 18 }}>,201</span></span>
          <div className="sub">
            <span style={{ color: 'var(--pos)' }}>−3.1% vs Mar</span>
            <Spark points={[112,108,104,102,99,97,96,95,94]} w={80} h={18} stroke="var(--neg)" />
          </div>
        </div>
        <div className="metric">
          <span className="label">Runway</span>
          <span className="value">18.4<span style={{ color: 'var(--fg-3)', fontSize: 18 }}> mo</span></span>
          <div className="sub">
            <span style={{ color: 'var(--pos)' }}>+0.6 mo</span>
            <span style={{ color: 'var(--fg-3)' }}>@ 94k/mo</span>
          </div>
        </div>
      </div>
    );
  }

  function Dashboard() {
    return (
      <div className="page">
        <div className="page-head">
          <div>
            <div className="crumb">workspace<span className="sep">›</span>home<span className="sep">›</span>operating</div>
            <h1 className="display">Good morning, <span style={{ color: 'var(--accent)', fontStyle: 'italic' }}>Adrien</span>.</h1>
            <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 6, letterSpacing: '0.1em' }}>
              7 items need review · 3 rules fired overnight · next automated tax transfer in 11d
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn">Import <kbd>⌘I</kbd></button>
            <button className="btn">Reconcile</button>
            <button className="btn primary">New Transfer <kbd>⌘N</kbd></button>
          </div>
        </div>

        <Metrics />

        <div style={{ height: 'var(--gap)' }} />

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--gap)' }}>
          <Accounts />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
            <CashFlow />
            <div className="panel">
              <div className="panel-head">
                <span className="panel-title">Live · Transactions</span>
                <span className="chip live"><span className="dot pulse" />streaming</span>
              </div>
              <LiveFeed />
            </div>
          </div>
        </div>
      </div>
    );
  }

  window.DashboardView = Dashboard;
})();