// Player profile modal, depth chart sidebar list, draft table, schedule, stats
const { useState, useMemo, useEffect, useRef } = React;

// === Helpers ===
function parseDate(s) {
  if (!s) return null;
  // "11/Sep/2011"
  const m = s.match(/^(\d{1,2})\/(\w{3})\/(\d{4})$/);
  if (!m) return null;
  const months = {Jan:0,Feb:1,Mar:2,Apr:3,May:4,Jun:5,Jul:6,Aug:7,Sep:8,Oct:9,Nov:10,Dec:11};
  return new Date(parseInt(m[3]), months[m[2]], parseInt(m[1]));
}
function fmtDate(s) {
  const d = parseDate(s);
  if (!d) return s;
  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
}

// === Player Modal ===
function PlayerModal({ player, onClose, seasons }) {
  if (!player) return null;
  // Try to find this player in draft history
  const draftRecord = useMemo(() => {
    for (const s of seasons) {
      for (const d of s.draft) {
        if (d.name && player.name && d.name.toLowerCase() === player.name.toLowerCase()) {
          return { ...d, year: s.year };
        }
      }
    }
    return null;
  }, [player, seasons]);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div style={{ padding: '24px 28px 20px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{
            width: 76, height: 76, borderRadius: 12,
            background: player.group === 'defense' ? 'linear-gradient(160deg, var(--accent), oklch(0.62 0.14 60))' : 'linear-gradient(160deg, oklch(0.96 0.005 260), oklch(0.82 0.005 260))',
            color: 'oklch(0.16 0.02 260)',
            display: 'grid', placeItems: 'center',
            fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 32,
            fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.04em',
            boxShadow: '0 4px 20px oklch(0 0 0 / 0.4)',
          }}>{player.number != null ? player.number : '—'}</div>
          <div style={{ flex: 1 }}>
            <div className="eyebrow" style={{ marginBottom: 4 }}>{player.position} · Depth {player.depth}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
              {player.name}
            </div>
            <div style={{ marginTop: 6, color: 'var(--fg-2)', fontSize: 13 }}>
              {player.group === 'offense' ? 'Offense' : player.group === 'defense' ? 'Defense' : 'Special Teams'} · Active Roster
            </div>
          </div>
          <button className="icon-btn" onClick={onClose} aria-label="Close">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
          </button>
        </div>
        <div style={{ padding: '20px 28px' }}>
          {draftRecord ? (
            <div>
              <div className="eyebrow">Drafted</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginTop: 8 }}>
                <ModalStat label="Year" value={draftRecord.year} />
                <ModalStat label="Round" value={draftRecord.round || '—'} />
                <ModalStat label="Overall" value={`#${draftRecord.overall || '—'}`} />
                <ModalStat label="College" value={draftRecord.college || '—'} small />
              </div>
            </div>
          ) : (
            <div style={{ padding: '14px 16px', background: 'var(--bg-2)', borderRadius: 8, fontSize: 13, color: 'var(--fg-2)' }}>
              Free-agent acquisition or undocumented entry — no draft record on file.
            </div>
          )}
          <div style={{ marginTop: 18, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <span className="pill accent">{player.position}</span>
            <span className="pill">#{player.number != null ? player.number : '—'}</span>
            <span className="pill">{player.group}</span>
            {player.depth === 1 && <span className="pill win">Starter</span>}
          </div>
        </div>
      </div>
    </div>
  );
}

function ModalStat({ label, value, small }) {
  return (
    <div>
      <div className="eyebrow" style={{ fontSize: 9.5 }}>{label}</div>
      <div style={{
        marginTop: 4,
        fontFamily: 'var(--font-display)',
        fontSize: small ? 14 : 22,
        fontWeight: small ? 500 : 700,
        letterSpacing: '-0.015em',
        lineHeight: 1.1,
      }}>{value}</div>
    </div>
  );
}

// === Depth list (next to field) ===
function DepthList({ depthChart, side, onPlayerClick }) {
  const group = side === 'offense' ? depthChart.offense : depthChart.defense;
  const order = side === 'offense'
    ? ['QB','RB','WR1','WR2','WR Slot','TE','LT','LG','C','RG','RT']
    : ['DE','DT','NT','OLB-L','OLB-R','LB1','LB2','CB1','CB2','CB Slot','SS','FS'];
  return (
    <div className="depth-list">
      {order.map(pos => {
        const players = group[pos] || [];
        if (!players.length) return null;
        return (
          <div className="depth-pos-card" key={pos}>
            <div className="ph"><strong>{pos}</strong></div>
            {players.map((p, i) => (
              <div
                key={i}
                className={`pl-row ${i === 0 ? 'starter' : ''}`}
                onClick={() => onPlayerClick({ ...p, position: pos, depth: p.depth || i+1, group: side })}
                style={{ cursor: 'pointer' }}
              >
                <span className="num">{p.number != null ? p.number : '—'}</span>
                <span className="nm">{p.name}</span>
              </div>
            ))}
          </div>
        );
      })}
    </div>
  );
}

// === Stat Sparkline ===
function Sparkline({ data, height = 36, accent = false }) {
  if (!data || data.length < 2) return null;
  const w = 120, h = height;
  const max = Math.max(...data, 1);
  const min = 0;
  const pts = data.map((v, i) => [
    (i / (data.length - 1)) * w,
    h - ((v - min) / (max - min || 1)) * (h - 4) - 2,
  ]);
  const path = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
  const area = path + ` L${w} ${h} L0 ${h} Z`;
  const stroke = accent ? 'var(--accent)' : 'var(--fg-1)';
  const fill = accent ? 'var(--accent-soft)' : 'oklch(from var(--fg-1) l c h / 0.12)';
  return (
    <svg className="spark" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      <path d={area} fill={fill} />
      <path d={path} fill="none" stroke={stroke} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
      {pts.map((p, i) => (
        <circle key={i} cx={p[0]} cy={p[1]} r={1.5} fill={stroke} />
      ))}
    </svg>
  );
}

// === Schedule (current season) ===
function Schedule({ season, onTeamClick }) {
  if (!season) return null;
  return (
    <div className="card">
      <div className="card-head">
        <span className="title">{season.year} Schedule</span>
        <span className="count">{season.games.filter(g => !g.bye).length} games</span>
      </div>
      <div style={{ overflowX: 'auto' }}>
        <table>
          <thead>
            <tr>
              <th className="mono" style={{ width: 50 }}>Wk</th>
              <th>Matchup</th>
              <th className="mono">Date</th>
              <th className="mono">Result</th>
              <th className="mono">Score</th>
              <th className="mono">Record</th>
            </tr>
          </thead>
          <tbody>
            {season.games.map((g, i) => {
              if (g.bye) {
                return <tr key={i} style={{ opacity: 0.5 }}>
                  <td className="mono">{i+1}</td>
                  <td colSpan={5} style={{ fontStyle: 'italic', color: 'var(--fg-2)' }}>Bye Week</td>
                </tr>;
              }
              const isHome = g.home === 'Baltimore Ravens';
              const opp = isHome ? g.away : g.home;
              return (
                <tr key={i}>
                  <td className="mono muted">{g.week}</td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span className="pill" style={{ minWidth: 32, justifyContent: 'center', fontSize: 9.5 }}>{isHome ? 'vs' : '@'}</span>
                      <span style={{ fontWeight: 500 }}>{opp}</span>
                    </div>
                  </td>
                  <td className="mono muted">{fmtDate(g.date)}</td>
                  <td>
                    {g.future ? <span className="pill" style={{ color: 'var(--fg-2)' }}>—</span> :
                     g.result === 'W' ? <span className="pill win">W</span> :
                     g.result === 'L' ? <span className="pill loss">L</span> :
                     <span className="pill">{g.result}</span>}
                  </td>
                  <td className="mono">
                    {g.future ? <span className="muted">—</span> :
                     `${isHome ? g.homeScore : g.awayScore}–${isHome ? g.awayScore : g.homeScore}`}
                  </td>
                  <td className="mono muted">{g.record || '—'}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// === Draft Table ===
function DraftTable({ seasons, onRightClick }) {
  const [sortKey, setSortKey] = useState('year');
  const [sortDir, setSortDir] = useState('desc');
  const [search, setSearch] = useState('');
  const [posFilter, setPosFilter] = useState('All');
  const [yearFilter, setYearFilter] = useState(2026);
  const [yearOpen, setYearOpen] = useState(false);
  const yearRef = useRef(null);

  const rows = useMemo(() => {
    const all = [];
    seasons.forEach(s => s.draft.forEach(d => {
      if (!d.name) return;
      all.push({ ...d, year: s.year, round: parseInt(d.round) || 0, overall: parseInt(d.overall) || 0 });
    }));
    return all;
  }, [seasons]);

  const positions = useMemo(() => {
    const set = new Set(rows.map(r => r.position).filter(Boolean));
    return ['All', ...Array.from(set).sort()];
  }, [rows]);

  const years = useMemo(() => {
    const set = new Set(rows.map(r => r.year).filter(Boolean));
    return ['All', ...Array.from(set).sort((a, b) => b - a)];
  }, [rows]);

  // Set of positions actually drafted in the selected year.
  // null = no year filter, every chip stays visible.
  const positionsForYear = useMemo(() => {
    if (yearFilter === 'All') return null;
    return new Set(rows.filter(r => r.year === parseInt(yearFilter)).map(r => r.position));
  }, [rows, yearFilter]);

  // If the active position chip becomes hidden by the year change, reset it.
  useEffect(() => {
    if (positionsForYear && posFilter !== 'All' && !positionsForYear.has(posFilter)) {
      setPosFilter('All');
    }
  }, [positionsForYear, posFilter]);

  // Close year dropdown when clicking outside.
  useEffect(() => {
    if (!yearOpen) return;
    const handler = (e) => {
      if (yearRef.current && !yearRef.current.contains(e.target)) setYearOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [yearOpen]);

  const filtered = useMemo(() => {
    return rows.filter(r => {
      if (yearFilter !== 'All' && r.year !== parseInt(yearFilter)) return false;
      if (posFilter !== 'All' && r.position !== posFilter) return false;
      if (search && !`${r.name} ${r.college} ${r.position}`.toLowerCase().includes(search.toLowerCase())) return false;
      return true;
    });
  }, [rows, search, posFilter, yearFilter]);

  const sorted = useMemo(() => {
    const arr = [...filtered];
    arr.sort((a, b) => {
      let av = a[sortKey], bv = b[sortKey];
      if (typeof av === 'string') av = av.toLowerCase();
      if (typeof bv === 'string') bv = bv.toLowerCase();
      if (av < bv) return sortDir === 'asc' ? -1 : 1;
      if (av > bv) return sortDir === 'asc' ? 1 : -1;
      return 0;
    });
    return arr;
  }, [filtered, sortKey, sortDir]);

  const toggleSort = (k) => {
    if (sortKey === k) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
    else { setSortKey(k); setSortDir('asc'); }
  };

  const Th = ({ k, children, mono }) => (
    <th
      className={`sortable ${mono ? 'mono' : ''} ${sortKey === k ? 'active' : ''}`}
      onClick={() => toggleSort(k)}
    >
      {children}
      {sortKey === k && <span style={{ marginLeft: 4 }}>{sortDir === 'asc' ? '↑' : '↓'}</span>}
    </th>
  );

  return (
    <div>
      <div className="filter-bar">
        <input
          className="search-input"
          placeholder="Search players, college, position..."
          value={search}
          onChange={e => setSearch(e.target.value)}
        />
        <div className="year-dropdown" ref={yearRef}>
          <button
            className={`year-dropdown-btn ${yearOpen ? 'open' : ''} ${yearFilter !== 'All' ? 'has-value' : ''}`}
            onClick={() => setYearOpen(o => !o)}
          >
            <span>{yearFilter === 'All' ? 'All Years' : yearFilter}</span>
          </button>
          {yearOpen && (
            <div className="year-dropdown-list">
              {years.map(y => (
                <div
                  key={y}
                  className={`year-dropdown-item ${yearFilter === y ? 'active' : ''}`}
                  onClick={() => { setYearFilter(y); setYearOpen(false); }}
                >
                  {y === 'All' ? 'All Years' : y}
                </div>
              ))}
            </div>
          )}
        </div>
        <div className="chip-group">
          {positions.map(p => {
            const isHidden = p !== 'All' && positionsForYear && !positionsForYear.has(p);
            return (
              <button
                key={p}
                className={`${posFilter === p ? 'active' : ''} ${isHidden ? 'hidden' : ''}`}
                onClick={() => setPosFilter(p)}
                aria-hidden={isHidden}
                tabIndex={isHidden ? -1 : 0}
              >{p}</button>
            );
          })}
        </div>
      </div>
      <div className="card" style={{ overflowX: 'auto' }}>
        <table>
          <thead>
            <tr>
              <Th k="year" mono>Year</Th>
              <Th k="round" mono>Rd</Th>
              <Th k="overall" mono>Pick</Th>
              <Th k="name">Player</Th>
              <Th k="position" mono>Pos</Th>
              <Th k="college">College</Th>
            </tr>
          </thead>
          <tbody>
            {sorted.map((r, i) => (
              <tr key={i} onContextMenu={(e) => {
                if (onRightClick) {
                  e.preventDefault();
                  onRightClick(e, r);
                }
              }}>
                <td className="mono">{r.year}</td>
                <td className="mono"><span className={r.round === 1 ? 'pill accent' : 'pill'} style={{ minWidth: 28, justifyContent: 'center' }}>{r.round}</span></td>
                <td className="mono">#{r.overall}</td>
                <td style={{ fontWeight: 500 }}>{r.name}</td>
                <td className="mono">{r.position}</td>
                <td className="muted">{r.college}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {sorted.length === 0 && (
          <div style={{ padding: '40px 20px', textAlign: 'center', color: 'var(--fg-2)' }}>No picks match the current filters.</div>
        )}
      </div>
    </div>
  );
}

// === Season Stats Table ===
function SeasonStats({ seasons }) {
  return (
    <div className="card" style={{ overflowX: 'auto' }}>
      <table>
        <thead>
          <tr>
            <th className="mono">Season</th>
            <th className="mono">W</th>
            <th className="mono">L</th>
            <th className="mono">PCT</th>
            <th className="mono">PF</th>
            <th className="mono">PA</th>
            <th className="mono">DIFF</th>
            <th>Trend</th>
          </tr>
        </thead>
        <tbody>
          {[...seasons].reverse().map(s => {
            const pct = s.stats.wins + s.stats.losses > 0 ? (s.stats.wins / (s.stats.wins + s.stats.losses)) : 0;
            const diff = s.stats.pointsFor - s.stats.pointsAgainst;
            const sparkData = s.games.filter(g => !g.bye && !g.future).map(g => g.result === 'W' ? 1 : 0)
              .reduce((acc, v, i) => { acc.push((acc[i-1] || 0) + v); return acc; }, []);
            return (
              <tr key={s.year}>
                <td className="mono" style={{ fontWeight: 600 }}>{s.year}</td>
                <td className="mono">{s.stats.wins}</td>
                <td className="mono">{s.stats.losses}</td>
                <td className="mono">{pct.toFixed(3).replace(/^0/, '')}</td>
                <td className="mono">{s.stats.pointsFor}</td>
                <td className="mono">{s.stats.pointsAgainst}</td>
                <td className="mono" style={{ color: diff > 0 ? 'var(--win)' : diff < 0 ? 'var(--loss)' : 'var(--fg-2)' }}>
                  {diff > 0 ? '+' : ''}{diff}
                </td>
                <td><Sparkline data={sparkData} accent={pct >= 0.6} /></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

window.PlayerModal = PlayerModal;
window.DepthList = DepthList;
window.Sparkline = Sparkline;
window.Schedule = Schedule;
window.DraftTable = DraftTable;
window.SeasonStats = SeasonStats;