// Player list view with filters, sort, search, keyboard nav

const SORT_KEYS = [
  { k: 'shirt', lab: '#', num: true },
  { k: 'name', lab: 'name', num: false },
  { k: 'age', lab: 'age', num: true },
  { k: 'pos', lab: 'pos', num: false },
  { k: 'club', lab: 'club', num: false },
  { k: 'caps', lab: 'caps', num: true },
  { k: 'intGoals', lab: 'intGoals', num: true },
  { k: 'apps', lab: 'apps', num: true },
  { k: 'goals', lab: 'goals', num: true },
  { k: 'assists', lab: 'assists', num: true },
  { k: 'minutes', lab: 'minutes', num: true },
];

function valueFor(p, k) {
  if (k === 'age') return ageFromDob(p.dob);
  if (k === 'apps' || k === 'goals' || k === 'assists' || k === 'minutes' || k === 'yellows' || k === 'reds')
    return p.stats[k];
  if (k === 'name' || k === 'pos' || k === 'club' || k === 'shirt' || k === 'caps' || k === 'intGoals')
    return p[k];
  return p[k];
}

function PlayerList({ players, onSelect, onImport, onExportCsv, onExportXml, onAddPlayer, t, lang, density }) {
  const [filterTeam, setFilterTeam] = useState('All');
  const [filterPosGroup, setFilterPosGroup] = useState('All');
  const [filterFoot, setFilterFoot] = useState('Any');
  const [filterAge, setFilterAge] = useState('Any');
  const [search, setSearch] = useState('');
  const [sortK, setSortK] = useState('caps');
  const [sortDir, setSortDir] = useState(-1);
  const [focusIdx, setFocusIdx] = useState(0);
  const [importOpen, setImportOpen] = useState(false);
  const listRef = useRef();

  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    return players.filter(p => {
      if (filterTeam !== 'All' && p.team !== filterTeam) return false;
      if (filterPosGroup !== 'All' && posGroup(p.pos) !== filterPosGroup) return false;
      if (filterFoot !== 'Any' && p.foot !== filterFoot) return false;
      if (filterAge !== 'Any') {
        const a = ageFromDob(p.dob);
        if (filterAge === 'U18' && a >= 18) return false;
        if (filterAge === '18-23' && (a < 18 || a > 23)) return false;
        if (filterAge === '24-29' && (a < 24 || a > 29)) return false;
        if (filterAge === '30+' && a < 30) return false;
      }
      if (q) {
        const hay = [p.name, p.thaiName||'', p.pos, p.club, clubByCode(p.club).name, p.team]
          .join(' ').toLowerCase();
        if (!hay.includes(q)) return false;
      }
      return true;
    });
  }, [players, filterTeam, filterPosGroup, filterFoot, filterAge, search]);

  const sorted = useMemo(() => {
    const arr = [...filtered];
    arr.sort((a, b) => {
      const va = valueFor(a, sortK), vb = valueFor(b, sortK);
      if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * sortDir;
      return String(va).localeCompare(String(vb)) * sortDir;
    });
    return arr;
  }, [filtered, sortK, sortDir]);

  useEffect(() => { setFocusIdx(0); }, [filterTeam, filterPosGroup, filterFoot, filterAge, search, sortK, sortDir]);

  useEffect(() => {
    const k = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT' || e.target.tagName === 'TEXTAREA') return;
      if (e.key === 'ArrowDown') { e.preventDefault(); setFocusIdx(i => Math.min(sorted.length-1, i+1)); }
      else if (e.key === 'ArrowUp') { e.preventDefault(); setFocusIdx(i => Math.max(0, i-1)); }
      else if (e.key === 'Enter' && sorted[focusIdx]) { e.preventDefault(); onSelect(sorted[focusIdx]); }
    };
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [sorted, focusIdx, onSelect]);

  useEffect(() => {
    const el = listRef.current?.querySelector(`[data-row-idx="${focusIdx}"]`);
    if (el) el.scrollIntoView({ block: 'nearest' });
  }, [focusIdx]);

  const toggleSort = (k) => {
    if (sortK === k) setSortDir(d => -d);
    else { setSortK(k); setSortDir(1); }
  };

  const teams = ['All', ...window.TWNT_DATA.TEAMS];
  const posGroups = ['All', 'Goalkeeper', 'Defender', 'Midfielder', 'Forward'];
  const ageBuckets = ['Any', 'U18', '18-23', '24-29', '30+'];
  const feet = ['Any', 'L', 'R', 'B'];

  return (
    <div className="list-view">
      {/* Header */}
      <header className="topbar">
        <div className="brand">
          <div className="brand-mark"><span className="bm-red"></span><span className="bm-blue"></span></div>
          <div>
            <h1 className="brand-title">{t('title')}</h1>
            <div className="brand-sub">{t('subtitle')}</div>
          </div>
        </div>
        <div className="topbar-actions">
          <button className="btn-ghost" onClick={onAddPlayer}>+ {t('addPlayer')}</button>
          <button className="btn-ghost" onClick={() => setImportOpen(true)}>⬇ {t('import')}</button>
          <button className="btn-ghost" onClick={onExportCsv}>⬆ CSV</button>
          <button className="btn-ghost" onClick={onExportXml}>⬆ XML</button>
        </div>
      </header>

      {/* Team selector — large segmented control */}
      <div className="team-tabs">
        {teams.map(tm => (
          <button key={tm} className={`team-tab ${filterTeam===tm?'on':''}`} onClick={() => setFilterTeam(tm)}>
            <span className="tt-name">{tm === 'All' ? t('all') : tm === 'Senior' ? t('senior') : tm}</span>
            <span className="tt-count mono">{players.filter(p => tm === 'All' || p.team === tm).length}</span>
          </button>
        ))}
      </div>

      {/* Quick filter row */}
      <div className="filter-row">
        <div className="search-wrap">
          <span className="search-ico">⌕</span>
          <input className="search-input" placeholder={t('search')} value={search} onChange={e => setSearch(e.target.value)} />
          {search && <button className="search-clear" onClick={() => setSearch('')}>✕</button>}
        </div>
        <div className="chips">
          <ChipGroup label={t('pos')} options={posGroups} value={filterPosGroup} onChange={setFilterPosGroup}/>
          <ChipGroup label={t('foot')} options={feet} value={filterFoot} onChange={setFilterFoot}/>
          <ChipGroup label={t('age')} options={ageBuckets} value={filterAge} onChange={setFilterAge}/>
        </div>
        <div className="results-count">
          <span className="mono num lg">{sorted.length}</span>
          <span className="dim sm"> {t('players_found')}</span>
        </div>
      </div>

      {/* Table */}
      <div className={`table-wrap ${density==='compact'?'dense':''}`} ref={listRef}>
        <table className="player-table">
          <thead>
            <tr>
              <Th k="shirt" sortK={sortK} sortDir={sortDir} onClick={toggleSort} num>{t('shirt')}</Th>
              <Th k="name" sortK={sortK} sortDir={sortDir} onClick={toggleSort}>{t('name')}</Th>
              <Th k="pos" sortK={sortK} sortDir={sortDir} onClick={toggleSort}>{t('pos')}</Th>
              <Th k="age" sortK={sortK} sortDir={sortDir} onClick={toggleSort} num>{t('age')}</Th>
              <th className="num">{t('dob')}</th>
              <th>{t('foot')}</th>
              <Th k="club" sortK={sortK} sortDir={sortDir} onClick={toggleSort}>{t('club')}</Th>
              <Th k="caps" sortK={sortK} sortDir={sortDir} onClick={toggleSort} num>{t('caps')}</Th>
              <Th k="intGoals" sortK={sortK} sortDir={sortDir} onClick={toggleSort} num>{t('intGoals')}</Th>
              <Th k="apps" sortK={sortK} sortDir={sortDir} onClick={toggleSort} num>{t('apps')}</Th>
              <Th k="goals" sortK={sortK} sortDir={sortDir} onClick={toggleSort} num>{t('goals')}</Th>
              <Th k="assists" sortK={sortK} sortDir={sortDir} onClick={toggleSort} num>{t('assists')}</Th>
              <Th k="minutes" sortK={sortK} sortDir={sortDir} onClick={toggleSort} num>{t('minutes')}</Th>
              <th className="num">{t('yellows')}/{t('reds')}</th>
            </tr>
          </thead>
          <tbody>
            {sorted.length === 0 && (
              <tr><td colSpan="14" className="empty">{t('no_players')}</td></tr>
            )}
            {sorted.map((p, i) => {
              const c = clubByCode(p.club);
              return (
                <tr key={p.id} data-row-idx={i}
                    className={`row ${i===focusIdx?'focused':''}`}
                    onClick={() => { setFocusIdx(i); onSelect(p); }}
                    onMouseEnter={() => setFocusIdx(i)}>
                  <td className="num mono shirt">{p.shirt || '–'}</td>
                  <td className="nm">
                    <div className="nm-line">{p.name}</div>
                    <div className="nm-th">{p.thaiName}</div>
                  </td>
                  <td><PosBadge pos={p.pos} t={t}/></td>
                  <td className="num mono">{ageFromDob(p.dob)}</td>
                  <td className="num mono dim">{p.dob}</td>
                  <td><FootIcon foot={p.foot}/></td>
                  <td><ClubChip code={p.club}/></td>
                  <td className="num mono">{p.caps}</td>
                  <td className="num mono">{p.intGoals}</td>
                  <td className="num mono">{p.stats.apps}</td>
                  <td className="num mono hl">{p.stats.goals}</td>
                  <td className="num mono">{p.stats.assists}</td>
                  <td className="num mono dim">{p.stats.minutes}</td>
                  <td className="num cards-cell">
                    <span className="ycard">{p.stats.yellows}</span>
                    <span className="rcard">{p.stats.reds}</span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {importOpen && <ImportDialog onClose={() => setImportOpen(false)} onImport={onImport} t={t}/>}
    </div>
  );
}

function Th({ k, sortK, sortDir, onClick, num, children }) {
  const on = sortK === k;
  return (
    <th onClick={() => onClick(k)} className={`sortable ${num?'num':''} ${on?'on':''}`}>
      <span className="th-lab">{children}</span>
      <span className={`sort-arrow ${on?(sortDir>0?'up':'down'):''}`}>{on ? (sortDir > 0 ? '▲' : '▼') : '◇'}</span>
    </th>
  );
}

function ChipGroup({ label, options, value, onChange }) {
  return (
    <div className="chip-group">
      <span className="chip-lab">{label}</span>
      {options.map(o => (
        <button key={o} className={`chip ${value===o?'on':''}`} onClick={() => onChange(o)}>{o}</button>
      ))}
    </div>
  );
}

window.PlayerList = PlayerList;