/* P20g · Bar Replay con drawings (M02.E05)
 * Bar replay forward-only. El alumno emite escenarios mientras avanza.
 * Una vez emitido un escenario o avanzada una barra, no se puede retroceder.
 */

function P20g_BarReplay(props = {}) {
  const seed = props.seed != null ? props.seed : 14;
  const totalBars = 250;
  const startBars = 80;  // visibles al inicio
  const targetBars = 150;
  const initialVisible = props.initialVisible != null ? props.initialVisible : 132;

  const bars = React.useMemo(
    () => window.synthetic.makeSeries({ seed, n: totalBars, drift: 0.001, vol: 0.013, cycles: 2, regime: 'transition' }),
    [seed],
  );

  const [visibleBars, setVisibleBars] = React.useState(initialVisible);
  const [playing, setPlaying] = React.useState(false);
  const [speed, setSpeed] = React.useState(2);
  const [drawings, setDrawings] = React.useState([]);
  const [activeTool, setActiveTool] = React.useState(null);

  // Escenarios emitidos por el alumno (con timestamp = barra en que se emitieron)
  const [scenarios, setScenarios] = React.useState(props.initialScenarios || [
    { id: 's1', text: 'Espero rebote sobre soporte ascendente. Convicción 3.', emittedAt: 95, conviction: 3 },
    { id: 's2', text: 'Si rompe nivel 102, gira a corto. Convicción 4.', emittedAt: 118, conviction: 4 },
  ]);
  const [newScenario, setNewScenario] = React.useState('');
  const [newConviction, setNewConviction] = React.useState(3);

  // Tick de replay
  React.useEffect(() => {
    if (!playing) return;
    const interval = 1000 / speed;
    const t = setInterval(() => {
      setVisibleBars((v) => {
        if (v >= totalBars) { setPlaying(false); return v; }
        return v + 1;
      });
    }, interval);
    return () => clearInterval(t);
  }, [playing, speed]);

  function step() { setVisibleBars((v) => Math.min(totalBars, v + 1)); }

  function commitScenario() {
    if (!newScenario.trim()) return;
    setScenarios([...scenarios, { id: `s-${Date.now()}`, text: newScenario, emittedAt: visibleBars, conviction: newConviction }]);
    setNewScenario('');
  }

  function handleCommitDrawing(d) {
    setDrawings([...drawings, { ...d, id: `d-${Date.now()}`, emittedAt: visibleBars }]);
  }

  const progress = (visibleBars / totalBars) * 100;
  const tools = [
    { id: 'pivot', icon: Icon.pivot(16), label: 'Pivot marker' },
    { id: 'trendline', icon: Icon.trendline(16), label: 'Trendline' },
    { id: 'horizontal-support', icon: Icon.horizontal(16), label: 'Soporte' },
    { id: 'horizontal-resistance', icon: Icon.horizontal(16), label: 'Resistencia' },
    { id: 'annotation', icon: Icon.annotation(16), label: 'Anotación' },
  ];

  return (
    <div className="shell-main" style={{ height: '100%' }}>
      <div className="lab-header">
        <div>
          <div className="lab-header-id">M02 · E05 · Bar Replay con trendlines</div>
          <div className="lab-header-title">Avanza barra a barra. Dibuja y emite escenarios <em>antes</em> de ver qué pasa.</div>
        </div>
        <div className="lab-header-counter">
          <div className="counter-pill"><span className="label">Barra</span>{visibleBars}<span style={{ color: 'var(--text-muted)' }}>/{totalBars}</span></div>
          <div className="counter-pill"><span className="label">Escenarios</span>{scenarios.length}</div>
        </div>
      </div>

      <div className="lab-body">
        <div className="lab-canvas-area" style={{ flexDirection: 'column', gap: 12 }}>
          <ChartCanvas
            bars={bars}
            visibleBars={visibleBars}
            width={840}
            height={460}
            anonymized
            ticker="ANON_G"
            drawings={drawings}
            activeTool={activeTool}
            onCommitDrawing={handleCommitDrawing}
          />

          {/* Replay controls bar */}
          <div className="replay-controls" style={{ width: 840 }}>
            <button className="btn btn-icon" onClick={() => setPlaying(!playing)} title={playing ? 'Pausar' : 'Reproducir'}>
              {playing ? Icon.pause(14) : Icon.play(14)}
            </button>
            <button className="btn btn-icon" onClick={step} title="Avanzar 1 barra">{Icon.step(14)}</button>
            <div className="replay-track">
              <div className="fill" style={{ width: `${progress}%` }} />
              {scenarios.map((s) => (
                <div key={s.id} className="commits" style={{ left: `${(s.emittedAt / totalBars) * 100}%` }} title={`Escenario en barra ${s.emittedAt}`} />
              ))}
            </div>
            <div className="speed">
              {[1, 2, 4, 8].map((s) => (
                <button key={s} onClick={() => setSpeed(s)} className="btn btn-ghost" style={{ padding: '4px 8px', minWidth: 28, color: speed === s ? 'var(--text-primary)' : 'var(--text-muted)', fontWeight: speed === s ? 600 : 400 }}>{s}×</button>
              ))}
            </div>
            <span className="replay-cement-notice">Forward-only · sin retroceso</span>
          </div>
        </div>

        <LabToolbar tools={tools} activeTool={activeTool} onSelect={setActiveTool} />

        <div className="lab-side">
          {/* Compositor de escenarios */}
          <div className="side-section">
            <h4>Emitir escenario</h4>
            <textarea
              value={newScenario}
              onChange={(e) => setNewScenario(e.target.value)}
              placeholder="Ej: «Espero rebote sobre el soporte ascendente.»"
              style={{
                width: '100%', minHeight: 64, resize: 'vertical',
                background: 'var(--surface-2)', border: '1px solid var(--border-default)',
                borderRadius: 'var(--radius-sm)', padding: '8px 10px',
                color: 'var(--text-primary)', fontFamily: 'inherit', fontSize: 'var(--size-xs)',
              }}
            />
            <ConvictionPicker value={newConviction} onChange={setNewConviction} />
            <button onClick={commitScenario} disabled={!newScenario.trim()} className="btn btn-primary" style={{ marginTop: 10, width: '100%' }}>
              Cementar escenario en barra {visibleBars}
            </button>
            <div style={{ fontSize: 'var(--size-2xs)', color: 'var(--text-muted)', marginTop: 8, fontStyle: 'italic' }}>
              Una vez cementado, no se puede editar ni retroceder. La calibración se mide tras finalizar el replay.
            </div>
          </div>

          {/* Lista de escenarios emitidos */}
          <div className="side-section" style={{ flex: 1, overflowY: 'auto' }}>
            <h4>Escenarios emitidos <span className="count">{scenarios.length}</span></h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {scenarios.length === 0 && <div style={{ fontSize: 'var(--size-xs)', color: 'var(--text-muted)', fontStyle: 'italic' }}>Aún no has emitido escenarios.</div>}
              {scenarios.map((s) => (
                <div key={s.id} style={{ padding: '8px 10px', background: 'var(--surface-2)', borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-subtle)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
                    <span style={{ fontSize: 10, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>BARRA {s.emittedAt} {Icon.lock(9)}</span>
                    <span style={{ fontSize: 10, color: 'var(--text-primary)', fontFamily: 'var(--font-mono)' }}>conv {s.conviction}/5</span>
                  </div>
                  <div style={{ fontSize: 'var(--size-xs)', lineHeight: 'var(--lh-snug)', color: 'var(--text-primary)' }}>{s.text}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="lab-footer">
        <FeedbackBanner
          kind="neutral"
          icon={Icon.lock(11)}
          message="Bar replay forward-only activo. Tu decisión en barra 132 quedará cementada con timestamp."
          quote="«El alumno no aprende viendo gráficos terminados, aprende decidiendo antes de ver qué pasó.»"
        />
      </div>
    </div>
  );
}

window.P20g_BarReplay = P20g_BarReplay;