// PIT STRATEGY PLANNER — interactive tire strategy editor
(function() {
  const useS = React.useState;
  const useM = React.useMemo;

  const COMPOUND_COLORS = {
    S: { bg: "rgba(200,16,46,0.2)", border: "#C8102E", label: "SOFT" },
    M: { bg: "rgba(201,162,74,0.2)", border: "#C9A24A", label: "MEDIUM" },
    H: { bg: "rgba(232,228,220,0.15)", border: "#E8E4DC", label: "HARD" },
    I: { bg: "rgba(91,183,226,0.2)", border: "#5BB7E2", label: "INTER" },
    W: { bg: "rgba(59,130,246,0.2)", border: "#3B82F6", label: "WET" },
  };

  function PitStrategyPlanner({ totalLaps, carClass, onClose }) {
    const cliff = (carClass && carClass.tyre_cliff_lap) || 40;
    const pitTime = (carClass && carClass.pit_clean_s) || 2.5;

    const [stints, setStints] = useS([
      { compound: "S", start: 1, end: Math.min(Math.round(totalLaps * 0.35), cliff - 5) },
      { compound: "M", start: Math.min(Math.round(totalLaps * 0.35), cliff - 5) + 1, end: Math.round(totalLaps * 0.7) },
      { compound: "H", start: Math.round(totalLaps * 0.7) + 1, end: totalLaps },
    ]);

    const totalPitLoss = useM(() => {
      const stops = stints.length - 1;
      return (stops * (pitTime + 22)).toFixed(1);
    }, [stints.length, pitTime]);

    const updateCompound = (idx, compound) => {
      setStints(prev => prev.map((s, i) => i === idx ? { ...s, compound } : s));
    };

    const updateSplit = (idx, newEnd) => {
      const clamped = Math.max(stints[idx].start + 2, Math.min(newEnd, (stints[idx + 1] ? stints[idx + 1].end - 2 : totalLaps)));
      setStints(prev => prev.map((s, i) => {
        if (i === idx) return { ...s, end: clamped };
        if (i === idx + 1) return { ...s, start: clamped + 1 };
        return s;
      }));
    };

    const addStop = () => {
      if (stints.length >= 5) return;
      const last = stints[stints.length - 1];
      const splitAt = Math.round((last.start + last.end) / 2);
      setStints(prev => [
        ...prev.slice(0, -1),
        { ...last, end: splitAt },
        { compound: "H", start: splitAt + 1, end: last.end },
      ]);
    };

    const removeStop = () => {
      if (stints.length <= 1) return;
      setStints(prev => {
        const merged = [...prev.slice(0, -2), { ...prev[prev.length - 2], end: prev[prev.length - 1].end }];
        return merged;
      });
    };

    return (
      <div className="psp-wrap">
        <div className="psp-header">
          <span className="psp-title">STRATEGY PLANNER</span>
          <span className="psp-meta">{stints.length - 1} STOP · {totalPitLoss}s PIT LOSS</span>
          {onClose && <button className="psp-close" onClick={onClose}>×</button>}
        </div>

        <div className="psp-bar">
          {stints.map((s, i) => {
            const width = ((s.end - s.start + 1) / totalLaps) * 100;
            const cc = COMPOUND_COLORS[s.compound] || COMPOUND_COLORS.M;
            const stintLen = s.end - s.start + 1;
            const overCliff = stintLen > cliff;
            return (
              <div key={i} className="psp-stint" style={{
                width: `${width}%`,
                background: cc.bg,
                borderColor: cc.border,
              }}>
                <span className="psp-stint-label" style={{ color: cc.border }}>
                  {cc.label}
                </span>
                <span className="psp-stint-laps">L{s.start}–{s.end}</span>
                <span className={`psp-stint-len ${overCliff ? "psp-cliff" : ""}`}>
                  {stintLen} laps {overCliff ? "⚠" : ""}
                </span>
              </div>
            );
          })}
        </div>

        <div className="psp-controls">
          <div className="psp-compounds">
            {stints.map((s, i) => (
              <div key={i} className="psp-compound-row">
                <span className="psp-stint-num">S{i + 1}</span>
                {["S", "M", "H", "I", "W"].map(c => (
                  <button key={c}
                    className={`psp-compound-btn ${s.compound === c ? "on" : ""}`}
                    style={{ borderColor: COMPOUND_COLORS[c].border, color: COMPOUND_COLORS[c].border }}
                    onClick={() => updateCompound(i, c)}>
                    {c}
                  </button>
                ))}
                {i < stints.length - 1 && (
                  <input type="range" className="psp-split-slider"
                    min={s.start + 2} max={(stints[i + 1] ? stints[i + 1].end - 2 : totalLaps)}
                    value={s.end}
                    onChange={e => updateSplit(i, parseInt(e.target.value))}
                    title={`Pit on lap ${s.end}`}/>
                )}
              </div>
            ))}
          </div>
          <div className="psp-actions">
            <button className="psp-action-btn" onClick={addStop} disabled={stints.length >= 5}>+ ADD STOP</button>
            <button className="psp-action-btn" onClick={removeStop} disabled={stints.length <= 1}>− REMOVE</button>
          </div>
        </div>

        <div className="psp-notes">
          <span>PIT LOSS: ~{(pitTime + 22).toFixed(0)}s/stop</span>
          <span>TYRE CLIFF: ~{cliff} laps</span>
        </div>
      </div>
    );
  }

  window.PitStrategyPlanner = PitStrategyPlanner;
})();