// Dashboard — overview / points history / referrals

function OverviewTab({ user, addToast }) {
  const [pts, setPts] = React.useState(user.totalPoints);
  // Live counter — adds 1 point every (3600/rate)s; for demo use 1pt / 5s
  React.useEffect(() => {
    const t = setInterval(() => setPts(p => p + 1), 5000);
    return () => clearInterval(t);
  }, []);

  // Animate progress bars
  const [progress, setProgress] = React.useState({ phase: 0, refs: 0 });
  React.useEffect(() => {
    const t = setTimeout(() => setProgress({ phase: 64, refs: 50 }), 120);
    return () => clearTimeout(t);
  }, []);

  function copyLink() {
    const link = `https://terran.app/?ref=${user.handle}`;
    navigator.clipboard?.writeText(link);
    addToast(`Referral link copied`);
  }

  return (
    <>
      <div className="stat-grid">
        <div className="stat">
          <div className="stat-label">Total Points</div>
          <div className="stat-value">{fmtNum(pts)}</div>
          <div className="stat-delta"><span className="earn-live"><span className="pulse"></span>+{user.earningRatePerHour} pts/hr</span></div>
        </div>
        <div className="stat">
          <div className="stat-label">Earned Today</div>
          <div className="stat-value">+{user.pointsToday}</div>
          <div className="stat-delta neutral">vs. {user.earningRatePerHour * 24}/day expected</div>
        </div>
        <div className="stat">
          <div className="stat-label">Referral Points</div>
          <div className="stat-value">{fmtNum(user.referralPoints)}</div>
          <div className="stat-delta">5 deposited · 3 pending</div>
        </div>
        <div className="stat">
          <div className="stat-label">USDC Claimable</div>
          <div className="stat-value">${user.rewardsClaimableUSDC.toFixed(2)}</div>
          <div className="stat-delta neutral">at $0.0258 / point</div>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:16}} className="overview-grid">
        <div className="panel">
          <div className="panel-h">
            <div>
              <div className="panel-title">Phase Progress</div>
              <div className="panel-sub">Genesis early adopter — locked in until May 31, 2026</div>
            </div>
            <span className="chip chip-bonus">Phase 1 · 3× active</span>
          </div>
          <div className="panel-body">
            <div style={{display:'flex', justifyContent:'space-between', fontSize:12.5, color:'var(--text-soft)', marginBottom:8}}>
              <span>Genesis ends</span>
              <span className="mono">{progress.phase}% complete · 20d remaining</span>
            </div>
            <div className="progress"><div className="bar" style={{width: progress.phase + '%'}}></div></div>

            <div style={{marginTop: 22}}>
              <div className="phase-grid">
                {window.MOCK_DATA.phases.map((p) => (
                  <div key={p.id} className={cx("phase-card", p.status === 'active' ? 'active' : 'dim')}>
                    {p.status === 'active' && <div className="badge">YOU'RE HERE</div>}
                    <div className={cx("phase-name", p.status === 'active' && 'active')}>{p.name}</div>
                    <div className="phase-meta">{p.mult}</div>
                    <div className="phase-reward">{p.range}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-h">
            <div>
              <div className="panel-title">Multiplier Tier</div>
              <div className="panel-sub">Current: <b style={{color:'var(--accent)'}}>WHALE 2.0×</b></div>
            </div>
          </div>
          <div className="panel-body">
            <div style={{display:'flex', justifyContent:'space-between', fontSize:12.5, color:'var(--text-soft)', marginBottom:8}}>
              <span>10+ deposited referrals</span>
              <span className="mono">5/10</span>
            </div>
            <div className="progress"><div className="bar" style={{width: progress.refs + '%'}}></div></div>
            <p style={{fontSize:12.5, color:'var(--text-soft)', marginTop:18, lineHeight:1.6}}>
              You've already locked in WHALE tier with Phase 1's permanent multiplier. Referrals beyond 10 stack on top.
            </p>
            <div className="ref-link-box" style={{marginTop:14}}>
              <code>terran.app/?ref={user.handle}</code>
              <button className="copy-btn" onClick={copyLink}><Icon name="copy" size={12}/></button>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .overview-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </>
  );
}

function PointsHistoryTab() {
  const all = window.MOCK_DATA.pointsHistory;
  const [filter, setFilter] = React.useState('all');
  const [search, setSearch] = React.useState('');
  const [sort, setSort] = React.useState({ k: 'ts', dir: 'desc' });

  const filtered = React.useMemo(() => {
    let rows = all;
    if (filter !== 'all') rows = rows.filter(r => r.type === filter);
    if (search) rows = rows.filter(r => r.desc.toLowerCase().includes(search.toLowerCase()));
    rows = [...rows].sort((a, b) => {
      const ka = a[sort.k], kb = b[sort.k];
      const va = typeof ka === 'string' ? ka : Number(ka);
      const vb = typeof kb === 'string' ? kb : Number(kb);
      if (va < vb) return sort.dir === 'asc' ? -1 : 1;
      if (va > vb) return sort.dir === 'asc' ? 1 : -1;
      return 0;
    });
    return rows;
  }, [all, filter, search, sort]);

  function toggleSort(k) {
    setSort(s => s.k === k ? { k, dir: s.dir === 'asc' ? 'desc' : 'asc' } : { k, dir: 'desc' });
  }

  const typeMap = {
    earn:    { chip: 'chip-earn',    label: 'EARN' },
    bonus:   { chip: 'chip-bonus',   label: 'BONUS' },
    ref:     { chip: 'chip-ref',     label: 'REFERRAL' },
    deposit: { chip: 'chip-deposit', label: 'DEPOSIT' },
  };

  return (
    <div className="panel">
      <div className="panel-h">
        <div>
          <div className="panel-title">Points History</div>
          <div className="panel-sub">All point transactions on your account</div>
        </div>
        <div className="filter-row">
          <input className="search-input" placeholder="Search..." value={search} onChange={(e) => setSearch(e.target.value)}/>
          {['all','earn','ref','bonus','deposit'].map(f => (
            <button key={f} className={cx("filter-btn", filter === f && 'active')} onClick={() => setFilter(f)}>
              {f.toUpperCase()}
            </button>
          ))}
        </div>
      </div>
      <div className="panel-body flush">
        <table className="tbl">
          <thead>
            <tr>
              <th onClick={() => toggleSort('ts')}>
                Time {sort.k === 'ts' && <span className="sort-arrow">{sort.dir === 'asc' ? '▲' : '▼'}</span>}
              </th>
              <th>Type</th>
              <th>Description</th>
              <th onClick={() => toggleSort('amount')} style={{textAlign:'right'}}>
                Amount {sort.k === 'amount' && <span className="sort-arrow">{sort.dir === 'asc' ? '▲' : '▼'}</span>}
              </th>
              <th onClick={() => toggleSort('balance')} style={{textAlign:'right'}}>
                Balance {sort.k === 'balance' && <span className="sort-arrow">{sort.dir === 'asc' ? '▲' : '▼'}</span>}
              </th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(r => (
              <tr key={r.id}>
                <td className="mono" style={{color:'var(--text-soft)', fontSize:12}}>{fmtDate(r.ts, { time: true })}</td>
                <td><span className={cx("chip", typeMap[r.type].chip)}>{typeMap[r.type].label}</span></td>
                <td>{r.desc}</td>
                <td className="col-amt pos" style={{textAlign:'right'}}>+{r.amount}</td>
                <td className="col-amt" style={{textAlign:'right', color:'var(--text-soft)'}}>{fmtNum(r.balance)}</td>
              </tr>
            ))}
            {filtered.length === 0 && (
              <tr><td colSpan="5" style={{textAlign:'center', padding:'40px', color:'var(--text-muted)'}}>No matching transactions.</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function ReferralsTab({ user, addToast }) {
  const refs = window.MOCK_DATA.referrals;
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'all' ? refs : refs.filter(r => r.status === filter);
  const link = `https://terran.app/?ref=${user.handle}`;

  function copyLink() {
    navigator.clipboard?.writeText(link);
    addToast('Referral link copied to clipboard');
  }

  const deposited = refs.filter(r => r.status === 'deposited').length;
  const pending = refs.filter(r => r.status === 'pending').length;

  return (
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}} className="ref-grid">
      <div className="panel" style={{gridColumn:'1 / -1'}}>
        <div className="panel-h">
          <div>
            <div className="panel-title">Your Referral Link</div>
            <div className="panel-sub">Share to invite others. They reserve, you both earn.</div>
          </div>
          <div className="mono" style={{fontSize:11.5, color:'var(--text-muted)'}}>+50 points per deposited referral</div>
        </div>
        <div className="panel-body">
          <div className="ref-link-box">
            <code>{link}</code>
            <button className="copy-btn" onClick={copyLink}><Icon name="copy" size={12}/> Copy</button>
          </div>
          <div style={{display:'flex', gap:12, marginTop:14, flexWrap:'wrap'}}>
            <button className="btn btn-ghost" onClick={() => addToast('Twitter share opened')} style={{padding:'8px 14px', fontSize:12.5}}>Share on X</button>
            <button className="btn btn-ghost" onClick={() => addToast('Telegram share opened')} style={{padding:'8px 14px', fontSize:12.5}}>Telegram</button>
            <button className="btn btn-ghost" onClick={() => addToast('Email composed')} style={{padding:'8px 14px', fontSize:12.5}}>Email</button>
          </div>
        </div>
      </div>

      <div className="stat">
        <div className="stat-label">Total Referrals</div>
        <div className="stat-value">{refs.length}</div>
        <div className="stat-delta neutral">across all phases</div>
      </div>
      <div className="stat">
        <div className="stat-label">Deposited</div>
        <div className="stat-value" style={{color:'var(--success)'}}>{deposited}</div>
        <div className="stat-delta">+{deposited * 50} pts earned</div>
      </div>

      <div className="panel" style={{gridColumn:'1 / -1'}}>
        <div className="panel-h">
          <div>
            <div className="panel-title">Referral List</div>
            <div className="panel-sub">{deposited} deposited · {pending} pending deposit</div>
          </div>
          <div className="filter-row">
            {['all','deposited','pending'].map(f => (
              <button key={f} className={cx("filter-btn", filter === f && 'active')} onClick={() => setFilter(f)}>
                {f.toUpperCase()}
              </button>
            ))}
          </div>
        </div>
        <div className="panel-body flush">
          {filtered.map(r => (
            <div key={r.id} className="ref-row">
              <div className="ref-avatar" style={{background: r.color}}>{r.name[0].toUpperCase()}</div>
              <div>
                <div className="ref-name">{r.name}</div>
                <div className="ref-addr">{r.addr}</div>
              </div>
              <div className={cx("ref-status", r.status)}>{r.status === 'deposited' ? '● Deposited' : '○ Pending'}</div>
              <div className="ref-points">{r.status === 'deposited' ? `+${r.points} pts` : '—'}</div>
              <div className="ref-date">{r.date}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .ref-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function Dashboard({ user, onLogout, addToast }) {
  const [tab, setTab] = React.useState('overview');

  const tabs = [
    { id: 'overview',  label: 'Overview' },
    { id: 'points',    label: 'Points History' },
    { id: 'referrals', label: 'Referrals' },
  ];

  return (
    <div className="dash-shell">
      <nav className="nav">
        <div className="nav-inner">
          <a href="#" className="brand">
            <span className="brand-mark"></span>
            <span>Terran</span>
            <span className="mono" style={{fontSize:11, color:'var(--text-muted)', marginLeft:8, padding:'2px 8px', border:'1px solid var(--border)', borderRadius:4}}>EARLY ACCESS</span>
          </a>
          <div style={{display:'flex', gap:10, alignItems:'center'}}>
            <span className="wallet-chip"><span className="dot"></span>{user.address}</span>
            <button className="btn btn-ghost" onClick={onLogout} style={{padding:'8px 14px', fontSize:13}}>Disconnect</button>
          </div>
        </div>
      </nav>

      <div className="dash-content">
        <div className="dash-header">
          <div>
            <div className="dash-title">Welcome back, {user.handle}.</div>
            <div className="dash-sub">Your Schok Quantum Ultra is reserved. Rewards are accumulating in real time.</div>
          </div>
          <span className="wallet-chip" style={{borderColor:'var(--accent-border)', color:'var(--accent)', background:'rgba(255,51,102,0.06)'}}>
            <span className="dot" style={{background:'var(--accent)', boxShadow:'0 0 0 3px rgba(255,51,102,0.18)'}}></span>
            PHASE 1 · GENESIS · 3× MULTIPLIER
          </span>
        </div>

        <div className="tabs">
          {tabs.map(t => (
            <button key={t.id} className={cx("tab", tab === t.id && 'active')} onClick={() => setTab(t.id)}>
              {t.label}
            </button>
          ))}
        </div>

        {tab === 'overview'  && <OverviewTab user={user} addToast={addToast}/>}
        {tab === 'points'    && <PointsHistoryTab/>}
        {tab === 'referrals' && <ReferralsTab user={user} addToast={addToast}/>}
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;