// VariantModal — user wciska „Spróbuj w wariancie"
// Modal pokazuje stan przejściowy: generujemy nowy kontekst dla tej samej umiejętności.
// PRD: user nie widzi listy wariantów, widzi jeden wynik — nowy scenariusz.
// Jakościowo — to loading state, ale z charakterem (user rozumie co się dzieje).

const VARIANT_PHASES = [
  { label: "Dobieram nowy kontekst",  time: 900 },
  { label: "Generuję postać",          time: 1100 },
  { label: "Szlifuję szczegóły",       time: 900 },
  { label: "Gotowe",                   time: 400 },
];

const VariantModal = ({open, skillName, onCancel, onReady}) => {
  const [phase, setPhase] = React.useState(0);

  React.useEffect(() => {
    if (!open) { setPhase(0); return; }
    let cancelled = false;
    let elapsed = 0;
    const runners = VARIANT_PHASES.map((p, i) => {
      elapsed += p.time;
      return setTimeout(() => {
        if (cancelled) return;
        if (i === VARIANT_PHASES.length - 1) {
          setPhase(i);
          setTimeout(() => !cancelled && onReady && onReady(), 600);
        } else {
          setPhase(i + 1);
        }
      }, elapsed);
    });
    return () => { cancelled = true; runners.forEach(clearTimeout); };
  }, [open]);

  if (!open) return null;

  return (
    <div className="modal-overlay" onClick={onCancel}>
      <div className="modal-card" onClick={e=>e.stopPropagation()} style={{maxWidth:460}}>
        <div style={{padding:"32px 36px 28px"}}>
          <div className="eyebrow" style={{color:"var(--accent-3)",marginBottom:20}}>Nowy wariant</div>

          <div style={{fontFamily:"var(--serif)",fontSize:26,lineHeight:1.25,letterSpacing:"-.01em",marginBottom:10}}>
            Przygotowuję inny <em style={{color:"var(--accent-3)",fontStyle:"italic"}}>wariant</em> tego scenariusza.
          </div>
          <div className="muted" style={{fontSize:14,lineHeight:1.55,marginBottom:28}}>
            Ta sama umiejętność{skillName?` — „${skillName}”`:""}, ale inna postać i kontekst. Zajmie chwilę.
          </div>

          {/* Phase list */}
          <div style={{display:"flex",flexDirection:"column",gap:12,marginBottom:24}}>
            {VARIANT_PHASES.slice(0,-1).map((p, i) => {
              const done = i < phase;
              const active = i === phase;
              return (
                <div key={i} style={{display:"flex",alignItems:"center",gap:12,fontSize:13,color: done?"var(--fg-2)":active?"var(--fg)":"var(--fg-4)",transition:".2s"}}>
                  <div style={{width:16,height:16,borderRadius:"50%",display:"grid",placeItems:"center",flexShrink:0,
                    background: done?"var(--ok)":active?"transparent":"var(--surface-3)",
                    border: active?"1.5px solid var(--accent)":"none"}}>
                    {done ? <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5l2 2 4-4" fill="none" stroke="#000" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
                          : active ? <div style={{width:6,height:6,borderRadius:"50%",background:"var(--accent)",animation:"pulseDot 1s infinite"}}/>
                          : null}
                  </div>
                  <span>{p.label}</span>
                  {active && <span style={{marginLeft:"auto"}}><span className="typing"><span/><span/><span/></span></span>}
                </div>
              );
            })}
          </div>

          <div className="muted" style={{fontSize:11,fontFamily:"var(--mono)",letterSpacing:".04em",marginBottom:20}}>
            Wariant przechodzi automatyczny review przed startem.
          </div>

          <button className="btn ghost sm" onClick={onCancel} style={{fontSize:12}}>
            Anuluj
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { VariantModal });