// ── Mobile detection ─────────────────────────────────────────────────────────
function useIsMobile() {
  const [mobile, setMobile] = React.useState(() => window.innerWidth <= 768);
  React.useEffect(() => {
    const fn = () => setMobile(window.innerWidth <= 768);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, []);
  return mobile;
}

// ── Constants ─────────────────────────────────────────────────────────────────
const POSITIONS = ['GK','CB','LB','RB','LWB','RWB','CDM','CM','CAM','LM','RM','LW','RW','CF','ST'];
const POS_GROUP = pos => ['GK'].includes(pos) ? 'GK' : ['CB','LB','RB','LWB','RWB'].includes(pos) ? 'DEF' : ['CDM','CM','CAM','LM','RM'].includes(pos) ? 'MID' : 'ATT';
const COMP_TYPES = ['league','cup','continental','friendly'];
const TRANSFER_TYPES = ['in','out','loan_in','loan_out','free_in','released'];
const TRANSFER_LABELS = { in:'Transfer In', out:'Transfer Out', loan_in:'Loan In', loan_out:'Loan Out', free_in:'Free Agent', released:'Released' };

const fmtFee = v => v == null ? '—' : v === 0 ? 'Free' : v >= 1000 ? `£${(v/1000).toFixed(1)}M` : `£${Math.round(v)}K`;
const fmtRating = v => v == null ? '—' : Number(v).toFixed(1);
const ratingClass = v => v == null ? 'rating-none' : v >= 7.5 ? 'rating-hi' : v >= 6.5 ? 'rating-mid' : 'rating-low';
const overallClass = v => v >= 85 ? 'overall-gold' : v >= 75 ? 'overall-silver' : v >= 65 ? 'overall-green' : 'overall-bronze';
const matchResult = m => m.went_to_pens ? (m.pens_for > m.pens_against ? 'W' : 'L') : m.goals_for > m.goals_against ? 'W' : m.goals_for === m.goals_against ? 'D' : 'L';
const resultChar  = m => matchResult(m);
const resultClass = m => ({ W:'win', D:'draw', L:'loss' })[matchResult(m)];

// ── API ───────────────────────────────────────────────────────────────────────
const api = {
  get:  url => fetch(url).then(r => r.json()),
  post: (url, body) => fetch(url, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body) }).then(r => r.json()),
  put:  (url, body) => fetch(url, { method:'PUT',  headers:{'Content-Type':'application/json'}, body:JSON.stringify(body) }).then(r => r.json()),
  del:  url => fetch(url, { method:'DELETE' }).then(r => r.json()),
};

// ── Chart Components ──────────────────────────────────────────────────────────
function BarChart({ labels, datasets, height = 220, horizontal = false, stacked = false }) {
  const ref = React.useRef(null);
  const chartRef = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    if (chartRef.current) chartRef.current.destroy();
    chartRef.current = new Chart(ref.current, {
      type: horizontal ? 'bar' : 'bar',
      data: { labels, datasets },
      options: {
        indexAxis: horizontal ? 'y' : 'x',
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { labels: { color: '#7d93b2', font: { size: 11 } }, position: 'top' } },
        scales: {
          x: { stacked, grid: { color: 'rgba(28,40,64,.6)' }, ticks: { color: '#7d93b2', font: { size: 11 } } },
          y: { stacked, grid: { color: 'rgba(28,40,64,.6)' }, ticks: { color: '#7d93b2', font: { size: 11 } } }
        }
      }
    });
    return () => chartRef.current?.destroy();
  }, [JSON.stringify({ labels, datasets, horizontal, stacked })]);
  return <div className="chart-wrap" style={{ height }}><canvas ref={ref} /></div>;
}

function LineChart({ labels, datasets, height = 220, yReverse = false }) {
  const ref = React.useRef(null);
  const chartRef = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    if (chartRef.current) chartRef.current.destroy();
    chartRef.current = new Chart(ref.current, {
      type: 'line',
      data: { labels, datasets },
      options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { labels: { color: '#7d93b2', font: { size: 11 } }, position: 'top' } },
        scales: {
          x: { grid: { color: 'rgba(28,40,64,.6)' }, ticks: { color: '#7d93b2', font: { size: 11 } } },
          y: { reverse: yReverse, grid: { color: 'rgba(28,40,64,.6)' }, ticks: { color: '#7d93b2', font: { size: 11 } } }
        }
      }
    });
    return () => chartRef.current?.destroy();
  }, [JSON.stringify({ labels, datasets, yReverse })]);
  return <div className="chart-wrap" style={{ height }}><canvas ref={ref} /></div>;
}

function DonutChart({ labels, data, colors, height = 200 }) {
  const ref = React.useRef(null);
  const chartRef = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    if (chartRef.current) chartRef.current.destroy();
    chartRef.current = new Chart(ref.current, {
      type: 'doughnut',
      data: { labels, datasets: [{ data, backgroundColor: colors, borderColor: '#111827', borderWidth: 3 }] },
      options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { position: 'right', labels: { color: '#7d93b2', font: { size: 11 }, padding: 12 } } },
        cutout: '65%'
      }
    });
    return () => chartRef.current?.destroy();
  }, [JSON.stringify({ labels, data, colors })]);
  return <div className="chart-wrap" style={{ height }}><canvas ref={ref} /></div>;
}

// ── Autocomplete ──────────────────────────────────────────────────────────────
function Autocomplete({ value, onChange, options, placeholder, onCreate, label }) {
  const [open, setOpen] = React.useState(false);
  const [q, setQ] = React.useState(value || '');
  const ref = React.useRef(null);

  React.useEffect(() => { setQ(value || ''); }, [value]);
  React.useEffect(() => {
    const h = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, []);

  const filtered = options.filter(o => o.name.toLowerCase().includes(q.toLowerCase()));
  const showCreate = onCreate && q.trim() && !options.find(o => o.name.toLowerCase() === q.trim().toLowerCase());

  return (
    <div ref={ref} className="autocomplete-wrap">
      {label && <label className="form-label">{label}</label>}
      <input
        className="form-input"
        value={q}
        placeholder={placeholder}
        onChange={e => { setQ(e.target.value); setOpen(true); onChange(null, e.target.value); }}
        onFocus={() => setOpen(true)}
      />
      {open && (filtered.length > 0 || showCreate) && (
        <div className="autocomplete-list">
          {filtered.map(o => (
            <div key={o.id} className="autocomplete-item" onMouseDown={() => { setQ(o.name); onChange(o.id, o.name); setOpen(false); }}>
              {o.name}
            </div>
          ))}
          {showCreate && (
            <div className="autocomplete-create" onMouseDown={() => { onCreate(q.trim()); setOpen(false); }}>
              + Create "{q.trim()}"
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ── Login ─────────────────────────────────────────────────────────────────────
function LoginPage({ onLogin }) {
  const [pw, setPw] = React.useState('');
  const [err, setErr] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const submit = async e => {
    e.preventDefault(); setErr(''); setLoading(true);
    const r = await api.post('/api/auth/login', { password: pw });
    setLoading(false);
    if (r.ok) onLogin(); else setErr('Incorrect password');
  };
  return (
    <div className="login-page">
      <div className="login-card">
        <div className="login-logo">
          <div className="logo-mark">⚽</div>
          <h1>Career Tracker</h1>
          <p>EAFC Career Mode</p>
        </div>
        <form onSubmit={submit}>
          {err && <div className="alert alert-error">{err}</div>}
          <div className="form-group">
            <label className="form-label">Password</label>
            <input className="form-input" type="password" value={pw} onChange={e => setPw(e.target.value)} autoFocus placeholder="Enter password" />
          </div>
          <button className="btn btn-primary" style={{ width:'100%', justifyContent:'center', padding:'11px' }} disabled={loading}>
            {loading ? 'Logging in…' : 'Sign In'}
          </button>
        </form>
      </div>
    </div>
  );
}

// ── Save Selector ─────────────────────────────────────────────────────────────
function SaveSelector({ saves, onSelect, onNew, onLogout }) {
  const [showNew, setShowNew] = React.useState(false);
  const [form, setForm] = React.useState({ name:'', club_name:'', club_color:'#22d3a0' });

  const createSave = async () => {
    if (!form.name.trim() || !form.club_name.trim()) return;
    const r = await api.post('/api/saves', form);
    onNew(r.id);
  };

  return (
    <div style={{ minHeight:'100vh', background:'radial-gradient(ellipse at 50% 0%, rgba(31,217,160,.06) 0%, transparent 65%)', padding:'40px 32px' }}>
      <div style={{ maxWidth:900, margin:'0 auto' }}>
        <div className="flex justify-between flex-center mb-20">
          <div>
            <h1 style={{ fontSize:'1.5rem' }}>Career Saves</h1>
            <p className="text-muted mt-8">Select a save to continue or create a new career</p>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={onLogout}>Sign Out</button>
        </div>

        <div className="save-grid">
          {saves.map(s => (
            <div key={s.id} className="save-card" style={{ '--accent': s.club_color }} onClick={() => onSelect(s.id)}>
              <div style={{ position:'absolute', top:0, left:0, right:0, height:3, background:s.club_color, borderRadius:'14px 14px 0 0' }} />
              <div className="save-card-badge" style={{ background: s.club_color + '22', color: s.club_color, border:`1px solid ${s.club_color}44` }}>
                {s.club_name.slice(0,2).toUpperCase()}
              </div>
              <div className="save-card-title">{s.name}</div>
              <div className="save-card-sub">{s.club_name}</div>
              <div style={{ marginTop:8, fontSize:'.75rem', color:'var(--text-3)' }}>Created {new Date(s.created_at).toLocaleDateString()}</div>
            </div>
          ))}

          <div className="save-card" style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', border:'1.5px dashed var(--border-md)', cursor:'pointer', minHeight:130 }}
            onClick={() => setShowNew(true)}>
            <div style={{ fontSize:'1.8rem', color:'var(--text-3)', marginBottom:8 }}>+</div>
            <div style={{ fontWeight:600, color:'var(--text-2)' }}>New Career Save</div>
          </div>
        </div>
      </div>

      {showNew && (
        <div className="modal-overlay" onClick={e => e.target === e.currentTarget && setShowNew(false)}>
          <div className="modal modal-sm">
            <div className="modal-header"><h3>New Career Save</h3><button className="btn-close" onClick={() => setShowNew(false)}>×</button></div>
            <div className="modal-body">
              <div className="form-group">
                <label className="form-label">Save Name</label>
                <input className="form-input" placeholder="e.g. My Career S1" value={form.name} onChange={e => setForm(f => ({...f, name:e.target.value}))} />
              </div>
              <div className="form-group">
                <label className="form-label">Club Name</label>
                <input className="form-input" placeholder="e.g. FC Barcelona" value={form.club_name} onChange={e => setForm(f => ({...f, club_name:e.target.value}))} />
              </div>
              <div className="form-group">
                <label className="form-label">Club Colour</label>
                <div className="flex gap-8 flex-center">
                  <input type="color" value={form.club_color} onChange={e => setForm(f => ({...f, club_color:e.target.value}))} style={{ width:44, height:36, border:'none', background:'none', cursor:'pointer', borderRadius:6 }} />
                  <span className="text-muted" style={{ fontSize:'.85rem' }}>{form.club_color}</span>
                </div>
              </div>
            </div>
            <div className="modal-footer">
              <button className="btn btn-ghost" onClick={() => setShowNew(false)}>Cancel</button>
              <button className="btn btn-primary" onClick={createSave}>Create Save</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── Season Modal ──────────────────────────────────────────────────────────────
function NewSeasonModal({ saveId, nextNum, onSave, onClose }) {
  const [form, setForm] = React.useState({ year_label:'', league_name:'', budget_start:'' });
  const save = async () => {
    if (!form.year_label.trim()) return;
    const r = await api.post(`/api/saves/${saveId}/seasons`, { season_number: nextNum, ...form, budget_start: form.budget_start ? parseFloat(form.budget_start) : null });
    onSave(r.id);
  };
  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal modal-sm">
        <div className="modal-header"><h3>New Season</h3><button className="btn-close" onClick={onClose}>×</button></div>
        <div className="modal-body">
          <div className="form-group">
            <label className="form-label">Season Label</label>
            <input className="form-input" placeholder="e.g. 2025/26" value={form.year_label} onChange={e => setForm(f => ({...f, year_label:e.target.value}))} autoFocus />
          </div>
          <div className="form-group">
            <label className="form-label">League / Division</label>
            <input className="form-input" placeholder="e.g. Premier League" value={form.league_name} onChange={e => setForm(f => ({...f, league_name:e.target.value}))} />
          </div>
          <div className="form-group">
            <label className="form-label">Starting Budget (£M)</label>
            <input className="form-input" type="number" placeholder="e.g. 50" value={form.budget_start} onChange={e => setForm(f => ({...f, budget_start:e.target.value}))} />
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={save} disabled={!form.year_label.trim()}>Start Season</button>
        </div>
      </div>
    </div>
  );
}

// ── Sidebar ───────────────────────────────────────────────────────────────────
function MobileNav({ page, setPage }) {
  const items = [
    { id:'dashboard', icon:'📊', label:'Home' },
    { id:'matches',   icon:'⚽', label:'Matches' },
    { id:'squad',     icon:'👤', label:'Squad' },
    { id:'transfers', icon:'↕️',  label:'Transfers' },
    { id:'history',   icon:'📈', label:'History' },
    { id:'settings',  icon:'⚙️', label:'More' },
  ];
  return (
    <nav className="mobile-nav">
      {items.map(n => (
        <button key={n.id} className={`mobile-nav-item${page === n.id ? ' active' : ''}`} onClick={() => setPage(n.id)}>
          <span className="m-icon">{n.icon}</span>
          <span className="m-label">{n.label}</span>
        </button>
      ))}
    </nav>
  );
}

function Sidebar({ save, season, page, setPage, onLogout, onChangeSave }) {
  const nav = [
    { id:'dashboard', icon:'📊', label:'Dashboard' },
    { id:'matches',   icon:'⚽', label:'Matches' },
    { id:'squad',     icon:'👤', label:'Squad' },
    { id:'transfers', icon:'↕️',  label:'Transfers' },
    { id:'history',   icon:'📈', label:'History' },
    { id:'settings',  icon:'⚙️', label:'Settings' },
  ];
  const initials = save?.club_name?.slice(0,2).toUpperCase() || '??';
  return (
    <aside className="sidebar">
      <div className="sidebar-logo">
        <div className="club-badge" style={{ background: (save?.club_color || '#22d3a0') + '22', color: save?.club_color || '#22d3a0', border:`1px solid ${(save?.club_color || '#22d3a0')}44` }}>
          {initials}
        </div>
        <div className="save-name">{save?.name}</div>
        <div className="club-name">{save?.club_name}</div>
      </div>
      <nav className="sidebar-nav">
        {season && <div className="nav-section-label">Current Season</div>}
        {season && <div style={{ padding:'6px 10px', marginBottom:4 }}>
          <div style={{ fontSize:'.75rem', color:'var(--text-3)' }}>{season.league_name || 'Season'}</div>
          <div style={{ fontSize:'.85rem', fontWeight:700, color:'var(--primary)' }}>{season.year_label}</div>
        </div>}
        <div className="nav-section-label">Navigation</div>
        {nav.map(n => (
          <button key={n.id} className={`nav-item${page === n.id ? ' active' : ''}`} onClick={() => setPage(n.id)}>
            <span className="icon">{n.icon}</span>
            <span>{n.label}</span>
          </button>
        ))}
        <div className="nav-section-label" style={{ marginTop:8 }}>Save</div>
        <button className="nav-item" onClick={onChangeSave}><span className="icon">💾</span><span>Saves</span></button>
        <button className="nav-item" onClick={onLogout}><span className="icon">🚪</span><span>Sign Out</span></button>
      </nav>
    </aside>
  );
}

// ── Match Modal ───────────────────────────────────────────────────────────────
function MatchModal({ saveId, seasonId, players, opponents, competitions, onSave, onClose, existing, initialStep = 1 }) {
  const [step, setStep] = React.useState(initialStep);
  const [opponentId, setOpponentId]       = React.useState(existing?.opponent_id || null);
  const [opponentName, setOpponentName]   = React.useState(existing?.opponent_name || '');
  const [competitionId, setCompetitionId] = React.useState(existing?.competition_id || null);
  const [competitionName, setCompetitionName] = React.useState(existing?.competition_name || '');
  const [isHome, setIsHome]     = React.useState(existing ? !!existing.is_home : true);
  const [date, setDate]         = React.useState(existing?.match_date || new Date().toISOString().slice(0,10));
  const [gf, setGf]             = React.useState(existing?.goals_for ?? 0);
  const [ga, setGa]             = React.useState(existing?.goals_against ?? 0);
  const [wentToAet, setWentToAet]   = React.useState(!!existing?.went_to_aet);
  const [wentToPens, setWentToPens] = React.useState(!!existing?.went_to_pens);
  const [pensFor, setPensFor]       = React.useState(existing?.pens_for ?? '');
  const [pensAgainst, setPensAgainst] = React.useState(existing?.pens_against ?? '');
  const [leg, setLeg]           = React.useState(existing?.leg ?? '');
  const [round, setRound]       = React.useState(existing?.round || '');
  const [motmId, setMotmId]     = React.useState(existing?.motm_player_id ?? null);
  const [notes, setNotes]       = React.useState(existing?.notes || '');
  const [lineup, setLineup]     = React.useState(existing?.players || []);
  const [goals, setGoals]       = React.useState(existing?.goals || []);
  const [cards, setCards]       = React.useState(existing?.cards || []);
  const [ratings, setRatings]   = React.useState(() => {
    const r = {};
    (existing?.players || []).forEach(p => { if (p.rating) r[p.player_id] = p.rating; });
    return r;
  });
  const [saving, setSaving] = React.useState(false);

  const activePlayers = players.filter(p => p.is_active);
  const playersInMatch = lineup.map(l => l.player_id);
  const starters = lineup.filter(l => l.is_starter);
  const subs     = lineup.filter(l => !l.is_starter);

  const togglePlayer = (pid, isStarter) => {
    if (playersInMatch.includes(pid)) {
      setLineup(l => l.filter(x => x.player_id !== pid));
    } else {
      setLineup(l => [...l, { player_id: pid, is_starter: isStarter }]);
    }
  };

  const setSubMinute = (pid, field, val) => {
    setLineup(l => l.map(x => x.player_id === pid ? {...x, [field]: val ? parseInt(val) : null} : x));
  };
  const setPositionPlayed = (pid, pos) => {
    setLineup(l => l.map(x => x.player_id === pid ? {...x, position_played: pos} : x));
  };

  const addGoal = () => setGoals(g => [...g, { scorer_id: null, assister_id: null, minute: '', is_own_goal: false, is_penalty: false, is_against: false }]);
  const removeGoal = i => setGoals(g => g.filter((_, j) => j !== i));
  const updateGoal = (i, k, v) => setGoals(g => g.map((x, j) => j === i ? {...x, [k]: v} : x));

  const addCard = () => setCards(c => [...c, { player_id: null, card_type: 'yellow', minute: '' }]);
  const removeCard = i => setCards(c => c.filter((_, j) => j !== i));
  const updateCard = (i, k, v) => setCards(c => c.map((x, j) => j === i ? {...x, [k]: v} : x));

  const createOpponent = async name => {
    const r = await api.post(`/api/saves/${saveId}/opponents`, { name });
    setOpponentId(r.id); setOpponentName(name);
  };
  const createCompetition = async name => {
    const r = await api.post(`/api/saves/${saveId}/competitions`, { name, type:'cup' });
    setCompetitionId(r.id); setCompetitionName(name);
  };

  const handleSave = async () => {
    if (!opponentId || !competitionId) return;
    setSaving(true);
    const playerData = lineup.map(l => ({ ...l, rating: ratings[l.player_id] || null }));
    const body = {
      opponent_id: opponentId, competition_id: competitionId, is_home: isHome, match_date: date,
      goals_for: parseInt(gf), goals_against: parseInt(ga), notes,
      went_to_aet: wentToAet, went_to_pens: wentToPens,
      pens_for: wentToPens && pensFor !== '' ? parseInt(pensFor) : null,
      pens_against: wentToPens && pensAgainst !== '' ? parseInt(pensAgainst) : null,
      leg: leg !== '' ? parseInt(leg) : null, round: round || null,
      motm_player_id: motmId || null,
      players: playerData, goals, cards
    };
    if (existing) await api.put(`/api/matches/${existing.id}`, body);
    else await api.post(`/api/seasons/${seasonId}/matches`, body);
    setSaving(false);
    onSave();
  };

  const steps = ['Pre-Match','Lineup','Result & Events','Ratings'];
  const isPreMatch = step <= 2;

  const savePreMatch = async () => {
    if (!opponentId || !competitionId) return;
    setSaving(true);
    const playerData = lineup.map(l => ({ ...l, rating: null }));
    const body = { opponent_id: opponentId, competition_id: competitionId, is_home: isHome, match_date: date, goals_for: 0, goals_against: 0, notes, players: playerData, goals: [], cards: [], status: 'pending' };
    if (existing) await api.put(`/api/matches/${existing.id}`, body);
    else await api.post(`/api/seasons/${seasonId}/matches`, body);
    setSaving(false);
    onSave();
  };

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal modal-lg">
        <div className="modal-header">
          <div>
            <h3>{existing ? 'Edit Match' : 'Log Match'}</h3>
            <div className="step-pills" style={{ display:'flex', gap:6, marginTop:8, overflowX:'auto', paddingBottom:2 }}>
              {steps.map((s,i) => (
                <button key={i} onClick={() => setStep(i+1)} style={{ padding:'5px 12px', borderRadius:20, fontSize:'.75rem', fontWeight:700, border:'none', cursor:'pointer', whiteSpace:'nowrap', flexShrink:0, background: step===i+1 ? 'var(--primary)' : 'var(--bg-elevated)', color: step===i+1 ? 'var(--bg-base)' : 'var(--text-3)' }}>{i+1}. {s}</button>
              ))}
            </div>
          </div>
          <button className="btn-close" onClick={onClose}>×</button>
        </div>

        <div className="modal-body" style={{ maxHeight:'70vh', overflowY:'auto' }}>

          {/* STEP 1 – Pre-Match Info */}
          {step === 1 && (
            <div>
              <div className="step-header"><div className="step-num">1</div><div className="step-title">Pre-Match</div></div>
              <div className="alert alert-info" style={{marginBottom:16}}>Set this up before kick-off. Save as pre-match, then come back after to add the result.</div>
              <div className="form-row">
                <div className="form-group">
                  <Autocomplete label="Opponent" value={opponentName} options={opponents} placeholder="Search or create opponent…" onChange={(id,name) => { if(id) setOpponentId(id); setOpponentName(name||''); }} onCreate={createOpponent} />
                </div>
                <div className="form-group">
                  <Autocomplete label="Competition" value={competitionName} options={competitions} placeholder="Search or create competition…" onChange={(id,name) => { if(id) setCompetitionId(id); setCompetitionName(name||''); }} onCreate={createCompetition} />
                </div>
              </div>
              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">Venue</label>
                  <div className="toggle-group">
                    <button className={`toggle-btn${isHome ? ' active' : ''}`} onClick={() => setIsHome(true)}>Home</button>
                    <button className={`toggle-btn${!isHome ? ' active' : ''}`} onClick={() => setIsHome(false)}>Away</button>
                  </div>
                </div>
                <div className="form-group">
                  <label className="form-label">Date</label>
                  <input className="form-input" type="date" value={date} onChange={e => setDate(e.target.value)} />
                </div>
              </div>
              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">Round / Stage <span style={{color:'var(--text-3)',fontWeight:400}}>(optional)</span></label>
                  <input className="form-input" type="text" placeholder="e.g. Final, Semi-Final, Group Stage MD3" value={round} onChange={e => setRound(e.target.value)} />
                </div>
                <div className="form-group">
                  <label className="form-label">Leg</label>
                  <select className="form-select" value={leg} onChange={e => setLeg(e.target.value)}>
                    <option value="">Single match</option>
                    <option value="1">1st Leg</option>
                    <option value="2">2nd Leg</option>
                  </select>
                </div>
              </div>
            </div>
          )}

          {/* STEP 2 – Lineup */}
          {step === 2 && (
            <div>
              <div className="step-header"><div className="step-num">2</div><div className="step-title">Lineup — {starters.length}/11 starters · {subs.length} subs</div></div>
              {['GK','DEF','MID','ATT'].map(grp => {
                const grpPlayers = activePlayers.filter(p => POS_GROUP(p.position) === grp);
                return (
                  <div key={grp} style={{ marginBottom:16 }}>
                    <div style={{ fontSize:'.7rem', fontWeight:700, letterSpacing:'.08em', color:'var(--text-3)', textTransform:'uppercase', marginBottom:6 }}>{grp}</div>
                    <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
                      {grpPlayers.map(p => {
                        const inMatch = playersInMatch.includes(p.id);
                        const asStarter = lineup.find(l => l.player_id === p.id)?.is_starter;
                        const lp = lineup.find(l => l.player_id === p.id);
                        return (
                          <div key={p.id} style={{ display:'flex', flexDirection:'column', gap:4 }}>
                            <div
                              onClick={() => {
                                const willBeIn = !playersInMatch.includes(p.id);
                                togglePlayer(p.id, starters.length < 11);
                                if (willBeIn) setTimeout(() => setPositionPlayed(p.id, p.position), 0);
                              }}
                              style={{ display:'flex', alignItems:'center', gap:6, padding:'6px 10px', borderRadius:8, cursor:'pointer', border:`1px solid ${inMatch ? (asStarter ? 'var(--primary)' : 'var(--gold)') : 'var(--border-md)'}`, background: inMatch ? (asStarter ? 'var(--primary-dim)' : 'var(--gold-dim)') : 'var(--bg-surface)', transition:'all .15s' }}>
                              <span className={`position-badge pos-${p.position}`}>{p.position}</span>
                              <span style={{ fontSize:'.85rem', fontWeight: inMatch ? 600 : 400, color: inMatch ? 'var(--text-1)' : 'var(--text-2)' }}>{p.name}</span>
                              {inMatch && <span style={{ fontSize:'.7rem', color: asStarter ? 'var(--primary)' : 'var(--gold)' }}>{asStarter ? '11' : 'SUB'}</span>}
                            </div>
                            {inMatch && (
                              <div style={{ display:'flex', gap:4, flexWrap:'wrap' }}>
                                <select value={lp?.position_played || p.position} onChange={e => setPositionPlayed(p.id, e.target.value)} onClick={e=>e.stopPropagation()}
                                  style={{ padding:'3px 6px', background:'var(--bg-surface)', border:'1px solid var(--border-md)', borderRadius:4, color:'var(--text-1)', fontSize:'.72rem', flex:1, minWidth:60 }}>
                                  {POSITIONS.map(pos => <option key={pos} value={pos}>{pos}</option>)}
                                </select>
                                {!asStarter && (
                                  <input type="number" placeholder="Min on" min="1" max="120" value={lp?.sub_in_minute || ''} onChange={e => setSubMinute(p.id,'sub_in_minute',e.target.value)} style={{ width:60, padding:'3px 6px', background:'var(--bg-surface)', border:'1px solid var(--gold)', borderRadius:4, color:'var(--gold)', fontSize:'.75rem' }} title="Minute subbed on" />
                                )}
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}
            </div>
          )}

          {/* STEP 3 – Result & Events */}
          {step === 3 && (
            <div>
              <div className="step-header"><div className="step-num">3</div><div className="step-title">Result & Events</div></div>
              <div className="form-row" style={{marginBottom:12}}>
                <div className="form-group">
                  <label className="form-label">Goals Scored</label>
                  <input className="form-input" type="number" min="0" max="20" value={gf} onChange={e => setGf(e.target.value)} style={{fontSize:'1.3rem',fontWeight:700,textAlign:'center'}} />
                </div>
                <div className="form-group">
                  <label className="form-label">Goals Conceded</label>
                  <input className="form-input" type="number" min="0" max="20" value={ga} onChange={e => setGa(e.target.value)} style={{fontSize:'1.3rem',fontWeight:700,textAlign:'center'}} />
                </div>
              </div>
              <div style={{display:'flex',gap:20,marginBottom:16,flexWrap:'wrap',alignItems:'flex-start'}}>
                <label style={{display:'flex',alignItems:'center',gap:8,cursor:'pointer',fontSize:'.875rem',color:'var(--text-2)'}}>
                  <input type="checkbox" checked={wentToAet} onChange={e=>{setWentToAet(e.target.checked);if(!e.target.checked){setWentToPens(false);setPensFor('');setPensAgainst('');}}} />
                  Extra Time (AET)
                </label>
                {wentToAet && (
                  <label style={{display:'flex',alignItems:'center',gap:8,cursor:'pointer',fontSize:'.875rem',color:'var(--text-2)'}}>
                    <input type="checkbox" checked={wentToPens} onChange={e=>{setWentToPens(e.target.checked);if(!e.target.checked){setPensFor('');setPensAgainst('');}}} />
                    Decided by Penalties
                  </label>
                )}
                {wentToPens && (
                  <div style={{display:'flex',gap:8,alignItems:'center'}}>
                    <span style={{fontSize:'.8rem',color:'var(--text-3)'}}>Pens:</span>
                    <input type="number" min="0" max="20" placeholder="For" value={pensFor} onChange={e=>setPensFor(e.target.value)} style={{width:52,padding:'4px 6px',background:'var(--bg-surface)',border:'1px solid var(--primary)',borderRadius:6,color:'var(--primary)',fontWeight:700,fontSize:'.9rem',textAlign:'center'}} />
                    <span style={{color:'var(--text-3)'}}>–</span>
                    <input type="number" min="0" max="20" placeholder="Ag" value={pensAgainst} onChange={e=>setPensAgainst(e.target.value)} style={{width:52,padding:'4px 6px',background:'var(--bg-surface)',border:'1px solid var(--loss)',borderRadius:6,color:'var(--loss)',fontWeight:700,fontSize:'.9rem',textAlign:'center'}} />
                  </div>
                )}
              </div>
              <div className="divider" />
              <div style={{ display:'flex', gap:16, marginBottom:12, alignItems:'center' }}>
                <h4>Goals ({goals.length})</h4>
                <button className="btn btn-ghost btn-xs" onClick={addGoal}>+ Add Goal</button>
              </div>
              <div className="event-list">
                {goals.map((g, i) => (
                  <div key={i} className="event-item" style={{ flexWrap:'wrap', gap:8 }}>
                    <div className="minute">
                      <input type="number" placeholder="Min" min="1" max="120" value={g.minute||''} onChange={e=>updateGoal(i,'minute',e.target.value?parseInt(e.target.value):'')} style={{ width:48, padding:'3px 6px', background:'var(--bg-surface)', border:'1px solid var(--border-md)', borderRadius:4, color:'var(--text-1)', fontSize:'.8rem' }} />
                    </div>
                    <div style={{ display:'flex', gap:8, flexWrap:'wrap', flex:1, alignItems:'center' }}>
                      <select className="form-select" style={{ flex:1, minWidth:120 }} value={g.is_against ? 'against' : 'for'} onChange={e=>updateGoal(i,'is_against',e.target.value==='against')}>
                        <option value="for">Our Goal</option>
                        <option value="against">Opposition Goal</option>
                      </select>
                      {!g.is_against && (
                        <>
                          <select className="form-select" style={{ flex:1, minWidth:120 }} value={g.scorer_id||''} onChange={e=>updateGoal(i,'scorer_id',e.target.value?parseInt(e.target.value):null)}>
                            <option value="">— Scorer —</option>
                            {lineup.map(l => { const p = players.find(x => x.id===l.player_id); return p ? <option key={p.id} value={p.id}>{p.name}</option> : null; })}
                          </select>
                          <select className="form-select" style={{ flex:1, minWidth:120 }} value={g.assister_id||''} onChange={e=>updateGoal(i,'assister_id',e.target.value?parseInt(e.target.value):null)}>
                            <option value="">— Assist —</option>
                            {lineup.map(l => { const p = players.find(x => x.id===l.player_id); return p ? <option key={p.id} value={p.id}>{p.name}</option> : null; })}
                          </select>
                          <label style={{ display:'flex', alignItems:'center', gap:4, fontSize:'.8rem', color:'var(--text-2)', cursor:'pointer' }}>
                            <input type="checkbox" checked={g.is_penalty} onChange={e=>updateGoal(i,'is_penalty',e.target.checked)} /> Pen
                          </label>
                          <label style={{ display:'flex', alignItems:'center', gap:4, fontSize:'.8rem', color:'var(--text-2)', cursor:'pointer' }}>
                            <input type="checkbox" checked={g.is_own_goal} onChange={e=>updateGoal(i,'is_own_goal',e.target.checked)} /> OG
                          </label>
                        </>
                      )}
                    </div>
                    <button className="btn btn-danger btn-xs" onClick={()=>removeGoal(i)}>×</button>
                  </div>
                ))}
                {goals.length === 0 && <div style={{ color:'var(--text-3)', fontSize:'.85rem', padding:'8px 0' }}>No goals logged yet</div>}
              </div>

              <div className="divider" />

              <div style={{ display:'flex', gap:16, marginBottom:12, alignItems:'center' }}>
                <h4>Cards ({cards.length})</h4>
                <button className="btn btn-ghost btn-xs" onClick={addCard}>+ Add Card</button>
              </div>
              <div className="event-list">
                {cards.map((c, i) => (
                  <div key={i} className="event-item" style={{ gap:8 }}>
                    <input type="number" placeholder="Min" min="1" max="120" value={c.minute||''} onChange={e=>updateCard(i,'minute',e.target.value?parseInt(e.target.value):'')} style={{ width:52, padding:'5px 8px', background:'var(--bg-surface)', border:'1px solid var(--border-md)', borderRadius:4, color:'var(--text-1)', fontSize:'.85rem' }} />
                    <select className="form-select" style={{ flex:1 }} value={c.player_id||''} onChange={e=>updateCard(i,'player_id',e.target.value?parseInt(e.target.value):null)}>
                      <option value="">— Player —</option>
                      {lineup.map(l => { const p = players.find(x => x.id===l.player_id); return p ? <option key={p.id} value={p.id}>{p.name}</option> : null; })}
                    </select>
                    <select className="form-select" style={{ width:130 }} value={c.card_type} onChange={e=>updateCard(i,'card_type',e.target.value)}>
                      <option value="yellow">Yellow</option>
                      <option value="second_yellow">2nd Yellow</option>
                      <option value="red">Red</option>
                    </select>
                    <button className="btn btn-danger btn-xs" onClick={()=>removeCard(i)}>×</button>
                  </div>
                ))}
                {cards.length === 0 && <div style={{ color:'var(--text-3)', fontSize:'.85rem', padding:'8px 0' }}>No cards logged yet</div>}
              </div>
              <div className="divider" />
              <div className="form-group">
                <label className="form-label">Match Notes (optional)</label>
                <textarea className="form-textarea" value={notes} onChange={e => setNotes(e.target.value)} placeholder="Match notes, highlights…" />
              </div>
            </div>
          )}

          {/* STEP 4 – Ratings */}
          {step === 4 && (
            <div>
              <div className="step-header"><div className="step-num">4</div><div className="step-title">Player Ratings (1–10, 6.0 = average)</div></div>
              {lineup.length > 0 && (
                <div style={{marginBottom:12,display:'flex',alignItems:'center',gap:10}}>
                  <span style={{fontSize:'.8rem',color:'var(--text-3)'}}>Man of the Match:</span>
                  <select className="form-select" style={{flex:1,maxWidth:220}} value={motmId||''} onChange={e=>setMotmId(e.target.value?parseInt(e.target.value):null)}>
                    <option value="">— None —</option>
                    {[...starters,...subs].map(l=>{const p=players.find(x=>x.id===l.player_id);return p?<option key={p.id} value={p.id}>{p.name}</option>:null;})}
                  </select>
                </div>
              )}
              {lineup.length === 0 && <div style={{ color:'var(--text-3)', fontSize:'.875rem' }}>Add players in the Lineup step first.</div>}
              {[...starters.slice().sort((a,b)=>POSITIONS.indexOf((lineup.find(x=>x.player_id===a.player_id)?.position_played||players.find(x=>x.id===a.player_id)?.position)||'ST')-POSITIONS.indexOf((lineup.find(x=>x.player_id===b.player_id)?.position_played||players.find(x=>x.id===b.player_id)?.position)||'ST')), ...subs.slice().sort((a,b)=>POSITIONS.indexOf((lineup.find(x=>x.player_id===a.player_id)?.position_played||players.find(x=>x.id===a.player_id)?.position)||'ST')-POSITIONS.indexOf((lineup.find(x=>x.player_id===b.player_id)?.position_played||players.find(x=>x.id===b.player_id)?.position)||'ST'))].map(l => {
                const p = players.find(x => x.id === l.player_id);
                if (!p) return null;
                const rv = ratings[p.id] ?? 6.0;
                const pct = ((rv - 1) / 9) * 100;
                return (
                  <div key={p.id} className="rating-player-row">
                    <span className={`position-badge pos-${l.position_played||p.position}`}>{l.position_played||p.position}</span>
                    <span className="rating-player-name">{p.name} {!l.is_starter && <span style={{ fontSize:'.7rem', color:'var(--gold)' }}>SUB {l.sub_in_minute ? `${l.sub_in_minute}'` : ''}</span>}</span>
                    <div className="rating-slider-wrap" style={{ flex:1 }}>
                      <input type="range" className="rating-slider" min="1" max="10" step="0.1" value={rv}
                        style={{ '--pct': `${pct}%` }}
                        onChange={e => setRatings(r => ({...r, [p.id]: parseFloat(e.target.value)}))} />
                    </div>
                    <input
                      type="number" min="1" max="10" step="0.1"
                      value={rv}
                      onChange={e => {
                        const v = parseFloat(e.target.value);
                        if (!isNaN(v) && v >= 1 && v <= 10) setRatings(r => ({...r, [p.id]: Math.round(v * 10) / 10}));
                      }}
                      className={`rating-display ${ratingClass(rv)}`}
                      style={{ width:54, textAlign:'center', background:'var(--bg-surface)', border:'1px solid var(--border-md)', borderRadius:6, cursor:'text', fontWeight:800, fontSize:'1rem', padding:'2px 4px' }}
                    />
                  </div>
                );
              })}
            </div>
          )}
        </div>

        <div className="modal-footer">
          {step > 1 && <button className="btn btn-ghost" onClick={() => setStep(s => s - 1)}>← Back</button>}
          <div style={{flex:1}} />
          {/* Pre-match save: available on steps 1 & 2 */}
          {isPreMatch && (
            <button className="btn btn-gold" onClick={savePreMatch} disabled={saving || !opponentId || !competitionId} title="Save now, add result after the match">
              {saving ? 'Saving…' : '📋 Save Pre-Match'}
            </button>
          )}
          {step < 4 && <button className="btn btn-ghost" onClick={() => setStep(s => s + 1)}>Next →</button>}
          {step === 4 && (
            <button className="btn btn-primary" onClick={handleSave} disabled={saving || !opponentId || !competitionId}>
              {saving ? 'Saving…' : '✓ Complete Match'}
            </button>
          )}
          {step === 3 && (
            <button className="btn btn-primary" onClick={handleSave} disabled={saving || !opponentId || !competitionId}>
              {saving ? 'Saving…' : '✓ Save Result'}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Dashboard ─────────────────────────────────────────────────────────────────
function Dashboard({ save, season, seasons, players, opponents, competitions, onMatchLogged }) {
  const [stats, setStats] = React.useState(null);
  const [matches, setMatches] = React.useState([]);
  const [showMatchModal, setShowMatchModal] = React.useState(false);

  React.useEffect(() => {
    if (!season) return;
    Promise.all([
      api.get(`/api/seasons/${season.id}/stats`),
      api.get(`/api/seasons/${season.id}/matches`)
    ]).then(([s, m]) => { setStats(s); setMatches(m); });
  }, [season?.id]);

  if (!season) return (
    <div className="empty-state">
      <div className="empty-icon">🏆</div>
      <h4>No active season</h4>
      <p>Go to Settings → Season to start your first season</p>
    </div>
  );

  const form = matches.slice(0, 10).map(m => resultChar(m));
  const sm = stats?.summary || {};
  const byComp = stats?.by_competition || [];
  const compMap = {};
  competitions.forEach(c => compMap[c.id] = c);
  const topScorers = [...(stats?.player_stats || [])].sort((a,b) => b.goals - a.goals).slice(0,5);
  const topRated = [...(stats?.player_stats || [])].filter(p => p.appearances >= 3).sort((a,b) => (b.avg_rating||0) - (a.avg_rating||0)).slice(0,5);
  const monthly = stats?.monthly || [];
  const recentMatches = matches.slice(0,5);

  return (
    <div>
      <div className="page-header">
        <div>
          <h2>{save.club_name}</h2>
          <small>{season.year_label} {season.league_name ? `· ${season.league_name}` : ''}</small>
        </div>
        <button className="btn btn-primary" onClick={() => setShowMatchModal(true)}>+ Log Match</button>
      </div>

      {/* Form Strip */}
      <div className="card mb-20" style={{ padding:'14px 20px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:12, overflowX:'auto' }}>
          <div style={{ fontSize:'.75rem', fontWeight:700, color:'var(--text-3)', letterSpacing:'.06em', textTransform:'uppercase', flexShrink:0 }}>Form</div>
          <div className="form-strip" style={{ flexShrink:0 }}>
            {form.length === 0 ? <span style={{ color:'var(--text-3)', fontSize:'.85rem' }}>No matches yet</span> :
              [...form].reverse().map((r,i) => <div key={i} className={`form-box ${r}`}>{r}</div>)
            }
          </div>
          {sm.played > 0 && (
            <div style={{ marginLeft:'auto', display:'flex', gap:14, flexShrink:0 }}>
              <div style={{ textAlign:'center' }}><div style={{ fontWeight:800, color:'var(--win)' }}>{sm.wins}</div><div style={{ fontSize:'.65rem', color:'var(--text-3)' }}>W</div></div>
              <div style={{ textAlign:'center' }}><div style={{ fontWeight:800, color:'var(--draw)' }}>{sm.draws}</div><div style={{ fontSize:'.65rem', color:'var(--text-3)' }}>D</div></div>
              <div style={{ textAlign:'center' }}><div style={{ fontWeight:800, color:'var(--loss)' }}>{sm.losses}</div><div style={{ fontSize:'.65rem', color:'var(--text-3)' }}>L</div></div>
              <div style={{ textAlign:'center' }}><div style={{ fontWeight:800, color:'var(--primary)' }}>{sm.goals_for}</div><div style={{ fontSize:'.65rem', color:'var(--text-3)' }}>GF</div></div>
              <div style={{ textAlign:'center' }}><div style={{ fontWeight:800, color:'var(--loss)' }}>{sm.goals_against}</div><div style={{ fontSize:'.65rem', color:'var(--text-3)' }}>GA</div></div>
              <div style={{ textAlign:'center' }}><div style={{ fontWeight:800, color:'var(--text-2)' }}>{sm.goals_for - sm.goals_against}</div><div style={{ fontSize:'.65rem', color:'var(--text-3)' }}>GD</div></div>
              <div style={{ textAlign:'center' }}><div style={{ fontWeight:800, color:'var(--gold)' }}>{sm.clean_sheets}</div><div style={{ fontSize:'.65rem', color:'var(--text-3)' }}>CS</div></div>
            </div>
          )}
        </div>
      </div>

      <div className="grid-2" style={{ marginBottom:20 }}>
        {/* W/D/L Donut */}
        <div className="card">
          <div className="card-title">Results Breakdown</div>
          {sm.played > 0 ? (
            <DonutChart
              labels={['Wins','Draws','Losses']}
              data={[sm.wins, sm.draws, sm.losses]}
              colors={['#22c55e','#eab308','#ef4444']}
              height={200}
            />
          ) : <div className="empty-state" style={{ padding:'30px 0' }}><p>No matches yet</p></div>}
        </div>

        {/* Monthly bar */}
        <div className="card">
          <div className="card-title">Goals by Month</div>
          {monthly.length > 0 ? (
            <BarChart
              labels={monthly.map(m => m.month)}
              datasets={[
                { label:'Scored', data: monthly.map(m => m.gf), backgroundColor:'rgba(31,217,160,.7)', borderRadius:4 },
                { label:'Conceded', data: monthly.map(m => m.ga), backgroundColor:'rgba(239,68,68,.5)', borderRadius:4 }
              ]}
              height={200}
            />
          ) : <div className="empty-state" style={{ padding:'30px 0' }}><p>No match data yet</p></div>}
        </div>
      </div>

      <div className="grid-2" style={{ marginBottom:20 }}>
        {/* Top Scorers */}
        <div className="card">
          <div className="card-title">Top Scorers</div>
          {topScorers.length === 0 ? <div style={{ color:'var(--text-3)', fontSize:'.875rem' }}>No goals logged yet</div> :
            topScorers.map((p, i) => (
              <div key={p.player_id} style={{ display:'flex', alignItems:'center', gap:10, padding:'7px 0', borderBottom: i < topScorers.length-1 ? '1px solid var(--border)' : 'none' }}>
                <span style={{ fontWeight:800, color:'var(--text-3)', width:18, textAlign:'right', fontSize:'.85rem' }}>{i+1}</span>
                <span className={`position-badge pos-${p.position}`}>{p.position}</span>
                <span style={{ flex:1, fontWeight:500 }}>{p.name}</span>
                <span style={{ fontWeight:800, color:'var(--primary)', fontSize:'1.05rem', minWidth:20, textAlign:'right' }}>{p.goals}</span>
                <span style={{ color:'var(--text-3)', fontSize:'.75rem' }}>G</span>
                <span style={{ fontWeight:700, color:'var(--gold)', fontSize:'.9rem', minWidth:20, textAlign:'right' }}>{p.assists}</span>
                <span style={{ color:'var(--text-3)', fontSize:'.75rem' }}>A</span>
              </div>
            ))
          }
        </div>

        {/* Top Rated */}
        <div className="card">
          <div className="card-title">Top Rated (min. 3 apps)</div>
          {topRated.length === 0 ? <div style={{ color:'var(--text-3)', fontSize:'.875rem' }}>Not enough data yet</div> :
            topRated.map((p, i) => (
              <div key={p.player_id} style={{ display:'flex', alignItems:'center', gap:10, padding:'7px 0', borderBottom: i < topRated.length-1 ? '1px solid var(--border)' : 'none' }}>
                <span style={{ fontWeight:800, color:'var(--text-3)', width:18, textAlign:'right', fontSize:'.85rem' }}>{i+1}</span>
                <span className={`position-badge pos-${p.position}`}>{p.position}</span>
                <span style={{ flex:1, fontWeight:500 }}>{p.name}</span>
                <span className={`rating-val ${ratingClass(p.avg_rating)}`}>{fmtRating(p.avg_rating)}</span>
                <span style={{ color:'var(--text-3)', fontSize:'.75rem' }}>avg</span>
                <span style={{ color:'var(--text-2)', fontSize:'.75rem', marginLeft:6 }}>{p.appearances} apps</span>
              </div>
            ))
          }
        </div>
      </div>

      {/* Competition breakdown */}
      {byComp.length > 0 && (
        <div className="card mb-20">
          <div className="card-title">By Competition</div>
          <div className="table-wrap">
            <table>
              <thead><tr><th>Competition</th><th>P</th><th>W</th><th>D</th><th>L</th><th>GF</th><th>GA</th><th>GD</th></tr></thead>
              <tbody>
                {byComp.map(c => (
                  <tr key={c.competition_id}>
                    <td>{compMap[c.competition_id]?.name || '—'}</td>
                    <td className="num">{c.played}</td>
                    <td className="num" style={{ color:'var(--win)' }}>{c.wins}</td>
                    <td className="num" style={{ color:'var(--draw)' }}>{c.draws}</td>
                    <td className="num" style={{ color:'var(--loss)' }}>{c.losses}</td>
                    <td className="num">{c.gf}</td>
                    <td className="num">{c.ga}</td>
                    <td className="num" style={{ color: c.gf-c.ga >= 0 ? 'var(--win)' : 'var(--loss)' }}>{c.gf-c.ga > 0 ? '+' : ''}{c.gf-c.ga}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Recent Matches */}
      <div className="card">
        <div className="card-title" style={{ marginBottom:14 }}>Recent Matches</div>
        {recentMatches.length === 0 ? <div className="empty-state" style={{ padding:'24px 0' }}><p>No matches logged yet</p></div> :
          recentMatches.map(m => (
            <div key={m.id} className="match-row">
              <div className={`match-score ${resultClass(m)}`}>{m.goals_for}–{m.goals_against}</div>
              <div className="match-info">
                <div className="match-opponent">{m.is_home ? '' : '@ '}{m.opponent_name}</div>
                <div className="match-meta">
                  <span className={`badge badge-${m.is_home ? 'home' : 'away'}`}>{m.is_home ? 'H' : 'A'}</span>
                  <span className="badge badge-comp">{m.competition_name}</span>
                  {m.match_date && <span style={{ fontSize:'.75rem', color:'var(--text-3)' }}>{m.match_date}</span>}
                </div>
              </div>
              <span className={`badge badge-${resultClass(m)}`}>{resultChar(m)}</span>
            </div>
          ))
        }
      </div>

      {showMatchModal && (
        <MatchModal saveId={save.id} seasonId={season.id} players={players} opponents={opponents} competitions={competitions}
          onSave={() => { setShowMatchModal(false); onMatchLogged(); }} onClose={() => setShowMatchModal(false)} />
      )}
    </div>
  );
}

// ── Matches Page ──────────────────────────────────────────────────────────────
function MatchesPage({ save, season, players, opponents, competitions, onMatchLogged }) {
  const [matches, setMatches] = React.useState([]);
  const [filter, setFilter] = React.useState({ comp:'', result:'' });
  const [showModal, setShowModal] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [viewMatch, setViewMatch] = React.useState(null);

  const load = () => season && api.get(`/api/seasons/${season.id}/matches`).then(setMatches);
  React.useEffect(() => { load(); }, [season?.id]);

  const filtered = matches.filter(m => {
    if (filter.comp && m.competition_id !== parseInt(filter.comp)) return false;
    if (filter.result === 'W' && !(m.goals_for > m.goals_against)) return false;
    if (filter.result === 'D' && !(m.goals_for === m.goals_against)) return false;
    if (filter.result === 'L' && !(m.goals_for < m.goals_against)) return false;
    return true;
  });

  const deleteMatch = async id => {
    if (!confirm('Delete this match?')) return;
    await api.del(`/api/matches/${id}`);
    load(); onMatchLogged();
  };

  const openEdit = async id => {
    const m = await api.get(`/api/matches/${id}`);
    setEditing(m);
    // Jump straight to result step when completing a pre-match
    if (m.status === 'pending') setEditStartStep(3);
    else setEditStartStep(1);
  };
  const [editStartStep, setEditStartStep] = React.useState(1);

  const openView = async id => {
    const m = await api.get(`/api/matches/${id}`);
    setViewMatch(m);
  };

  return (
    <div>
      <div className="page-header">
        <div><h2>Matches</h2><small>{season?.year_label} · {matches.length} played</small></div>
        <button className="btn btn-primary" onClick={() => setShowModal(true)}>+ Log Match</button>
      </div>

      {/* Filters */}
      <div className="flex gap-8 mb-16" style={{ flexWrap:'wrap' }}>
        <select className="form-select" style={{ width:180 }} value={filter.comp} onChange={e=>setFilter(f=>({...f,comp:e.target.value}))}>
          <option value="">All Competitions</option>
          {competitions.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
        </select>
        <select className="form-select" style={{ width:140 }} value={filter.result} onChange={e=>setFilter(f=>({...f,result:e.target.value}))}>
          <option value="">All Results</option>
          <option value="W">Wins</option>
          <option value="D">Draws</option>
          <option value="L">Losses</option>
        </select>
        {(filter.comp || filter.result) && <button className="btn btn-ghost btn-sm" onClick={()=>setFilter({comp:'',result:''})}>Clear</button>}
      </div>

      {filtered.length === 0 ? (
        <div className="empty-state"><div className="empty-icon">⚽</div><h4>No matches found</h4></div>
      ) : (
        filtered.map(m => (
          <div key={m.id} className="match-row" onClick={() => m.status === 'pending' ? openEdit(m.id) : openView(m.id)}>
            {m.status === 'pending'
              ? <div style={{minWidth:64,textAlign:'center',fontSize:'.75rem',fontWeight:800,color:'var(--gold)',letterSpacing:'.04em'}}>PRE</div>
              : <div className={`match-score ${resultClass(m)}`}>{m.goals_for}–{m.goals_against}</div>
            }
            <div className="match-info">
              <div className="match-opponent">{m.is_home ? '' : '@ '}{m.opponent_name}</div>
              <div className="match-meta">
                <span className={`badge badge-${m.is_home?'home':'away'}`}>{m.is_home?'Home':'Away'}</span>
                <span className="badge badge-comp">{m.competition_name}</span>
                {m.leg && <span className="badge" style={{background:'var(--bg-elevated)',color:'var(--text-2)',fontSize:'.68rem'}}>{m.leg === 1 ? '1L' : '2L'}</span>}
                {m.round && <span style={{fontSize:'.72rem',color:'var(--text-3)'}}>{m.round}</span>}
                {!!m.went_to_aet && !m.went_to_pens && <span className="badge" style={{background:'rgba(31,217,160,.1)',color:'var(--primary)',fontSize:'.68rem'}}>AET</span>}
                {!!m.went_to_pens && <span className="badge" style={{background:'rgba(245,166,35,.1)',color:'var(--gold)',fontSize:'.68rem'}}>Pens {m.pens_for}–{m.pens_against}</span>}
                {m.match_date && <span style={{fontSize:'.75rem',color:'var(--text-3)'}}>{m.match_date}</span>}
                {m.status === 'pending' && <span className="badge badge-pending">Pre-Match</span>}
              </div>
            </div>
            {m.status !== 'pending' && <span className={`badge badge-${resultClass(m)}`}>{resultChar(m)}</span>}
            <div className="flex gap-8" onClick={e=>e.stopPropagation()}>
              <button className="btn btn-ghost btn-xs" onClick={()=>openEdit(m.id)}>Edit</button>
              <button className="btn btn-danger btn-xs" onClick={()=>deleteMatch(m.id)}>Del</button>
            </div>
          </div>
        ))
      )}

      {showModal && <MatchModal saveId={save.id} seasonId={season.id} players={players} opponents={opponents} competitions={competitions} onSave={()=>{setShowModal(false);load();onMatchLogged();}} onClose={()=>setShowModal(false)} />}
      {editing && <MatchModal saveId={save.id} seasonId={season.id} players={players} opponents={opponents} competitions={competitions} existing={editing} initialStep={editStartStep} onSave={()=>{setEditing(null);load();onMatchLogged();}} onClose={()=>setEditing(null)} />}

      {viewMatch && (
        <div className="modal-overlay" onClick={e=>e.target===e.currentTarget&&setViewMatch(null)}>
          <div className="modal">
            <div className="modal-header">
              <div>
                <h3>
                  {viewMatch.is_home ? save.club_name : viewMatch.opponent_name}
                  {' '}{viewMatch.goals_for}–{viewMatch.goals_against}{' '}
                  {viewMatch.is_home ? viewMatch.opponent_name : save.club_name}
                  {!!viewMatch.went_to_aet && <span style={{fontSize:'.75rem',fontWeight:400,color:'var(--text-3)',marginLeft:6}}>AET</span>}
                </h3>
                {!!viewMatch.went_to_pens && (
                  <div style={{fontSize:'.85rem',color:'var(--gold)',fontWeight:700,marginBottom:4}}>
                    {viewMatch.pens_for > viewMatch.pens_against ? 'Won' : 'Lost'} {viewMatch.pens_for}–{viewMatch.pens_against} on penalties
                  </div>
                )}
                <div className="flex gap-8 mt-8" style={{flexWrap:'wrap'}}>
                  <span className={`badge badge-${viewMatch.is_home?'home':'away'}`}>{viewMatch.is_home?'Home':'Away'}</span>
                  <span className="badge badge-comp">{viewMatch.competition_name}</span>
                  {viewMatch.leg && <span className="badge" style={{background:'var(--bg-elevated)',color:'var(--text-2)'}}>{viewMatch.leg === 1 ? '1st Leg' : '2nd Leg'}</span>}
                  {viewMatch.round && <span style={{fontSize:'.8rem',color:'var(--text-2)',fontStyle:'italic'}}>{viewMatch.round}</span>}
                  {viewMatch.match_date && <span style={{fontSize:'.8rem',color:'var(--text-2)'}}>{viewMatch.match_date}</span>}
                  {viewMatch.motm_player_name && <span style={{fontSize:'.8rem',color:'var(--gold)',fontWeight:600}}>⭐ {viewMatch.motm_player_name}</span>}
                </div>
              </div>
              <button className="btn-close" onClick={()=>setViewMatch(null)}>×</button>
            </div>
            <div className="modal-body">
              {viewMatch.goals?.filter(g=>!g.is_against).length > 0 && (
                <div style={{marginBottom:16}}>
                  <div className="card-title">Goals</div>
                  {viewMatch.goals.filter(g=>!g.is_against).map((g,i)=>(
                    <div key={i} style={{display:'flex',gap:10,alignItems:'center',padding:'5px 0',borderBottom:'1px solid var(--border)',fontSize:'.875rem'}}>
                      <span style={{color:'var(--text-3)',minWidth:28}}>{g.minute > 0 ? `${g.minute}'` : '—'}</span>
                      <span style={{fontWeight:600}}>{g.scorer_name || 'Unknown'}</span>
                      {g.assister_name && <span style={{color:'var(--text-2)'}}>↳ {g.assister_name}</span>}
                      {!!g.is_penalty && <span className="badge" style={{background:'var(--primary-dim)',color:'var(--primary)',fontSize:'.65rem'}}>PEN</span>}
                      {!!g.is_own_goal && <span className="badge" style={{background:'rgba(239,68,68,.15)',color:'var(--loss)',fontSize:'.65rem'}}>OG</span>}
                    </div>
                  ))}
                </div>
              )}
              {viewMatch.cards?.length > 0 && (
                <div style={{marginBottom:16}}>
                  <div className="card-title">Cards</div>
                  <div style={{display:'flex',flexWrap:'wrap',gap:8}}>
                    {viewMatch.cards.map((c,i)=>(
                      <span key={i} style={{fontSize:'.8rem',padding:'3px 8px',borderRadius:4,background:c.card_type==='yellow'?'rgba(234,179,8,.15)':'rgba(239,68,68,.15)',color:c.card_type==='yellow'?'var(--yellow-card)':'var(--red-card)',border:`1px solid ${c.card_type==='yellow'?'rgba(234,179,8,.3)':'rgba(239,68,68,.3)'}`}}>
                        {c.card_type==='yellow'?'🟨':'🟥'} {c.player_name} {c.minute ? `${c.minute}'` : ''}
                      </span>
                    ))}
                  </div>
                </div>
              )}
              {viewMatch.players?.length > 0 && (
                <div>
                  <div className="card-title">Player Ratings</div>
                  <div className="table-wrap">
                    <table>
                      <thead><tr><th>Player</th><th>Pos</th><th>Role</th><th>Rating</th></tr></thead>
                      <tbody>
                        {[...viewMatch.players].sort((a,b) => {
                          if (a.is_starter !== b.is_starter) return b.is_starter - a.is_starter;
                          if (!a.is_starter) return (a.sub_in_minute||999) - (b.sub_in_minute||999);
                          return POSITIONS.indexOf(a.position_played||a.position) - POSITIONS.indexOf(b.position_played||b.position);
                        }).map(p=>(
                          <tr key={p.player_id}>
                            <td>{p.player_name}</td>
                            <td><span className={`position-badge pos-${p.position_played||p.position}`}>{p.position_played||p.position}</span></td>
                            <td style={{color: p.is_starter ? 'var(--primary)' : 'var(--gold)', fontSize:'.8rem', fontWeight:600}}>{p.is_starter ? 'Starter' : `Sub${p.sub_in_minute ? ` ${p.sub_in_minute}'` : ''}`}</td>
                            <td className={`rating-val ${ratingClass(p.rating)}`}>{p.rating ? fmtRating(p.rating) : '—'}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              )}
              {viewMatch.notes && <div style={{marginTop:16, padding:12, background:'var(--bg-surface)', borderRadius:6, fontSize:'.875rem', color:'var(--text-2)'}}>{viewMatch.notes}</div>}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── Player Modal ──────────────────────────────────────────────────────────────
function PlayerDetailModal({ player, saveId, onClose }) {
  const [career, setCareer] = React.useState([]);
  const [perf, setPerf] = React.useState({ by_position: [], recent: [] });
  const [perfTab, setPerfTab] = React.useState('career');

  React.useEffect(() => {
    api.get(`/api/players/${player.id}/career`).then(setCareer);
    api.get(`/api/players/${player.id}/performance`).then(setPerf);
  }, [player.id]);

  const totalGoals   = career.reduce((s,r)=>s+r.goals,0);
  const totalAssists = career.reduce((s,r)=>s+r.assists,0);
  const totalApps    = career.reduce((s,r)=>s+r.appearances,0);
  const overallAvgRating = career.length ? career.reduce((s,r)=>s+(r.avg_rating||0),0) / career.filter(r=>r.avg_rating).length : null;

  // Recent form: last 5 rated matches
  const last5 = perf.recent.slice(-5);
  const last5Avg = last5.length ? last5.reduce((s,r)=>s+r.rating,0)/last5.length : null;

  return (
    <div className="modal-overlay" onClick={e=>e.target===e.currentTarget&&onClose()}>
      <div className="modal modal-lg">
        <div className="modal-header">
          <div style={{display:'flex',gap:16,alignItems:'center'}}>
            <div className={`overall-badge ${overallClass(player.overall_rating)}`}>{player.overall_rating}</div>
            <div>
              <h3>{player.name}</h3>
              <div style={{display:'flex',gap:8,marginTop:4,alignItems:'center',flexWrap:'wrap'}}>
                <span className={`position-badge pos-${player.position}`}>{player.position}</span>
                {player.nationality && <span style={{fontSize:'.8rem',color:'var(--text-2)'}}>{player.nationality}</span>}
                {player.age && <span style={{fontSize:'.8rem',color:'var(--text-2)'}}>Age {player.age}</span>}
                {overallAvgRating && <span style={{fontSize:'.8rem',color:'var(--text-2)'}}>Career avg: <span className={`rating-val ${ratingClass(overallAvgRating)}`}>{fmtRating(overallAvgRating)}</span></span>}
                {last5Avg && <span style={{fontSize:'.8rem',color:'var(--text-2)'}}>Last 5: <span className={`rating-val ${ratingClass(last5Avg)}`}>{fmtRating(last5Avg)}</span></span>}
              </div>
            </div>
          </div>
          <button className="btn-close" onClick={onClose}>×</button>
        </div>
        <div className="modal-body" style={{maxHeight:'72vh',overflowY:'auto'}}>

          {/* Summary stats */}
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:20}}>
            {[['Apps',totalApps,'var(--text-1)'],['Goals',totalGoals,'var(--primary)'],['Assists',totalAssists,'var(--gold)'],['G+A',totalGoals+totalAssists,'var(--win)']].map(([l,v,c])=>(
              <div key={l} className="stat-card" style={{textAlign:'center',padding:14}}>
                <div className="stat-val" style={{color:c,fontSize:'1.8rem'}}>{v}</div>
                <div className="stat-lbl">{l}</div>
              </div>
            ))}
          </div>

          <div className="tabs">
            {[['career','Career Stats'],['form','Match Ratings'],['positions','By Position']].map(([k,l])=>(
              <button key={k} className={`tab-btn${perfTab===k?' active':''}`} onClick={()=>setPerfTab(k)}>{l}</button>
            ))}
          </div>

          {/* Career tab */}
          {perfTab === 'career' && (
            <div>
              {career.length > 1 && (
                <div style={{marginBottom:20}}>
                  <div className="card-title">Goals & Assists per Season</div>
                  <BarChart
                    labels={career.map(r=>r.year_label)}
                    datasets={[
                      {label:'Goals',data:career.map(r=>r.goals),backgroundColor:'rgba(31,217,160,.7)',borderRadius:4},
                      {label:'Assists',data:career.map(r=>r.assists),backgroundColor:'rgba(245,166,35,.6)',borderRadius:4}
                    ]}
                    height={180}
                  />
                </div>
              )}
              {career.filter(r=>r.season_rating).length > 1 && (
                <div style={{marginBottom:20}}>
                  <div className="card-title">Overall Rating Progression</div>
                  <LineChart
                    labels={career.map(r=>r.year_label)}
                    datasets={[{label:'OVR',data:career.map(r=>r.season_rating||null),borderColor:'#f5a623',backgroundColor:'rgba(245,166,35,.1)',tension:.4,fill:true}]}
                    height={150}
                  />
                </div>
              )}
              {career.length > 0 && (
                <div className="table-wrap">
                  <table>
                    <thead><tr><th>Season</th><th>Apps</th><th>Starts</th><th>Goals</th><th>Assists</th><th>Avg Rating</th><th>OVR</th></tr></thead>
                    <tbody>
                      {career.map(r=>(
                        <tr key={r.id}>
                          <td style={{fontWeight:600}}>{r.year_label}</td>
                          <td className="num">{r.appearances}</td>
                          <td className="num">{r.starts}</td>
                          <td className="num" style={{color:'var(--primary)',fontWeight:700}}>{r.goals}</td>
                          <td className="num" style={{color:'var(--gold)',fontWeight:700}}>{r.assists}</td>
                          <td className="num"><span className={`rating-val ${ratingClass(r.avg_rating)}`}>{r.avg_rating ? fmtRating(r.avg_rating) : '—'}</span></td>
                          <td className="num">{r.season_rating ? <span className={`overall-badge ${overallClass(r.season_rating)}`} style={{width:28,height:26,fontSize:'.78rem'}}>{r.season_rating}</span> : '—'}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
              {career.length === 0 && <div style={{color:'var(--text-3)',fontSize:'.875rem',padding:'16px 0'}}>No season data yet.</div>}
            </div>
          )}

          {/* Match Ratings tab */}
          {perfTab === 'form' && (
            <div>
              {perf.recent.length >= 3 && (
                <div style={{marginBottom:20}}>
                  <div className="card-title">Match Rating Trend (last {perf.recent.length} rated apps)</div>
                  <LineChart
                    labels={perf.recent.map((r,i) => r.match_date || `#${i+1}`)}
                    datasets={[{
                      label:'Rating',
                      data: perf.recent.map(r=>r.rating),
                      borderColor:'#1fd9a0',
                      backgroundColor:'rgba(31,217,160,.08)',
                      tension:.3, fill:true,
                      pointBackgroundColor: perf.recent.map(r => r.rating >= 7.5 ? '#22c55e' : r.rating >= 6.5 ? '#eab308' : '#ef4444'),
                      pointRadius: 5
                    },{
                      label:'Avg (6.0)',
                      data: perf.recent.map(()=>6.0),
                      borderColor:'rgba(125,147,178,.3)',
                      borderDash:[4,4],
                      pointRadius:0,
                      tension:0
                    }]}
                    height={200}
                  />
                </div>
              )}
              {/* Last 5 quick summary */}
              {last5.length > 0 && (
                <div style={{display:'flex',gap:8,marginBottom:16,flexWrap:'wrap'}}>
                  {last5.map((r,i)=>(
                    <div key={i} style={{flex:1,minWidth:80,textAlign:'center',padding:'10px 8px',borderRadius:8,background:'var(--bg-surface)',border:'1px solid var(--border)'}}>
                      <div className={`rating-val ${ratingClass(r.rating)}`} style={{fontSize:'1.3rem',fontWeight:800}}>{fmtRating(r.rating)}</div>
                      <div style={{fontSize:'.7rem',color:'var(--text-3)',marginTop:3}}>{r.opponent}</div>
                      {r.position_played && <div style={{marginTop:3}}><span className={`position-badge pos-${r.position_played}`}>{r.position_played}</span></div>}
                    </div>
                  ))}
                </div>
              )}
              <div className="table-wrap">
                <table>
                  <thead><tr><th>Date</th><th>Opponent</th><th>Position</th><th>Role</th><th>Rating</th><th>Season</th></tr></thead>
                  <tbody>
                    {[...perf.recent].reverse().map((r,i)=>(
                      <tr key={i}>
                        <td style={{color:'var(--text-3)',fontSize:'.82rem'}}>{r.match_date||'—'}</td>
                        <td style={{fontWeight:500}}>{r.opponent}</td>
                        <td>{r.position_played ? <span className={`position-badge pos-${r.position_played}`}>{r.position_played}</span> : '—'}</td>
                        <td style={{fontSize:'.8rem',color:r.is_starter?'var(--primary)':'var(--gold)'}}>{r.is_starter?'Starter':'Sub'}</td>
                        <td><span className={`rating-val ${ratingClass(r.rating)}`} style={{fontSize:'1rem',fontWeight:800}}>{fmtRating(r.rating)}</span></td>
                        <td style={{color:'var(--text-3)',fontSize:'.8rem'}}>{r.year_label}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              {perf.recent.length === 0 && <div style={{color:'var(--text-3)',fontSize:'.875rem',padding:'16px 0'}}>No rated appearances yet — log matches with ratings to see this data.</div>}
            </div>
          )}

          {/* By Position tab */}
          {perfTab === 'positions' && (
            <div>
              {perf.by_position.length > 0 ? (
                <>
                  {perf.by_position.length > 1 && (
                    <div style={{marginBottom:20}}>
                      <div className="card-title">Avg Rating by Position Played</div>
                      <BarChart
                        horizontal={true}
                        labels={perf.by_position.map(p=>p.position)}
                        datasets={[{
                          label:'Avg Rating',
                          data:perf.by_position.map(p=>parseFloat(p.avg_rating.toFixed(2))),
                          backgroundColor: perf.by_position.map(p => p.avg_rating >= 7.5 ? 'rgba(34,197,94,.7)' : p.avg_rating >= 6.5 ? 'rgba(234,179,8,.7)' : 'rgba(239,68,68,.6)'),
                          borderRadius:4
                        }]}
                        height={Math.max(120, perf.by_position.length * 48)}
                      />
                    </div>
                  )}
                  <div className="table-wrap">
                    <table>
                      <thead><tr><th>Position</th><th>Apps</th><th>Avg Rating</th><th>Min</th><th>Max</th></tr></thead>
                      <tbody>
                        {perf.by_position.map((p,i)=>(
                          <tr key={i}>
                            <td><span className={`position-badge pos-${p.position}`}>{p.position}</span></td>
                            <td className="num">{p.apps}</td>
                            <td><span className={`rating-val ${ratingClass(p.avg_rating)}`} style={{fontSize:'1.05rem',fontWeight:800}}>{fmtRating(p.avg_rating)}</span></td>
                            <td className="num" style={{color:'var(--loss)'}}>{fmtRating(p.min_rating)}</td>
                            <td className="num" style={{color:'var(--win)'}}>{fmtRating(p.max_rating)}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </>
              ) : (
                <div style={{color:'var(--text-3)',fontSize:'.875rem',padding:'16px 0'}}>
                  No position data yet — set the "Position Played" in the lineup builder when logging matches to track this.
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Player Form Modal ─────────────────────────────────────────────────────────
function PlayerFormModal({ saveId, player, onSave, onClose }) {
  const [form, setForm] = React.useState(player || { name:'', position:'ST', nationality:'', overall_rating:70, age:'', is_active:true });
  const save = async () => {
    const data = {...form, overall_rating: parseInt(form.overall_rating), age: form.age ? parseInt(form.age) : null};
    if (player) await api.put(`/api/players/${player.id}`, data);
    else await api.post(`/api/saves/${saveId}/players`, data);
    onSave();
  };
  return (
    <div className="modal-overlay" onClick={e=>e.target===e.currentTarget&&onClose()}>
      <div className="modal modal-sm">
        <div className="modal-header"><h3>{player ? 'Edit Player' : 'Add Player'}</h3><button className="btn-close" onClick={onClose}>×</button></div>
        <div className="modal-body">
          <div className="form-group"><label className="form-label">Name</label><input className="form-input" value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} autoFocus /></div>
          <div className="form-row">
            <div className="form-group">
              <label className="form-label">Position</label>
              <select className="form-select" value={form.position} onChange={e=>setForm(f=>({...f,position:e.target.value}))}>
                {POSITIONS.map(p=><option key={p} value={p}>{p}</option>)}
              </select>
            </div>
            <div className="form-group">
              <label className="form-label">Overall Rating (1–99)</label>
              <input className="form-input" type="number" min="1" max="99" value={form.overall_rating} onChange={e=>setForm(f=>({...f,overall_rating:e.target.value}))} />
            </div>
          </div>
          <div className="form-row">
            <div className="form-group"><label className="form-label">Nationality</label><input className="form-input" value={form.nationality||''} onChange={e=>setForm(f=>({...f,nationality:e.target.value}))} /></div>
            <div className="form-group"><label className="form-label">Age</label><input className="form-input" type="number" min="15" max="45" value={form.age||''} onChange={e=>setForm(f=>({...f,age:e.target.value}))} /></div>
          </div>
          {player && <div className="form-group"><label style={{display:'flex',alignItems:'center',gap:8,cursor:'pointer'}}><input type="checkbox" checked={!!form.is_active} onChange={e=>setForm(f=>({...f,is_active:e.target.checked}))} /><span className="form-label" style={{margin:0}}>Active (in squad)</span></label></div>}
        </div>
        <div className="modal-footer">
          <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={save} disabled={!form.name.trim()}>Save</button>
        </div>
      </div>
    </div>
  );
}

// ── Squad Page ────────────────────────────────────────────────────────────────
function SquadPage({ save, season, players, onPlayersChanged }) {
  const [stats, setStats] = React.useState({});
  const [filter, setFilter] = React.useState('All');
  const [showAdd, setShowAdd] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [viewing, setViewing] = React.useState(null);
  const [sortBy, setSortBy] = React.useState('overall_rating');
  const [sortDir, setSortDir] = React.useState('desc');

  React.useEffect(() => {
    if (!season) return;
    api.get(`/api/seasons/${season.id}/stats`).then(s => {
      const m = {};
      (s.player_stats||[]).forEach(p => m[p.player_id] = p);
      setStats(m);
    });
  }, [season?.id, players.length]);

  const POS_ORDER = ['GK','CB','LB','RB','LWB','RWB','CDM','CM','CAM','LM','RM','LW','RW','CF','ST'];
  const handleSort = key => {
    if (sortBy === key) setSortDir(d => d === 'desc' ? 'asc' : 'desc');
    else { setSortBy(key); setSortDir(key === 'name' || key === 'position' ? 'asc' : 'desc'); }
  };

  const groups = ['All','GK','DEF','MID','ATT'];
  const filtered = players
    .filter(p => filter === 'All' || POS_GROUP(p.position) === filter)
    .sort((a,b) => {
      let cmp = 0;
      if (sortBy === 'overall_rating') cmp = a.overall_rating - b.overall_rating;
      else if (sortBy === 'goals')       cmp = (stats[a.id]?.goals||0) - (stats[b.id]?.goals||0);
      else if (sortBy === 'assists')     cmp = (stats[a.id]?.assists||0) - (stats[b.id]?.assists||0);
      else if (sortBy === 'avg_rating')  cmp = (stats[a.id]?.avg_rating||0) - (stats[b.id]?.avg_rating||0);
      else if (sortBy === 'last5_avg')   cmp = (stats[a.id]?.last5_avg||0) - (stats[b.id]?.last5_avg||0);
      else if (sortBy === 'appearances') cmp = (stats[a.id]?.appearances||0) - (stats[b.id]?.appearances||0);
      else if (sortBy === 'position')    cmp = POS_ORDER.indexOf(a.position) - POS_ORDER.indexOf(b.position);
      else cmp = a.name.localeCompare(b.name);
      return sortDir === 'desc' ? -cmp : cmp;
    });

  const delPlayer = async p => {
    if (!confirm(`Remove ${p.name} from squad?`)) return;
    await api.del(`/api/players/${p.id}`);
    onPlayersChanged();
  };

  return (
    <div>
      <div className="page-header">
        <div><h2>Squad</h2><small>{players.filter(p=>p.is_active).length} active players</small></div>
        <button className="btn btn-primary" onClick={()=>setShowAdd(true)}>+ Add Player</button>
      </div>

      <div className="flex gap-8 mb-16" style={{flexWrap:'wrap',alignItems:'center'}}>
        <div className="tabs" style={{marginBottom:0,border:'none',gap:4}}>
          {groups.map(g => <button key={g} className={`tab-btn${filter===g?' active':''}`} onClick={()=>setFilter(g)}>{g}</button>)}
        </div>
        <div style={{marginLeft:'auto',display:'flex',gap:8,alignItems:'center'}}>
          <span style={{fontSize:'.8rem',color:'var(--text-3)'}}>Sort:</span>
          <select className="form-select" style={{width:150}} value={sortBy} onChange={e=>handleSort(e.target.value)}>
            <option value="overall_rating">OVR Rating</option>
            <option value="position">Position</option>
            <option value="goals">Goals</option>
            <option value="assists">Assists</option>
            <option value="avg_rating">Season Avg Rating</option>
            <option value="last5_avg">Last 5 Avg Rating</option>
            <option value="appearances">Appearances</option>
            <option value="name">Name</option>
          </select>
          <button className="btn btn-ghost" style={{padding:'6px 10px',fontSize:'.85rem',minWidth:36}} onClick={()=>setSortDir(d=>d==='desc'?'asc':'desc')} title="Toggle sort direction">
            {sortDir === 'desc' ? '↓' : '↑'}
          </button>
        </div>
      </div>

      <div className="table-wrap">
        <table>
          <thead>
            {(() => {
              const SortTh = ({ col, children, title }) => {
                const active = sortBy === col;
                return (
                  <th className="sortable" title={title} onClick={()=>handleSort(col)}
                    style={{color: active ? 'var(--primary)' : '', whiteSpace:'nowrap'}}>
                    {children}{active ? (sortDir==='desc'?' ↓':' ↑') : ''}
                  </th>
                );
              };
              return (
                <tr>
                  <th>Player</th>
                  <SortTh col="position">Pos</SortTh>
                  <th>Age</th>
                  <SortTh col="overall_rating">OVR</SortTh>
                  <SortTh col="appearances">Apps</SortTh>
                  <SortTh col="goals">Goals</SortTh>
                  <SortTh col="assists">Ast</SortTh>
                  <th>YC</th><th>RC</th>
                  <SortTh col="avg_rating">Season Avg</SortTh>
                  <SortTh col="last5_avg" title="Average of last 5 rated matches">Last 5</SortTh>
                  <th></th>
                </tr>
              );
            })()}
          </thead>
          <tbody>
            {filtered.map(p => {
              const s = stats[p.id] || {};
              return (
                <tr key={p.id} style={{cursor:'pointer',opacity:p.is_active?1:.5}} onClick={()=>setViewing(p)}>
                  <td>
                    <div style={{fontWeight:600}}>{p.name}</div>
                    {p.nationality && <div style={{fontSize:'.72rem',color:'var(--text-3)'}}>{p.nationality}</div>}
                  </td>
                  <td><span className={`position-badge pos-${p.position}`}>{p.position}</span></td>
                  <td className="num">{p.age||'—'}</td>
                  <td><span className={`overall-badge ${overallClass(p.overall_rating)}`} style={{width:32,height:28,fontSize:'.82rem'}}>{p.overall_rating}</span></td>
                  <td className="num">{s.appearances||0}</td>
                  <td className="num" style={{color:'var(--primary)',fontWeight:700}}>{s.goals||0}</td>
                  <td className="num" style={{color:'var(--gold)',fontWeight:700}}>{s.assists||0}</td>
                  <td className="num" style={{color:'var(--yellow-card)'}}>{s.yellow_cards||0}</td>
                  <td className="num" style={{color:'var(--red-card)'}}>{s.red_cards||0}</td>
                  <td className="num"><span className={`rating-val ${ratingClass(s.avg_rating)}`}>{s.avg_rating ? fmtRating(s.avg_rating) : '—'}</span></td>
                  <td className="num">
                    {s.last5_avg
                      ? <span className={`rating-val ${ratingClass(s.last5_avg)}`} style={{fontWeight:800}}>{fmtRating(s.last5_avg)}</span>
                      : <span style={{color:'var(--text-3)'}}>—</span>}
                  </td>
                  <td onClick={e=>e.stopPropagation()}>
                    <div className="flex gap-8">
                      <button className="btn btn-ghost btn-xs" onClick={()=>setEditing(p)}>Edit</button>
                      <button className="btn btn-danger btn-xs" onClick={()=>delPlayer(p)}>Del</button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      {filtered.length === 0 && <div className="empty-state"><div className="empty-icon">👤</div><h4>No players found</h4></div>}

      {showAdd && <PlayerFormModal saveId={save.id} onSave={()=>{setShowAdd(false);onPlayersChanged();}} onClose={()=>setShowAdd(false)} />}
      {editing && <PlayerFormModal saveId={save.id} player={editing} onSave={()=>{setEditing(null);onPlayersChanged();}} onClose={()=>setEditing(null)} />}
      {viewing && <PlayerDetailModal player={viewing} saveId={save.id} onClose={()=>setViewing(null)} />}
    </div>
  );
}

// ── Transfers Page ────────────────────────────────────────────────────────────
function TransfersPage({ save, season, seasons, players }) {
  const [transfers, setTransfers] = React.useState([]);
  const [allTransfers, setAllTransfers] = React.useState([]);
  const [showAdd, setShowAdd] = React.useState(false);
  const [form, setForm] = React.useState({ player_id:'', player_name:'', type:'in', fee:'', wage:'', from_club:'', to_club:'', transfer_date: new Date().toISOString().slice(0,10) });
  const [tab, setTab] = React.useState('season');

  const load = () => {
    if (season) api.get(`/api/seasons/${season.id}/transfers`).then(setTransfers);
    api.get(`/api/saves/${save.id}/transfers`).then(setAllTransfers);
  };
  React.useEffect(load, [season?.id, save.id]);

  const saveTransfer = async () => {
    await api.post(`/api/seasons/${season.id}/transfers`, { save_id: save.id, ...form, fee: form.fee ? parseFloat(form.fee) : 0, wage: form.wage ? parseFloat(form.wage) : null, player_id: form.player_id ? parseInt(form.player_id) : null });
    setShowAdd(false);
    setForm({ player_id:'', player_name:'', type:'in', fee:'', wage:'', from_club:'', to_club:'', transfer_date: new Date().toISOString().slice(0,10) });
    load();
  };
  const delTransfer = async id => { await api.del(`/api/transfers/${id}`); load(); };

  const shown = tab === 'season' ? transfers : allTransfers;
  const totalIn  = shown.filter(t=>['in','loan_in','free_in'].includes(t.type)).reduce((s,t)=>s+(t.fee||0),0);
  const totalOut = shown.filter(t=>['out','loan_out'].includes(t.type)).reduce((s,t)=>s+(t.fee||0),0);

  // Spend chart by season
  const seasonSpend = seasons.map(s => {
    const ts = allTransfers.filter(t => t.season_id === s.id);
    return { label: s.year_label, in: ts.filter(t=>['in','free_in'].includes(t.type)).reduce((x,t)=>x+(t.fee||0),0), out: ts.filter(t=>t.type==='out').reduce((x,t)=>x+(t.fee||0),0) };
  });

  const typeColor = t => t === 'in' || t === 'free_in' ? 'var(--win)' : t === 'out' ? 'var(--loss)' : 'var(--gold)';

  return (
    <div>
      <div className="page-header">
        <div><h2>Transfers</h2></div>
        {season && <button className="btn btn-primary" onClick={()=>setShowAdd(true)}>+ Add Transfer</button>}
      </div>

      {seasonSpend.length > 1 && (
        <div className="card mb-20">
          <div className="card-title">Transfer Spend by Season</div>
          <BarChart
            labels={seasonSpend.map(s=>s.label)}
            datasets={[
              {label:'Spend (In)',data:seasonSpend.map(s=>s.in/1000000),backgroundColor:'rgba(239,68,68,.6)',borderRadius:4},
              {label:'Income (Out)',data:seasonSpend.map(s=>s.out/1000000),backgroundColor:'rgba(34,197,94,.6)',borderRadius:4}
            ]}
            height={200}
          />
          <div style={{textAlign:'center',fontSize:'.75rem',color:'var(--text-3)',marginTop:6}}>Values in £M</div>
        </div>
      )}

      <div className="tabs">
        <button className={`tab-btn${tab==='season'?' active':''}`} onClick={()=>setTab('season')}>This Season</button>
        <button className={`tab-btn${tab==='all'?' active':''}`} onClick={()=>setTab('all')}>All Time</button>
      </div>

      <div className="flex gap-16 mb-16">
        <div className="stat-card" style={{flex:1}}><div className="stat-val" style={{color:'var(--loss)',fontSize:'1.4rem'}}>{fmtFee(totalIn)}</div><div className="stat-lbl">Spent</div></div>
        <div className="stat-card" style={{flex:1}}><div className="stat-val" style={{color:'var(--win)',fontSize:'1.4rem'}}>{fmtFee(totalOut)}</div><div className="stat-lbl">Received</div></div>
        <div className="stat-card" style={{flex:1}}><div className="stat-val" style={{color: totalOut-totalIn >= 0 ? 'var(--win)' : 'var(--loss)',fontSize:'1.4rem'}}>{fmtFee(totalOut-totalIn)}</div><div className="stat-lbl">Net</div></div>
      </div>

      {shown.length === 0 ? <div className="empty-state"><div className="empty-icon">↕️</div><h4>No transfers yet</h4></div> : (
        <div className="table-wrap">
          <table>
            <thead><tr><th>Player</th><th>Type</th><th>Fee</th><th>Wage/wk</th><th>From</th><th>To</th><th>Date</th>{tab==='all'&&<th>Season</th>}<th></th></tr></thead>
            <tbody>
              {shown.map(t => (
                <tr key={t.id}>
                  <td style={{fontWeight:600}}>
                    {t.player_name_db || t.player_name || '—'}
                    {t.position && <span className={`position-badge pos-${t.position}`} style={{marginLeft:6}}>{t.position}</span>}
                  </td>
                  <td><span style={{fontWeight:700,color:typeColor(t.type)}}>{TRANSFER_LABELS[t.type]}</span></td>
                  <td className="num" style={{fontWeight:600}}>{fmtFee(t.fee)}</td>
                  <td className="num">{t.wage ? fmtFee(t.wage) : '—'}</td>
                  <td style={{color:'var(--text-2)'}}>{t.from_club||'—'}</td>
                  <td style={{color:'var(--text-2)'}}>{t.to_club||'—'}</td>
                  <td style={{color:'var(--text-3)',fontSize:'.8rem'}}>{t.transfer_date||'—'}</td>
                  {tab==='all' && <td style={{color:'var(--text-3)',fontSize:'.8rem'}}>{t.year_label}</td>}
                  <td><button className="btn btn-danger btn-xs" onClick={()=>delTransfer(t.id)}>Del</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {showAdd && (
        <div className="modal-overlay" onClick={e=>e.target===e.currentTarget&&setShowAdd(false)}>
          <div className="modal modal-sm">
            <div className="modal-header"><h3>Add Transfer</h3><button className="btn-close" onClick={()=>setShowAdd(false)}>×</button></div>
            <div className="modal-body">
              <div className="form-group">
                <label className="form-label">Player (from squad)</label>
                <select className="form-select" value={form.player_id} onChange={e=>setForm(f=>({...f,player_id:e.target.value}))}>
                  <option value="">— Select or enter manually —</option>
                  {players.map(p=><option key={p.id} value={p.id}>{p.name} ({p.position})</option>)}
                </select>
              </div>
              {!form.player_id && <div className="form-group"><label className="form-label">Player Name (manual)</label><input className="form-input" value={form.player_name} onChange={e=>setForm(f=>({...f,player_name:e.target.value}))} /></div>}
              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">Type</label>
                  <select className="form-select" value={form.type} onChange={e=>setForm(f=>({...f,type:e.target.value}))}>
                    {TRANSFER_TYPES.map(t=><option key={t} value={t}>{TRANSFER_LABELS[t]}</option>)}
                  </select>
                </div>
                <div className="form-group"><label className="form-label">Fee (£K)</label><input className="form-input" type="number" placeholder="0" value={form.fee} onChange={e=>setForm(f=>({...f,fee:e.target.value}))} /></div>
              </div>
              <div className="form-row">
                <div className="form-group"><label className="form-label">From Club</label><input className="form-input" value={form.from_club} onChange={e=>setForm(f=>({...f,from_club:e.target.value}))} /></div>
                <div className="form-group"><label className="form-label">To Club</label><input className="form-input" value={form.to_club} onChange={e=>setForm(f=>({...f,to_club:e.target.value}))} /></div>
              </div>
              <div className="form-row">
                <div className="form-group"><label className="form-label">Wage (£K/wk)</label><input className="form-input" type="number" placeholder="0" value={form.wage} onChange={e=>setForm(f=>({...f,wage:e.target.value}))} /></div>
                <div className="form-group"><label className="form-label">Date</label><input className="form-input" type="date" value={form.transfer_date} onChange={e=>setForm(f=>({...f,transfer_date:e.target.value}))} /></div>
              </div>
            </div>
            <div className="modal-footer">
              <button className="btn btn-ghost" onClick={()=>setShowAdd(false)}>Cancel</button>
              <button className="btn btn-primary" onClick={saveTransfer}>Save Transfer</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ── History Page ──────────────────────────────────────────────────────────────
function HistoryPage({ save }) {
  const [data, setData] = React.useState(null);
  const [playerTab, setPlayerTab] = React.useState('goals');

  React.useEffect(() => {
    api.get(`/api/saves/${save.id}/history`).then(setData);
  }, [save.id]);

  if (!data) return <div style={{color:'var(--text-3)',padding:24}}>Loading…</div>;
  const { seasons, players } = data;
  const finishedSeasons = seasons.filter(s => !s.is_current && s.final_position != null);

  const sortedGoals   = [...players].sort((a,b)=>b.goals-a.goals).slice(0,20);
  const sortedAssists = [...players].sort((a,b)=>b.assists-a.assists).slice(0,20);
  const sortedGC      = [...players].sort((a,b)=>b.goal_contributions-a.goal_contributions).slice(0,20);
  const sortedApps    = [...players].sort((a,b)=>b.appearances-a.appearances).slice(0,20);
  const sortedRating  = [...players].filter(p=>p.appearances>=5).sort((a,b)=>(b.avg_rating||0)-(a.avg_rating||0)).slice(0,20);

  const tableData = playerTab==='goals' ? sortedGoals : playerTab==='assists' ? sortedAssists : playerTab==='gc' ? sortedGC : playerTab==='apps' ? sortedApps : sortedRating;

  return (
    <div>
      <div className="page-header"><h2>History & Analytics</h2></div>

      {seasons.length === 0 && <div className="empty-state"><div className="empty-icon">📈</div><h4>No seasons yet</h4></div>}

      {seasons.length > 0 && (
        <>
          {/* Season Overview Table */}
          <div className="card mb-20">
            <div className="card-title">Season History</div>
            <div className="table-wrap">
              <table>
                <thead><tr><th>Season</th><th>League</th><th>P</th><th>W</th><th>D</th><th>L</th><th>GF</th><th>GA</th><th>GD</th><th>Win%</th><th>Pos</th></tr></thead>
                <tbody>
                  {seasons.map(s => (
                    <tr key={s.id}>
                      <td style={{fontWeight:700}}>{s.year_label}</td>
                      <td style={{color:'var(--text-2)',fontSize:'.85rem'}}>{s.league_name||'—'}</td>
                      <td className="num">{s.played}</td>
                      <td className="num" style={{color:'var(--win)'}}>{s.wins}</td>
                      <td className="num" style={{color:'var(--draw)'}}>{s.draws}</td>
                      <td className="num" style={{color:'var(--loss)'}}>{s.losses}</td>
                      <td className="num">{s.goals_for}</td>
                      <td className="num">{s.goals_against}</td>
                      <td className="num" style={{color:s.goals_for-s.goals_against>=0?'var(--win)':'var(--loss)'}}>{s.goals_for-s.goals_against>0?'+':''}{s.goals_for-s.goals_against}</td>
                      <td className="num">{s.played>0?Math.round(s.wins/s.played*100):0}%</td>
                      <td className="num">{s.final_position ? <span style={{fontWeight:800,color:'var(--gold)'}}>{s.final_position}</span> : <span style={{color:'var(--text-3)'}}>—</span>}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {seasons.length >= 2 && (
            <div className="grid-2 mb-20">
              <div className="card">
                <div className="card-title">Goals Scored & Conceded</div>
                <BarChart
                  labels={seasons.map(s=>s.year_label)}
                  datasets={[
                    {label:'Scored',data:seasons.map(s=>s.goals_for),backgroundColor:'rgba(31,217,160,.7)',borderRadius:4},
                    {label:'Conceded',data:seasons.map(s=>s.goals_against),backgroundColor:'rgba(239,68,68,.5)',borderRadius:4}
                  ]}
                  height={200}
                />
              </div>
              <div className="card">
                <div className="card-title">Win Rate per Season</div>
                <LineChart
                  labels={seasons.map(s=>s.year_label)}
                  datasets={[{label:'Win %',data:seasons.map(s=>s.played>0?Math.round(s.wins/s.played*100):0),borderColor:'#1fd9a0',backgroundColor:'rgba(31,217,160,.1)',tension:.4,fill:true}]}
                  height={200}
                />
              </div>
            </div>
          )}

          {finishedSeasons.length >= 2 && (
            <div className="card mb-20">
              <div className="card-title">League Position (lower is better)</div>
              <LineChart
                labels={finishedSeasons.map(s=>s.year_label)}
                datasets={[{label:'Position',data:finishedSeasons.map(s=>s.final_position),borderColor:'#f5a623',backgroundColor:'rgba(245,166,35,.1)',tension:.4,fill:true}]}
                height={200}
                yReverse={true}
              />
            </div>
          )}

          {seasons.length >= 2 && (
            <div className="card mb-20">
              <div className="card-title">Transfer Spend vs Income (£M)</div>
              <BarChart
                labels={seasons.map(s=>s.year_label)}
                datasets={[
                  {label:'Spend',data:seasons.map(s=>(s.transfer_in/1000000).toFixed(2)),backgroundColor:'rgba(239,68,68,.6)',borderRadius:4},
                  {label:'Income',data:seasons.map(s=>(s.transfer_out/1000000).toFixed(2)),backgroundColor:'rgba(34,197,94,.6)',borderRadius:4}
                ]}
                height={200}
              />
            </div>
          )}
        </>
      )}

      {/* All-time player rankings */}
      {players.length > 0 && (
        <div className="card">
          <div className="card-title">All-Time Player Rankings</div>
          <div className="tabs">
            {[['goals','Goals'],['assists','Assists'],['gc','G+A'],['apps','Appearances'],['rating','Avg Rating']].map(([k,l])=>(
              <button key={k} className={`tab-btn${playerTab===k?' active':''}`} onClick={()=>setPlayerTab(k)}>{l}</button>
            ))}
          </div>
          <div className="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>#</th><th>Player</th><th>Pos</th><th>Apps</th><th style={{color:'var(--primary)'}}>Goals</th><th style={{color:'var(--gold)'}}>Assists</th><th>G+A</th><th>Avg Rating</th><th>OVR</th>
                </tr>
              </thead>
              <tbody>
                {tableData.map((p,i)=>(
                  <tr key={p.id}>
                    <td style={{fontWeight:800,color:'var(--text-3)'}}>{i+1}</td>
                    <td style={{fontWeight:600}}>{p.name}</td>
                    <td><span className={`position-badge pos-${p.position}`}>{p.position}</span></td>
                    <td className="num">{p.appearances}</td>
                    <td className="num" style={{color:'var(--primary)',fontWeight:700}}>{p.goals}</td>
                    <td className="num" style={{color:'var(--gold)',fontWeight:700}}>{p.assists}</td>
                    <td className="num" style={{fontWeight:600}}>{p.goal_contributions}</td>
                    <td className="num"><span className={`rating-val ${ratingClass(p.avg_rating)}`}>{p.avg_rating ? fmtRating(p.avg_rating) : '—'}</span></td>
                    <td><span className={`overall-badge ${overallClass(p.overall_rating)}`} style={{width:30,height:26,fontSize:'.78rem'}}>{p.overall_rating}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

// ── Settings Page ─────────────────────────────────────────────────────────────
function SettingsPage({ save, season, seasons, players, opponents, competitions, onReload }) {
  const [tab, setTab] = React.useState('season');
  const [msg, setMsg] = React.useState('');
  const [err, setErr] = React.useState('');
  const [pwForm, setPwForm] = React.useState({ current:'', next:'' });
  const [endingSeasonForm, setEndingSeasonForm] = React.useState({ final_position: season?.final_position||'', budget_end: season?.budget_end||'', notes: season?.notes||'' });

  const flash = (m, isErr) => { if (isErr) { setErr(m); setTimeout(()=>setErr(''),4000); } else { setMsg(m); setTimeout(()=>setMsg(''),3000); } };

  const changePw = async () => {
    const r = await api.post('/api/auth/change-password', pwForm);
    if (r.ok) { flash('Password changed!'); setPwForm({current:'',next:''}); }
    else flash(r.error, true);
  };

  const endSeason = async () => {
    if (!season) return;
    await api.put(`/api/seasons/${season.id}`, { ...season, final_position: parseInt(endingSeasonForm.final_position)||null, budget_end: endingSeasonForm.budget_end ? parseFloat(endingSeasonForm.budget_end) : null, notes: endingSeasonForm.notes, is_current: false, ended_at: new Date().toISOString() });
    flash('Season ended!');
    onReload();
  };

  const deleteSeason = async s => {
    if (!confirm(`Delete season "${s.year_label}" and ALL its matches, goals and stats? This cannot be undone.`)) return;
    await api.del(`/api/seasons/${s.id}`);
    flash('Season deleted.');
    onReload();
  };

  const deleteSave = async () => {
    if (!confirm(`Delete "${save.name}" and ALL data? This cannot be undone.`)) return;
    await api.del(`/api/saves/${save.id}`);
    window.location.reload();
  };

  const deleteOpponent = async id => { await api.del(`/api/opponents/${id}`); onReload(); };
  const deleteComp     = async id => { await api.del(`/api/competitions/${id}`); onReload(); };
  const editCompType   = async (id, type) => { const c = competitions.find(x=>x.id===id); await api.put(`/api/competitions/${id}`, {...c,type}); onReload(); };

  const exportSave = () => { window.open(`/api/saves/${save.id}/export`); };

  const [saveEditForm, setSaveEditForm] = React.useState({ name: save.name, club_name: save.club_name, club_color: save.club_color });
  const updateSave = async () => { await api.put(`/api/saves/${save.id}`, saveEditForm); flash('Saved!'); onReload(); };

  return (
    <div>
      <div className="page-header"><h2>Settings</h2></div>
      {msg && <div className="alert alert-success">{msg}</div>}
      {err && <div className="alert alert-error">{err}</div>}

      <div className="tabs">
        {[['season','Season'],['squad_mgmt','Squad'],['comp_mgmt','Competitions'],['opp_mgmt','Opponents'],['save_settings','Save'],['password','Password']].map(([k,l])=>(
          <button key={k} className={`tab-btn${tab===k?' active':''}`} onClick={()=>setTab(k)}>{l}</button>
        ))}
      </div>

      {/* Season Tab */}
      {tab === 'season' && (
        <div style={{maxWidth:560}}>
          <div className="card mb-16">
            <h4 style={{marginBottom:14}}>Current Season: {season?.year_label || 'None'}</h4>
            {season && (
              <>
                <div className="form-row">
                  <div className="form-group"><label className="form-label">Final League Position</label><input className="form-input" type="number" min="1" max="100" value={endingSeasonForm.final_position} onChange={e=>setEndingSeasonForm(f=>({...f,final_position:e.target.value}))} /></div>
                  <div className="form-group"><label className="form-label">Budget End (£M)</label><input className="form-input" type="number" value={endingSeasonForm.budget_end} onChange={e=>setEndingSeasonForm(f=>({...f,budget_end:e.target.value}))} /></div>
                </div>
                <div className="form-group"><label className="form-label">Season Notes</label><textarea className="form-textarea" value={endingSeasonForm.notes} onChange={e=>setEndingSeasonForm(f=>({...f,notes:e.target.value}))} /></div>
                <div className="flex gap-8" style={{flexWrap:'wrap'}}>
                  <button className="btn btn-ghost" onClick={async()=>{await api.put(`/api/seasons/${season.id}`,{...season,...endingSeasonForm,final_position:parseInt(endingSeasonForm.final_position)||null,budget_end:endingSeasonForm.budget_end?parseFloat(endingSeasonForm.budget_end):null});flash('Saved!');onReload();}}>Save Changes</button>
                  <button className="btn btn-ghost" title="Records each player's current OVR rating for this season — do this after updating ratings at season end" onClick={async()=>{if(!confirm('Snapshot current player OVR ratings for this season?')) return; const r=await api.post(`/api/seasons/${season.id}/snapshot-ratings`,{}); flash(`Snapshotted ${r.count} players.`);}}>📸 Snapshot Ratings</button>
                  <button className="btn btn-gold" onClick={()=>{if(confirm('End season? A new season will need to be started.')) endSeason();}}>End Season →</button>
                </div>
              </>
            )}
            {!season && <p style={{color:'var(--text-2)',fontSize:'.875rem'}}>No active season. Start one below.</p>}
          </div>

          <div className="card mb-16">
            <h4 style={{marginBottom:14}}>Start New Season</h4>
            <NewSeasonStarter saveId={save.id} nextNum={(seasons.length||0)+1} onCreated={onReload} />
          </div>

          {seasons.length > 0 && (
            <div className="card" style={{border:'1px solid rgba(239,68,68,.2)'}}>
              <h4 style={{marginBottom:12,color:'var(--text-2)'}}>All Seasons</h4>
              {seasons.map(s => (
                <div key={s.id} style={{display:'flex',alignItems:'center',gap:12,padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
                  <span style={{fontWeight:700,flex:1}}>{s.year_label}</span>
                  {s.league_name && <span style={{fontSize:'.8rem',color:'var(--text-2)'}}>{s.league_name}</span>}
                  <span style={{fontSize:'.75rem',padding:'2px 8px',borderRadius:20,background: s.is_current ? 'var(--primary-dim)' : 'var(--bg-elevated)', color: s.is_current ? 'var(--primary)' : 'var(--text-3)'}}>{s.is_current ? 'Active' : 'Ended'}</span>
                  <button className="btn btn-danger btn-xs" onClick={() => deleteSeason(s)}>Delete</button>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {/* Squad management tab */}
      {tab === 'squad_mgmt' && (
        <div>
          <p style={{color:'var(--text-2)',fontSize:'.875rem',marginBottom:16}}>Manage player details and squad ratings for historical record-keeping.</p>
          <div className="table-wrap">
            <table>
              <thead><tr><th>Player</th><th>Pos</th><th>OVR</th><th>Age</th><th>Status</th></tr></thead>
              <tbody>
                {players.map(p=>(
                  <tr key={p.id}>
                    <td style={{fontWeight:600}}>{p.name}</td>
                    <td><span className={`position-badge pos-${p.position}`}>{p.position}</span></td>
                    <td><span className={`overall-badge ${overallClass(p.overall_rating)}`} style={{width:30,height:26,fontSize:'.8rem'}}>{p.overall_rating}</span></td>
                    <td className="num">{p.age||'—'}</td>
                    <td><span style={{fontSize:'.78rem',fontWeight:600,color:p.is_active?'var(--win)':'var(--text-3)'}}>{p.is_active?'Active':'Inactive'}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {players.length === 0 && <div className="empty-state"><div className="empty-icon">👤</div><h4>No players</h4><p>Add players in the Squad page</p></div>}
        </div>
      )}

      {/* Competitions Tab */}
      {tab === 'comp_mgmt' && (
        <div>
          <AddItemPanel title="Competitions" items={competitions} onAdd={async name => { await api.post(`/api/saves/${save.id}/competitions`,{name,type:'cup'}); onReload(); }} onDelete={deleteComp}
            renderItem={(c,del) => (
              <div key={c.id} className="flex flex-center justify-between" style={{padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
                <span style={{fontWeight:500}}>{c.name}</span>
                <div className="flex gap-8">
                  <select className="form-select" style={{width:120,padding:'4px 8px',fontSize:'.8rem'}} value={c.type} onChange={e=>editCompType(c.id,e.target.value)}>
                    {COMP_TYPES.map(t=><option key={t} value={t}>{t}</option>)}
                  </select>
                  <button className="btn btn-danger btn-xs" onClick={()=>del(c.id)}>Del</button>
                </div>
              </div>
            )}
          />
        </div>
      )}

      {/* Opponents Tab */}
      {tab === 'opp_mgmt' && (
        <div>
          <AddItemPanel title="Opponents" items={opponents} onAdd={async name => { await api.post(`/api/saves/${save.id}/opponents`,{name}); onReload(); }} onDelete={deleteOpponent} />
        </div>
      )}

      {/* Save Settings */}
      {tab === 'save_settings' && (
        <div style={{maxWidth:480}}>
          <div className="card mb-16">
            <h4 style={{marginBottom:14}}>Edit Save</h4>
            <div className="form-group"><label className="form-label">Save Name</label><input className="form-input" value={saveEditForm.name} onChange={e=>setSaveEditForm(f=>({...f,name:e.target.value}))} /></div>
            <div className="form-group"><label className="form-label">Club Name</label><input className="form-input" value={saveEditForm.club_name} onChange={e=>setSaveEditForm(f=>({...f,club_name:e.target.value}))} /></div>
            <div className="form-group"><label className="form-label">Club Colour</label><div className="flex gap-8 flex-center"><input type="color" value={saveEditForm.club_color} onChange={e=>setSaveEditForm(f=>({...f,club_color:e.target.value}))} style={{width:44,height:36,border:'none',background:'none',cursor:'pointer'}} /><span className="text-muted" style={{fontSize:'.85rem'}}>{saveEditForm.club_color}</span></div></div>
            <button className="btn btn-primary" onClick={updateSave}>Save Changes</button>
          </div>
          <div className="card mb-16">
            <h4 style={{marginBottom:10}}>Data Export</h4>
            <p style={{color:'var(--text-2)',fontSize:'.875rem',marginBottom:12}}>Download all save data as JSON backup.</p>
            <button className="btn btn-ghost" onClick={exportSave}>Download Export</button>
          </div>
          <div className="card" style={{border:'1px solid rgba(239,68,68,.3)'}}>
            <h4 style={{marginBottom:10,color:'var(--loss)'}}>Danger Zone</h4>
            <p style={{color:'var(--text-2)',fontSize:'.875rem',marginBottom:12}}>Permanently delete this save and all associated data.</p>
            <button className="btn btn-danger" onClick={deleteSave}>Delete Save</button>
          </div>
        </div>
      )}

      {/* Password */}
      {tab === 'password' && (
        <div style={{maxWidth:380}}>
          <div className="card">
            <h4 style={{marginBottom:14}}>Change Password</h4>
            <div className="form-group"><label className="form-label">Current Password</label><input className="form-input" type="password" value={pwForm.current} onChange={e=>setPwForm(f=>({...f,current:e.target.value}))} /></div>
            <div className="form-group"><label className="form-label">New Password (min 4 chars)</label><input className="form-input" type="password" value={pwForm.next} onChange={e=>setPwForm(f=>({...f,next:e.target.value}))} /></div>
            <button className="btn btn-primary" onClick={changePw} disabled={!pwForm.current||!pwForm.next}>Change Password</button>
          </div>
        </div>
      )}
    </div>
  );
}

function NewSeasonStarter({ saveId, nextNum, onCreated }) {
  const [form, setForm] = React.useState({ year_label:'', league_name:'', budget_start:'' });
  const save = async () => {
    if (!form.year_label.trim()) return;
    await api.post(`/api/saves/${saveId}/seasons`, { season_number: nextNum, ...form, budget_start: form.budget_start ? parseFloat(form.budget_start) : null });
    onCreated();
  };
  return (
    <div>
      <div className="form-row">
        <div className="form-group"><label className="form-label">Season Label</label><input className="form-input" placeholder="e.g. 2026/27" value={form.year_label} onChange={e=>setForm(f=>({...f,year_label:e.target.value}))} /></div>
        <div className="form-group"><label className="form-label">League / Division</label><input className="form-input" placeholder="e.g. Premier League" value={form.league_name} onChange={e=>setForm(f=>({...f,league_name:e.target.value}))} /></div>
      </div>
      <div className="form-group"><label className="form-label">Starting Budget (£M)</label><input className="form-input" type="number" placeholder="e.g. 50" value={form.budget_start} onChange={e=>setForm(f=>({...f,budget_start:e.target.value}))} style={{maxWidth:180}} /></div>
      <button className="btn btn-primary" onClick={save} disabled={!form.year_label.trim()}>Start Season</button>
    </div>
  );
}

function AddItemPanel({ title, items, onAdd, onDelete, renderItem }) {
  const [name, setName] = React.useState('');
  const add = async () => { if (!name.trim()) return; await onAdd(name.trim()); setName(''); };
  return (
    <div style={{maxWidth:560}}>
      <div className="flex gap-8 mb-16">
        <input className="form-input" value={name} onChange={e=>setName(e.target.value)} placeholder={`Add ${title.toLowerCase().slice(0,-1)} name…`} onKeyDown={e=>e.key==='Enter'&&add()} style={{flex:1}} />
        <button className="btn btn-primary" onClick={add}>Add</button>
      </div>
      {items.length === 0 ? <div style={{color:'var(--text-3)',fontSize:'.875rem'}}>No {title.toLowerCase()} added yet.</div> :
        items.map(item => renderItem ? renderItem(item, onDelete) : (
          <div key={item.id} className="flex flex-center justify-between" style={{padding:'8px 0',borderBottom:'1px solid var(--border)'}}>
            <span style={{fontWeight:500}}>{item.name}</span>
            <button className="btn btn-danger btn-xs" onClick={()=>onDelete(item.id)}>Del</button>
          </div>
        ))
      }
    </div>
  );
}

// ── App Root ──────────────────────────────────────────────────────────────────
function App() {
  const isMobile = useIsMobile();
  const [authed, setAuthed] = React.useState(null);
  const [saves, setSaves] = React.useState([]);
  const [currentSaveId, setCurrentSaveId] = React.useState(null);
  const [save, setSave] = React.useState(null);
  const [seasons, setSeasons] = React.useState([]);
  const [season, setSeason] = React.useState(null);
  const [players, setPlayers] = React.useState([]);
  const [opponents, setOpponents] = React.useState([]);
  const [competitions, setCompetitions] = React.useState([]);
  const [page, setPage] = React.useState('dashboard');

  React.useEffect(() => {
    api.get('/api/auth/status').then(r => setAuthed(r.ok));
  }, []);

  const loadSaves = () => api.get('/api/saves').then(setSaves);
  React.useEffect(() => { if (authed) loadSaves(); }, [authed]);

  const loadSaveData = async id => {
    const [s, ss, pl, op, co] = await Promise.all([
      api.get('/api/saves').then(all => all.find(x => x.id === id)),
      api.get(`/api/saves/${id}/seasons`),
      api.get(`/api/saves/${id}/players`),
      api.get(`/api/saves/${id}/opponents`),
      api.get(`/api/saves/${id}/competitions`)
    ]);
    setSave(s);
    setSeasons(ss);
    setSeason(ss.find(x => x.is_current) || ss[ss.length - 1] || null);
    setPlayers(pl);
    setOpponents(op);
    setCompetitions(co);
  };

  React.useEffect(() => {
    if (currentSaveId) loadSaveData(currentSaveId);
  }, [currentSaveId]);

  const reload = () => currentSaveId && loadSaveData(currentSaveId);

  const logout = async () => { await api.post('/api/auth/logout'); setAuthed(false); };

  if (authed === null) return <div style={{display:'flex',alignItems:'center',justifyContent:'center',height:'100vh',color:'var(--text-3)'}}>Loading…</div>;
  if (!authed) return <LoginPage onLogin={() => setAuthed(true)} />;
  if (!currentSaveId || !save) return <SaveSelector saves={saves} onSelect={id=>{setCurrentSaveId(id);setPage('dashboard');}} onNew={id=>{setSaves(s=>[...s]);setCurrentSaveId(id);setPage('dashboard');loadSaves();}} onLogout={logout} />;

  return (
    <div className="app-shell">
      {!isMobile && <Sidebar save={save} season={season} page={page} setPage={setPage} onLogout={logout} onChangeSave={()=>{setCurrentSaveId(null);setSave(null);setSeason(null);loadSaves();}} />}
      <main className="main-content" style={isMobile ? {paddingBottom:80} : {}}>
        {page === 'dashboard' && <Dashboard save={save} season={season} seasons={seasons} players={players} opponents={opponents} competitions={competitions} onMatchLogged={reload} />}
        {page === 'matches'   && <MatchesPage save={save} season={season} players={players} opponents={opponents} competitions={competitions} onMatchLogged={reload} />}
        {page === 'squad'     && <SquadPage save={save} season={season} players={players} onPlayersChanged={reload} />}
        {page === 'transfers' && <TransfersPage save={save} season={season} seasons={seasons} players={players} />}
        {page === 'history'   && <HistoryPage save={save} />}
        {page === 'settings'  && <SettingsPage save={save} season={season} seasons={seasons} players={players} opponents={opponents} competitions={competitions} onReload={reload} />}
      </main>
      {isMobile && <MobileNav page={page} setPage={setPage} />}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);