// ─── RACE ANALYSIS — wet running: "Fastest in the wet" card + Wet pace chart (Race trace tab) ─────────
// Data: S.wet + car.wet from frsCompute (ur2d-replay-stats.jsx). Rendered only when the race had a wet phase.
const FRA_WET = '#2F7FD8', FRA_WET_TX = '#6FB0FF';
const fraWetCss = `
.fra-wc{position:relative;margin-bottom:26px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);border:1px solid rgba(47,127,216,.5);background:#04070b;overflow:hidden}
.fra-wc::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(104deg,rgba(111,176,255,.05) 0 1px,transparent 1px 14px);pointer-events:none}
.fra-wc>div{position:relative;min-width:0}
.fra-wc-main{display:grid;gap:18px;align-content:start;padding:22px clamp(16px,2.4vw,30px) 24px;border-left:4px solid ${FRA_WET}}
.fra-wc-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.fra-wc-k{font:600 12px/1 'JetBrains Mono',monospace;letter-spacing:.28em;text-transform:uppercase;color:${FRA_WET_TX}}
.fra-wc-cond{font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:${COLORS.textMute}}
.fra-wc-who{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}
.fra-wc-who .nm{font:900 clamp(30px,3.6vw,52px)/.92 'Archivo',sans-serif;letter-spacing:-.03em;text-transform:uppercase;color:${COLORS.text};overflow-wrap:anywhere}
.fra-wc-who .tm{display:flex;align-items:center;gap:8px;margin-top:10px;font:500 12px/1.3 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:${COLORS.textMute}}
.fra-wc-who .tm i{width:10px;height:10px;flex:none}
.fra-wc-who img{width:clamp(84px,9vw,128px);height:auto;display:block}
.fra-wc-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.fra-wc-big b{font:900 clamp(40px,4.6vw,64px)/.9 'Archivo',sans-serif;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.fra-wc-big span{font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:${COLORS.textMute}}
.fra-wc-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding-top:16px;border-top:1px solid ${COLORS.hairline}}
.fra-wc-dl dt{font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:${COLORS.textDim}}
.fra-wc-dl dd{margin:7px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:800 18px/1 'Archivo',sans-serif;color:${COLORS.text};font-variant-numeric:tabular-nums}
.fra-wc-dl small{font:500 12px/1 'JetBrains Mono',monospace;color:${COLORS.textMute}}
.fra-wc-side{display:grid;align-content:start;padding:22px clamp(16px,2.2vw,26px);border-left:1px solid rgba(47,127,216,.3);background:rgba(0,0,0,.4)}
.fra-wc-h{margin-bottom:8px;font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:${COLORS.textMute}}
.fra-wc-r{display:grid;grid-template-columns:22px minmax(0,1fr) auto 66px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.fra-wc-r .p{font:900 15px/1 'Archivo',sans-serif;color:${COLORS.textMute};text-align:right}
.fra-wc-r .n{padding-left:9px;font:800 14px/1 'Archivo',sans-serif;text-transform:uppercase;color:${COLORS.text};white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fra-wc-r .v{font:700 13px/1 'JetBrains Mono',monospace;color:${COLORS.text};font-variant-numeric:tabular-nums}
.fra-wc-r .g{font:500 12px/1 'JetBrains Mono',monospace;color:${COLORS.textMute};text-align:right;font-variant-numeric:tabular-nums}
.fra-wc-more{all:unset;cursor:pointer;justify-self:start;margin-top:14px;padding:10px 0;font:600 12px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:${FRA_WET_TX}}
.fra-wc-more:hover{color:#fff}
.fra-wp{display:grid;gap:4px}
.fra-wp-row{display:grid;grid-template-columns:24px minmax(76px,160px) minmax(0,1fr) 72px 66px 40px;align-items:center;gap:10px;transition:opacity .15s}
.fra-wp-row .p{font:900 15px/1 'Archivo',sans-serif;color:${COLORS.textMute};text-align:right;font-variant-numeric:tabular-nums}
.fra-wp-row .n{padding-left:9px;font:800 14px/1 'Archivo',sans-serif;text-transform:uppercase;color:${COLORS.text};white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fra-wp-row .v{font:700 13px/1 'JetBrains Mono',monospace;color:${COLORS.text};text-align:right;font-variant-numeric:tabular-nums}
.fra-wp-row .g{font:500 12px/1 'JetBrains Mono',monospace;color:${COLORS.textMute};text-align:right;font-variant-numeric:tabular-nums}
.fra-wp-tr{position:relative;height:24px}
.fra-wp-tr .ln{position:absolute;top:50%;height:2px;margin-top:-1px;background:${FRA_WET}}
.fra-wp-tr .dot{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;box-shadow:0 0 0 1px #000}
.fra-wp-tr .dry{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid rgba(243,241,236,.75);box-sizing:border-box}
.fra-wp-tr .avg{position:absolute;top:1px;bottom:1px;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 1.5px #000}
@media (max-width:820px){.fra-wc{grid-template-columns:minmax(0,1fr)}.fra-wc-side{border-left:0;border-top:1px solid rgba(47,127,216,.3)}.fra-wc-dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fra-wp-row{grid-template-columns:20px minmax(60px,100px) minmax(0,1fr) 62px}.fra-wp-row .x{display:none}}
`;
const fraPct = (v) => Math.round(v * 100) + '%';
const fraWetWin = (S) => S.wet.windows.map((w) => (w.from === w.to ? 'L' + w.from : `L${w.from}–${w.to}`)).join(' · ');
const fraWetLaps = (S, c) => c.laps.filter((l) => l.wetClean);
const fraTyreBadge = (k) => { const t = FRA_TYRE[k] || ['#555', '#fff', '?']; return <span className="fra-tyb" title={t[2]} style={{ borderColor: t[0], color: t[0] === '#F2F2F2' ? '#fff' : t[0] }}>{k || '?'}</span>; };

function FRAWetCard({ S, drv, onMore }) {
  const ranked = S.wet.ranked.map((id) => S.cars.find((c) => c.id === id)), top = ranked[0], d = drv[top.id], w = top.wet;
  const tyres = Object.entries(w.tyres).sort((a, b) => b[1] - a[1]);
  return (
    <div className="fra-wc">
      <div className="fra-wc-main">
        <div className="fra-wc-top"><span className="fra-wc-k">◆ Fastest in the wet</span><span className="fra-wc-cond">Wet track {fraWetWin(S)} · peak {fraPct(S.wet.peak)}</span></div>
        <div className="fra-wc-who">
          <div style={{ minWidth: 0 }}><div className="nm">{d.label}</div><div className="tm"><i style={{ background: d.color }}></i>{d.team || 'Independent'} · finished {top.dnf ? 'DNF' : 'P' + top.pos}</div></div>
          {d.car ? <img src={d.car} alt=""></img> : null}
        </div>
        <div className="fra-wc-big"><b>{fraFmt(w.pace)}</b><span>average clean lap on a wet track · {w.n} lap{w.n > 1 ? 's' : ''}</span></div>
        <dl className="fra-wc-dl">
          <div><dt>Best wet lap</dt><dd>{fraFmt(w.best.t)}<small>L{w.best.lap} · {fraPct(w.best.wet)} wet</small></dd></div>
          <div><dt>Tyres in the wet</dt><dd>{tyres.map(([k, n]) => <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>{fraTyreBadge(k)}<small>×{n}</small></span>)}</dd></div>
          <div><dt>vs own dry pace</dt><dd>{w.dry != null ? fraDeg(w.pace - w.dry) : '—'}</dd></div>
        </dl>
      </div>
      <div className="fra-wc-side">
        <div className="fra-wc-h">Next quickest in the wet</div>
        {ranked.slice(1, 5).map((c) => <div key={c.id} className="fra-wc-r"><span className="p">{c.wet.rank}</span><span className="n" style={{ boxShadow: `inset 3px 0 0 ${drv[c.id].color}` }}>{drv[c.id].label}</span><span className="v">{fraFmt(c.wet.pace)}</span><span className="g">+{(c.wet.pace - w.pace).toFixed(3)}</span></div>)}
        {onMore && <button className="fra-wc-more" onClick={onMore}>Full wet ranking ↓</button>}
      </div>
    </div>);
}

function FRAWetPace({ S, drv, foc = [] }) {
  const ranked = S.wet.ranked.map((id) => S.cars.find((c) => c.id === id)), best = ranked[0].wet.pace;
  const out = S.cars.filter((c) => c.wet && c.wet.rank == null);
  const vals = []; ranked.forEach((c) => { fraWetLaps(S, c).forEach((l) => vals.push(l.t)); if (c.wet.dry != null) vals.push(c.wet.dry); });
  vals.sort((a, b) => a - b);
  const lo = Math.floor((vals[0] - 0.15) * 2) / 2, hi = Math.ceil((vals[Math.floor(0.97 * (vals.length - 1))] + 0.2) * 2) / 2;
  const pct = (t) => Math.max(0, Math.min(100, ((t - lo) / (hi - lo)) * 100));
  const step = hi - lo > 5 ? 1 : 0.5, ticks = []; for (let v = Math.ceil(lo / step) * step; v <= hi + 1e-9; v += step) ticks.push(+v.toFixed(1));
  const used = ['S', 'M', 'H', 'I', 'W'].filter((k) => ranked.some((c) => fraWetLaps(S, c).some((l) => l.c === k)));
  return (
    <div className="fra-wp">
      <div className="fra-wp-row"><span></span><span className="g" style={{ textAlign: 'left' }}>Lap time</span>
        <div className="fra-axis">{ticks.map((v) => <span key={v} style={{ left: pct(v) + '%' }}>{v % 1 ? v.toFixed(1) : v + 's'}</span>)}</div>
        <span className="g">Avg</span><span className="g x">Gap</span><span className="g x">Laps</span></div>
      {ranked.map((c) => { const d = drv[c.id], w = c.wet;
        return (
          <div key={c.id} className="fra-wp-row" style={{ opacity: !foc.length || foc.includes(c.id) ? 1 : 0.3 }}>
            <span className="p" style={w.rank === 1 ? { color: FRA_WET_TX } : null}>{w.rank}</span>
            <span className="n" style={{ boxShadow: `inset 3px 0 0 ${d.color}` }}>{d.label}</span>
            <div className="fra-wp-tr">
              {ticks.map((v) => <span key={v} className="fra-grid" style={{ left: pct(v) + '%' }}></span>)}
              {w.dry != null && <span className="ln" title={`${fraDeg(w.pace - w.dry)} against own dry pace`} style={{ left: Math.min(pct(w.dry), pct(w.pace)) + '%', width: Math.abs(pct(w.pace) - pct(w.dry)) + '%' }}></span>}
              {fraWetLaps(S, c).map((l) => <span key={l.n} className="dot" title={`L${l.n} · ${fraFmt(l.t)} · ${(FRA_TYRE[l.c] || [0, 0, '?'])[2]} · ${fraPct(l.wet)} wet`} style={{ left: pct(l.t) + '%', background: (FRA_TYRE[l.c] || ['#777'])[0] }}></span>)}
              {w.dry != null && <span className="dry" title={`Dry pace ${fraFmt(w.dry)}`} style={{ left: pct(w.dry) + '%' }}></span>}
              <span className="avg" title={`Wet pace ${fraFmt(w.pace)} · ${w.n} lap${w.n > 1 ? 's' : ''}`} style={{ left: pct(w.pace) + '%' }}></span>
            </div>
            <span className="v">{fraFmt(w.pace)}</span>
            <span className="g x">{w.rank === 1 ? '—' : '+' + (w.pace - best).toFixed(3)}</span>
            <span className="g x">{w.n}</span>
          </div>); })}
      <div className="fra-lgd">
        <span><i style={{ width: 4, background: '#fff' }}></i>Wet pace (average)</span>
        <span><i style={{ width: 12, height: 12, borderRadius: '50%', border: '2px solid rgba(243,241,236,.75)', boxSizing: 'border-box' }}></i>Own dry pace</span>
        <span><i style={{ width: 18, height: 2, background: FRA_WET }}></i>Time lost to the wet</span>
        {used.map((k) => <span key={k}><i style={{ width: 8, height: 8, borderRadius: '50%', background: FRA_TYRE[k][0] }}></i>{FRA_TYRE[k][2]} lap</span>)}
      </div>
      {out.length > 0 && <div className="fra-note" style={{ marginTop: 10 }}>Not ranked ({S.wet.minLaps > 1 ? `under ${S.wet.minLaps} clean laps` : 'no clean lap'} in the wet): {out.map((c) => drv[c.id].label).join(', ')}</div>}
    </div>);
}

Object.assign(window, { FRA_WET, FRA_WET_TX, fraWetCss, FRAWetCard, FRAWetPace });
