// screens-a.jsx — Login + Dashboard

window.LoginScreen = function LoginScreen({ setScreen }) {
  const [email, setEmail] = React.useState('admin@savanna.local');
  const [pass, setPass] = React.useState('••••••••');

  return (
    <div style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: '#f5f7fa', padding: '1rem'
    }}>
      <div style={{
        background: 'white', borderRadius: 16, boxShadow: '0 8px 32px rgba(0,0,0,0.1)',
        padding: '2.5rem', width: '100%', maxWidth: 400
      }}>
        {/* Wordmark */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '2rem' }}>
          <div style={{
            width: 36, height: 36, background: '#3a5ca8', borderRadius: 8,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'white', fontWeight: 700, fontSize: '1rem'
          }}>S</div>
          <span style={{ fontWeight: 700, fontSize: '1.2rem', letterSpacing: '-0.01em' }}>Savanna</span>
        </div>

        <h1 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '0.25rem' }}>Sign in</h1>
        <p style={{ color: '#6b7280', fontSize: '0.9rem', marginBottom: '1.75rem' }}>Welcome back to The Lions.</p>

        <div className="form-group">
          <label>Email</label>
          <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
        </div>
        <div className="form-group">
          <label>Password</label>
          <input type="password" value={pass} onChange={e => setPass(e.target.value)} />
        </div>

        <Btn variant="primary" onClick={() => setScreen('dashboard')}
          style={{ width: '100%', justifyContent: 'center', marginTop: '0.25rem', padding: '0.65rem' }}>
          Sign In
        </Btn>

        <div style={{ textAlign: 'center', marginTop: '1rem' }}>
          <a href="#" style={{ fontSize: '0.85rem', color: '#6b7280' }}
            onClick={e => e.preventDefault()}>Forgot password?</a>
        </div>

        <p style={{ textAlign: 'center', marginTop: '1.5rem', fontSize: '0.8rem', color: '#9ca3af' }}>
          This app is invite-only. Contact your club admin to get access.
        </p>
      </div>
    </div>
  );
};

// ── Sparkline SVG ─────────────────────────────────────────────────────────────
function Sparkline() {
  const values = [4200, 5800, 5100, 7200, 9100, 10800, 12450];
  const W = 140, H = 48;
  const min = 4000, max = 13000;
  const pts = values.map((v, i) => {
    const x = (i / (values.length - 1)) * W;
    const y = H - ((v - min) / (max - min)) * H;
    return `${x},${y}`;
  });
  const polyline = pts.join(' ');
  const area = `0,${H} ${polyline} ${W},${H}`;

  return (
    <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} style={{ display: 'block' }}>
      <defs>
        <linearGradient id="spkGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3a5ca8" stopOpacity="0.2" />
          <stop offset="100%" stopColor="#3a5ca8" stopOpacity="0" />
        </linearGradient>
      </defs>
      <polygon points={area} fill="url(#spkGrad)" />
      <polyline points={polyline} fill="none" stroke="#3a5ca8" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
      <circle cx={W} cy={values[values.length-1] === max ? 0 : H - ((values[values.length-1]-min)/(max-min))*H} r="3" fill="#3a5ca8" />
    </svg>
  );
}

window.DashboardScreen = function DashboardScreen({ screen, setScreen, role }) {
  return (
    <AppShell screen={screen} setScreen={setScreen} role={role}>
      {/* Hero */}
      <div className="hero-card">
        <div>
          <div className="hero-amount">$12,450</div>
          <div className="hero-label">Net Profit — Year to Date</div>
          <div className="hero-badge">↑ 18% vs last year</div>
        </div>
        <Sparkline />
      </div>

      {/* Stats */}
      <div className="stat-grid">
        <StatTile label="Total Members" value="142" sub="6 invited" />
        <StatTile label="Events YTD" value="18" sub="5 fundraisers" />
        <StatTile label="Avg Revenue / Event" value="$692" />
        {role !== 'viewer' && <StatTile label="Pending Approvals" value="1" sub="awaiting review" />}
      </div>

      {/* Activity feed */}
      <div className="card">
        <div className="card-header">
          <span className="card-title">Recent Activity</span>
        </div>
        {DATA.activity.map(item => (
          <div key={item.id} style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.6rem 0', borderBottom: '1px solid #f3f4f6' }}>
            <div className="avatar" style={{ background: item.color, width: 32, height: 32, fontSize: '0.8rem' }}>
              {item.actor.charAt(0)}
            </div>
            <div style={{ flex: 1, fontSize: '0.875rem' }}>
              <strong>{item.actor}</strong> {item.verb}{item.target ? ' ' : ''}<span style={{ color: '#6b7280' }}>{item.target}</span>
            </div>
            <span style={{ fontSize: '0.78rem', color: '#9ca3af', flexShrink: 0 }}>{item.time}</span>
          </div>
        ))}
      </div>
    </AppShell>
  );
};