/* Filters + worst-openings + overview panels — now driven by props. */

function FilterPanel({ filters, setFilters, overview }) {
  const set = (k, v) => setFilters({ ...filters, [k]: v });
  return (
    <div>
      <div className="filter-title">Color</div>
      <div className="seg">
        {['white', 'black', 'both'].map((c) => (
          <button
            key={c}
            className={filters.color === c ? 'active' : ''}
            onClick={() => set('color', c)}
          >
            {c[0].toUpperCase() + c.slice(1)}
          </button>
        ))}
      </div>

      <div className="filter-title">Time control</div>
      <div className="seg">
        {['bullet', 'blitz', 'rapid', 'classical'].map((t) => (
          <button
            key={t}
            className={filters.tc.includes(t) ? 'active' : ''}
            onClick={() =>
              set('tc', filters.tc.includes(t)
                ? filters.tc.filter((x) => x !== t)
                : [...filters.tc, t])
            }
          >
            {t[0].toUpperCase() + t.slice(1, 4)}
          </button>
        ))}
      </div>

      <div className="filter-title">Game type</div>
      <label className="check-row">
        <input
          type="checkbox"
          checked={filters.rated}
          onChange={(e) => set('rated', e.target.checked)}
        />
        Rated
      </label>
      <label className="check-row">
        <input
          type="checkbox"
          checked={filters.casual}
          onChange={(e) => set('casual', e.target.checked)}
        />
        Casual
      </label>

      <div className="filter-title">Opponent rating</div>
      <div className="range-row">
        <input
          type="number"
          value={filters.oppMin}
          onChange={(e) => set('oppMin', +e.target.value)}
        />
        <span
          style={{
            color: 'var(--fg-muted)',
            fontFamily: 'var(--font-mono)',
            fontSize: 11,
          }}
        >
          –
        </span>
        <input
          type="number"
          value={filters.oppMax}
          onChange={(e) => set('oppMax', +e.target.value)}
        />
      </div>

      <div className="filter-title">Date range</div>
      <div className="seg">
        {['7d', '30d', '6mo', '1y', 'all'].map((d) => (
          <button
            key={d}
            className={filters.date === d ? 'active' : ''}
            onClick={() => set('date', d)}
          >
            {d}
          </button>
        ))}
      </div>

      <div className="filter-title">Minimum games per line</div>
      <div className="range-row">
        <input
          type="number"
          value={filters.minGames}
          onChange={(e) => set('minGames', +e.target.value)}
        />
      </div>

      {overview && (
        <div className="summary-card">
          <div className="kpi">
            <span className="label">Games matched</span>
            <span className="val">{overview.games.toLocaleString()}</span>
          </div>
          <div className="kpi">
            <span className="label">Win rate</span>
            <span className="val">
              {overview.winRate != null ? Math.round(overview.winRate * 100) + '%' : '—'}
            </span>
          </div>
          <div className="kpi">
            <span className="label">Ø opening CPL</span>
            <span className="val bad">
              {overview.avgOpeningCpl != null ? '−' + overview.avgOpeningCpl : '—'}
            </span>
          </div>
          <div className="kpi">
            <span className="label">Biggest leak</span>
            <span className="val bad">
              {overview.biggestLeak != null ? '−' + overview.biggestLeak : '—'}
            </span>
          </div>
        </div>
      )}
    </div>
  );
}

function OverviewStrip({ overview }) {
  if (!overview) return null;
  const spark = overview.sparkline || [];
  const max = Math.max(1, ...spark);
  return (
    <div className="overview">
      <div className="ov-cell">
        <div className="l">Games analysed</div>
        <div className="v">
          {overview.games}
          <span className="unit">games</span>
        </div>
      </div>
      <div className="ov-cell">
        <div className="l">Win rate</div>
        <div className="v">
          {overview.winRate != null ? Math.round(overview.winRate * 100) : '—'}
          <span className="unit">%</span>
        </div>
      </div>
      <div className="ov-cell">
        <div className="l">Ø Opening CPL</div>
        <div className="v bad">
          {overview.avgOpeningCpl != null ? '−' + overview.avgOpeningCpl : '—'}
          <span className="unit">cp</span>
        </div>
        {spark.length > 0 && (
          <div className="spark">
            {spark.map((v, i) => (
              <div
                key={i}
                className={'b' + (v >= 25 ? ' hot' : '')}
                style={{ height: `${(v / max) * 100}%` }}
              />
            ))}
          </div>
        )}
      </div>
      <div className="ov-cell">
        <div className="l">Worst single line</div>
        <div className="v bad">
          {overview.biggestLeak != null ? '−' + overview.biggestLeak : '—'}
          <span className="unit">cp</span>
        </div>
      </div>
    </div>
  );
}

function WorstList({ worst, activeFen, onPick, nodes, sort, setSort }) {
  if (!worst || !worst.length) {
    return (
      <div>
        <div className="panel-head">
          <h2>Leaks by line</h2>
        </div>
        <div style={{ color: 'var(--fg-muted)', fontSize: 13, padding: 12 }}>
          No positions with enough games yet. Lower the minimum-games threshold or sync more games.
        </div>
      </div>
    );
  }

  const sorted = [...worst].sort((a, b) => {
    if (sort === 'loss') return b.avgLossCp - a.avgLossCp;
    if (sort === 'games') return b.games - a.games;
    if (sort === 'winrate') return a.winRate - b.winRate;
    return 0;
  });

  return (
    <div>
      <div className="panel-head">
        <h2>Leaks by line</h2>
        <span className="count">{sorted.length} lines</span>
      </div>
      <div className="sort-bar">
        <button className={sort === 'loss' ? 'on' : ''} onClick={() => setSort('loss')}>Ø CPL</button>
        <button className={sort === 'winrate' ? 'on' : ''} onClick={() => setSort('winrate')}>Win%</button>
        <button className={sort === 'games' ? 'on' : ''} onClick={() => setSort('games')}>Games</button>
      </div>
      {sorted.map((w, i) => (
        <div
          key={w.fen}
          className={'worst-item' + (activeFen === w.fen ? ' active' : '')}
          onClick={() => onPick(w.fen)}
        >
          <div className="rank">{String(i + 1).padStart(2, '0')}</div>
          <div className="mini">
            <MiniBoard fen={w.fen} />
          </div>
          <div>
            <div className="name">{w.name || w.line}</div>
            <div className="meta">
              {w.line} · {w.games}g · {Math.round(w.winRate * 100)}%
            </div>
          </div>
          <div className="metric">
            <div className="big">−{w.avgLossCp}</div>
            <div className="sub">Ø cpl</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function EvalTape({ cp }) {
  const valid = cp != null && !isNaN(cp);
  const cpc = valid ? Math.max(-500, Math.min(500, cp)) : 0;
  const pct = 50 + (cpc / 500) * 45;
  const label = valid ? (cp >= 0 ? '+' : '') + (cp / 100).toFixed(2) : '—';
  return (
    <div className="eval-tape" title={`Engine eval: ${label}`}>
      <div className="white" style={{ height: `${pct}%` }} />
      <div className="zero" />
      <div
        className="label"
        style={{ top: `${100 - pct}%`, transform: 'translateY(-50%)' }}
      >
        {label}
      </div>
    </div>
  );
}

Object.assign(window, { FilterPanel, OverviewStrip, WorstList, EvalTape });