// Solve history and stats panel
function StatsBar({ solves }) {
  const stats = computeAverages(solves);
  const items = [
    { label: 'BEST',  val: formatTime(stats.best) },
    { label: 'AO5',   val: stats.ao5  ? formatTime(stats.ao5)  : '—' },
    { label: 'AO12',  val: stats.ao12 ? formatTime(stats.ao12) : '—' },
    { label: 'AO50',  val: stats.ao50 ? formatTime(stats.ao50) : '—' },
    { label: 'SOLVES',val: String(stats.count) },
    { label: 'DNF',   val: String(stats.dnfCount) },
  ];

  // Memo vs exec averages
  const withSplits = solves.filter(s => !s.dnf && s.memo != null && s.exec != null);
  const avgMemo = withSplits.length
    ? Math.round(withSplits.reduce((a,s) => a + s.memo, 0) / withSplits.length) : null;
  const avgExec = withSplits.length
    ? Math.round(withSplits.reduce((a,s) => a + s.exec, 0) / withSplits.length) : null;

  return (
    <div style={statsStyles.bar}>
      <div style={statsStyles.grid}>
        {items.map(({label, val}) => (
          <div key={label} style={statsStyles.cell}>
            <span style={statsStyles.cellLabel}>{label}</span>
            <span style={statsStyles.cellVal}>{val}</span>
          </div>
        ))}
      </div>
      {withSplits.length > 0 && (
        <div style={statsStyles.splitRow}>
          <div style={statsStyles.splitItem}>
            <span style={statsStyles.splitLabel}>AVG MEMO</span>
            <span style={{...statsStyles.splitVal, color: 'oklch(70% 0.14 80)'}}>{formatTime(avgMemo)}</span>
          </div>
          <div style={statsStyles.splitDivider} />
          <div style={statsStyles.splitItem}>
            <span style={statsStyles.splitLabel}>AVG EXEC</span>
            <span style={{...statsStyles.splitVal, color: 'oklch(70% 0.12 200)'}}>{formatTime(avgExec)}</span>
          </div>
          <div style={statsStyles.splitDivider} />
          <div style={statsStyles.splitItem}>
            <span style={statsStyles.splitLabel}>MEMO %</span>
            <span style={statsStyles.splitVal}>
              {avgMemo && avgExec ? Math.round(avgMemo / (avgMemo + avgExec) * 100) + '%' : '—'}
            </span>
          </div>
        </div>
      )}
    </div>
  );
}

function SolveRow({ solve, index, onDelete }) {
  const [expanded, setExpanded] = React.useState(false);
  const num = index + 1;
  const totalDisplay = solve.dnf ? 'DNF'
    : solve.plusTwo ? formatTime(solve.total + 2000) + ' (+2)'
    : formatTime(solve.total);

  return (
    <div style={rowStyles.wrap}>
      <div style={rowStyles.main} onClick={() => setExpanded(x => !x)}>
        <span style={rowStyles.num}>#{num}</span>
        <span style={{...rowStyles.time, ...(solve.dnf ? rowStyles.dnf : {})}}>
          {totalDisplay}
        </span>
        <div style={rowStyles.splits}>
          {solve.memo != null && (
            <>
              <span style={rowStyles.splitChip('80')}>M {formatTime(solve.memo)}</span>
              <span style={rowStyles.splitChip('200')}>E {formatTime(solve.exec)}</span>
            </>
          )}
        </div>
        <span style={rowStyles.date}>{new Date(solve.at).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'})}</span>
        <button style={rowStyles.deleteBtn} onClick={e => { e.stopPropagation(); onDelete(solve.id); }}>✕</button>
        <span style={rowStyles.chevron}>{expanded ? '▲' : '▼'}</span>
      </div>
      {expanded && (
        <div style={rowStyles.detail}>
          <div style={rowStyles.detailGrid}>
            <DetailItem label="Scramble" val={solve.scramble || '—'} mono />
            <DetailItem label="Total" val={formatTime(solve.total)} mono />
            {solve.memo != null && <DetailItem label="Memo" val={formatTime(solve.memo)} mono />}
            {solve.exec != null && <DetailItem label="Exec" val={formatTime(solve.exec)} mono />}
            {solve.dnf && <DetailItem label="Result" val="DNF" />}
            {solve.plusTwo && <DetailItem label="Penalty" val="+2" />}
            <DetailItem label="Date" val={new Date(solve.at).toLocaleString()} />
          </div>
        </div>
      )}
    </div>
  );
}

function DetailItem({ label, val, mono }) {
  return (
    <div style={rowStyles.detailItem}>
      <span style={rowStyles.detailLabel}>{label}</span>
      <span style={{...rowStyles.detailVal, ...(mono ? {fontFamily:"'JetBrains Mono',monospace"} : {})}}>{val}</span>
    </div>
  );
}

function HistoryPanel({ solves, onDelete, onClear }) {
  const [filter, setFilter] = React.useState('all'); // all | ok | dnf
  const filtered = solves.filter(s => {
    if (filter === 'ok') return !s.dnf;
    if (filter === 'dnf') return s.dnf;
    return true;
  });
  const reversed = [...filtered].reverse();

  return (
    <div style={historyStyles.wrap}>
      <div style={historyStyles.header}>
        <span style={historyStyles.title}>History</span>
        <div style={historyStyles.filters}>
          {['all','ok','dnf'].map(f => (
            <button key={f} style={{...historyStyles.filterBtn, ...(filter===f ? historyStyles.filterActive : {})}}
              onClick={() => setFilter(f)}>
              {f.toUpperCase()}
            </button>
          ))}
        </div>
        {solves.length > 0 && (
          <button style={historyStyles.clearBtn} onClick={onClear}>Clear all</button>
        )}
      </div>

      {reversed.length === 0 ? (
        <div style={historyStyles.empty}>
          {solves.length === 0 ? 'No solves yet. Start timing!' : 'No solves match this filter.'}
        </div>
      ) : (
        <div style={historyStyles.list}>
          {reversed.map((s, i) => (
            <SolveRow key={s.id} solve={s} index={filtered.length - 1 - i} onDelete={onDelete} />
          ))}
        </div>
      )}
    </div>
  );
}

const statsStyles = {
  bar: {
    background: 'oklch(14% 0.01 250)',
    border: '1px solid oklch(20% 0.01 250)',
    borderRadius: '8px', padding: '16px 20px',
    display: 'flex', flexDirection: 'column', gap: '12px',
  },
  grid: { display: 'flex', gap: '0', flexWrap: 'wrap' },
  cell: {
    flex: '1 1 60px', display: 'flex', flexDirection: 'column',
    alignItems: 'center', gap: '4px',
    padding: '4px 8px',
    borderRight: '1px solid oklch(20% 0.01 250)',
  },
  cellLabel: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '9px', letterSpacing: '0.12em',
    color: 'oklch(40% 0.01 250)', fontWeight: '600',
  },
  cellVal: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '16px', fontWeight: '500',
    color: 'oklch(80% 0.01 250)',
  },
  splitRow: {
    display: 'flex', alignItems: 'center', gap: '0',
    borderTop: '1px solid oklch(18% 0.01 250)', paddingTop: '12px',
  },
  splitItem: {
    flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px',
  },
  splitLabel: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '9px', letterSpacing: '0.12em', color: 'oklch(40% 0.01 250)',
  },
  splitVal: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '15px', fontWeight: '500', color: 'oklch(70% 0.01 250)',
  },
  splitDivider: { width: '1px', height: '32px', background: 'oklch(20% 0.01 250)' },
};

const rowStyles = {
  wrap: {
    background: 'oklch(14% 0.01 250)',
    borderBottom: '1px solid oklch(18% 0.01 250)',
  },
  main: {
    display: 'flex', alignItems: 'center', gap: '12px',
    padding: '10px 16px', cursor: 'pointer',
    transition: 'background 0.1s',
  },
  num: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '11px', color: 'oklch(35% 0.01 250)',
    minWidth: '28px',
  },
  time: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '15px', fontWeight: '500',
    color: 'oklch(80% 0.01 250)', minWidth: '72px',
  },
  dnf: { color: 'oklch(65% 0.14 25)' },
  splits: { display: 'flex', gap: '6px', flex: 1 },
  splitChip: (hue) => ({
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '11px', padding: '2px 7px', borderRadius: '4px',
    background: `oklch(18% 0.06 ${hue})`,
    color: `oklch(65% 0.14 ${hue})`,
  }),
  date: { fontSize: '11px', color: 'oklch(35% 0.01 250)', marginLeft: 'auto' },
  deleteBtn: {
    background: 'none', border: 'none', color: 'oklch(35% 0.01 250)',
    cursor: 'pointer', fontSize: '11px', padding: '2px 4px',
    transition: 'color 0.15s',
  },
  chevron: { fontSize: '9px', color: 'oklch(35% 0.01 250)', minWidth: '12px' },
  detail: {
    padding: '12px 16px 14px 44px',
    background: 'oklch(12% 0.01 250)',
    borderTop: '1px solid oklch(18% 0.01 250)',
  },
  detailGrid: { display: 'flex', flexDirection: 'column', gap: '6px' },
  detailItem: { display: 'flex', gap: '12px', alignItems: 'baseline' },
  detailLabel: { fontSize: '11px', color: 'oklch(40% 0.01 250)', minWidth: '60px' },
  detailVal: { fontSize: '13px', color: 'oklch(70% 0.01 250)', wordBreak: 'break-all' },
};

const historyStyles = {
  wrap: {
    background: 'oklch(14% 0.01 250)',
    border: '1px solid oklch(20% 0.01 250)',
    borderRadius: '8px', overflow: 'hidden',
  },
  header: {
    display: 'flex', alignItems: 'center', gap: '12px',
    padding: '12px 16px',
    borderBottom: '1px solid oklch(18% 0.01 250)',
  },
  title: {
    fontSize: '12px', fontWeight: '600',
    color: 'oklch(55% 0.01 250)', letterSpacing: '0.06em',
  },
  filters: { display: 'flex', gap: '4px' },
  filterBtn: {
    padding: '3px 10px', borderRadius: '4px', border: 'none',
    background: 'transparent', color: 'oklch(40% 0.01 250)',
    fontSize: '11px', fontWeight: '600', cursor: 'pointer',
    fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.06em',
    transition: 'all 0.15s',
  },
  filterActive: {
    background: 'oklch(20% 0.01 250)', color: 'oklch(65% 0.01 250)',
  },
  clearBtn: {
    marginLeft: 'auto', background: 'none', border: 'none',
    color: 'oklch(40% 0.08 25)', fontSize: '11px', cursor: 'pointer',
    fontFamily: "'Inter', sans-serif",
  },
  empty: {
    padding: '32px', textAlign: 'center',
    color: 'oklch(35% 0.01 250)', fontSize: '13px',
  },
  list: { maxHeight: '340px', overflowY: 'auto' },
};

Object.assign(window, { StatsBar, HistoryPanel });