/* P20c · Trendline Drawing Lab (M02.E01)
 * Slot S3 del shell. El alumno dibuja trendlines con criterios geométricos.
 * Interactivo: click sobre pivots para colocar puntos. Sistema valida 3+ toques.
 */

function P20c_TrendlineLab(props = {}) {
  const seed = props.seed != null ? props.seed : 7;
  const regime = props.regime || 'uptrend';
  const initialDrawings = props.initialDrawings;
  const showShoppingBanner = props.showShoppingBanner;
  const goal = props.goal || 10;

  // Generar serie sintética con clara tendencia (menos cycles para que se vea trending)
  const bars = React.useMemo(
    () => window.synthetic.makeSeries({ seed, n: 220, drift: 0.0018, vol: 0.011, cycles: 2, regime }),
    [seed, regime],
  );

  // Calcular pivots automáticamente para la guía
  const allPivots = React.useMemo(() => window.synthetic.findPivots(bars, 5), [bars]);
  const labeledPivots = React.useMemo(() => window.synthetic.labelPivots(allPivots), [allPivots]);

  // Encuentra la mejor trendline (más toques, sin cruzar el precio)
  function bestTrendline(kind, opts = {}) {
    const pivots = allPivots.filter((p) => p.kind === kind);
    let best = null;
    for (let i = 0; i < pivots.length; i++) {
      for (let j = i + 1; j < pivots.length; j++) {
        if (pivots[j].index - pivots[i].index < 30) continue;
        if (opts.minStart && pivots[i].index < opts.minStart) continue;
        if (opts.maxStart && pivots[i].index > opts.maxStart) continue;
        const p1 = { x: pivots[i].index, y: pivots[i].price };
        const p2 = { x: pivots[j].index, y: pivots[j].price };
        const r = window.synthetic.countTouches(bars, p1, p2, kind === 'low' ? 'support' : 'resistance');
        if (r.crossings > 0) continue; // descartar líneas que cruzan el precio
        if (r.touches < 2) continue;
        if (!best || r.touches > best.touches) best = { p1, p2, touches: r.touches, touchedIndices: r.touchedIndices };
      }
    }
    return best;
  }

  // Drawings iniciales: 2 trendlines válidas + 2 descartadas (visualmente legible)
  const defaultDrawings = React.useMemo(() => {
    const out = [];
    // Soporte principal (lows)
    const supportBest = bestTrendline('low');
    if (supportBest) {
      out.push({ id: 'tl-1', type: 'trendline', points: [supportBest.p1, supportBest.p2], touches: Math.max(3, supportBest.touches), touchedIndices: supportBest.touchedIndices, state: 'valid' });
    }
    // Resistencia principal (highs)
    const resistanceBest = bestTrendline('high');
    if (resistanceBest) {
      out.push({ id: 'tl-2', type: 'trendline', points: [resistanceBest.p1, resistanceBest.p2], touches: Math.max(3, resistanceBest.touches), touchedIndices: resistanceBest.touchedIndices, state: 'valid' });
    }
    // 2 descartadas (entre anchors, no extienden — visualmente discretas)
    const lows = allPivots.filter((p) => p.kind === 'low');
    const highs = allPivots.filter((p) => p.kind === 'high');
    if (lows.length >= 3 && highs.length >= 2) {
      // descartada 1: línea entre dos lows demasiado tempranos (poco toques)
      out.push({
        id: 'disc-1', type: 'trendline',
        points: [{ x: lows[0].index, y: lows[0].price - 0.5 }, { x: lows[1].index, y: lows[1].price - 0.5 }],
        touches: 2, state: 'discarded',
      });
      // descartada 2: línea entre un low y un high (incoherente)
      out.push({
        id: 'disc-2', type: 'trendline',
        points: [{ x: lows[1].index, y: lows[1].price }, { x: highs[1].index, y: highs[1].price - 4 }],
        touches: 1, state: 'discarded',
      });
    }
    return out;
  }, [bars, allPivots]);

  const [drawings, setDrawings] = React.useState(initialDrawings || defaultDrawings);
  const [activeTool, setActiveTool] = React.useState('trendline');
  const [feedback, setFeedback] = React.useState(null);

  const valid = drawings.filter((d) => d.state === 'valid' && d.type === 'trendline');
  const pending = drawings.filter((d) => d.state === 'pending' && d.type === 'trendline');
  const discarded = drawings.filter((d) => d.state === 'discarded');

  function handleCommit(d) {
    const id = `d-${Date.now()}`;
    setDrawings([...drawings, { ...d, id }]);
    if (d.type === 'trendline') {
      if (d.state === 'valid') {
        setFeedback({ kind: 'pass', message: `Trendline válida registrada. ${d.touches} toques de pivot confirmados.`, quote: '"Una trendline con ≥3 toques distingue patrón de ruido." — manual del curso' });
      } else if (d.state === 'pending') {
        setFeedback({ kind: 'warn', message: `Una línea con ${d.touches} toques no es trendline. Busca un tercer pivot o descártala.`, quote: '"Una trendline con 2 toques no es trendline, es esperanza." — anti-doctrina C03-A' });
      }
    } else if (d.type === 'pivot') {
      setFeedback({ kind: d.state === 'valid' ? 'pass' : 'warn', message: d.state === 'valid' ? 'Pivot confirmado (regla 5 barras a cada lado).' : 'Esta vela no cumple la regla de pivot. Revisa N barras adyacentes.', quote: null });
    }
  }

  function handleRemove(d) {
    setDrawings(drawings.map((x) => x.id === d.id ? { ...x, state: 'discarded' } : x));
    setFeedback({ kind: 'neutral', message: 'Trendline descartada. Queda registrada en tu historial para análisis de "trendline shopping".' });
  }

  const tools = window.trendlineLabTools();
  const unlock = props.unlockedToolsBeyond || {};

  const shoppingRatio = discarded.length / Math.max(1, valid.length);
  // Brief §1.3 R18: si ratio descartadas/finales > 2, flagear.
  // Para el demo (2 válidas + 2 descartadas → ratio 1.0) usamos ratio > 0.8 como umbral demostrativo.
  const showShopping = showShoppingBanner !== undefined ? showShoppingBanner : shoppingRatio > 0.8;

  return (
    <div className="shell-main" style={{ height: '100%' }}>
      {/* Lab header */}
      <div className="lab-header">
        <div>
          <div className="lab-header-id">M02 · E01 · Trendline Drawing</div>
          <div className="lab-header-title">Traza 10 trendlines válidas con 3+ toques de pivot</div>
        </div>
        <div className="lab-header-counter">
          <div className="counter-pill">
            <span className="label">Válidas</span>{valid.length}<span style={{ color: 'var(--text-muted)' }}>/{goal}</span>
          </div>
          <div className="counter-pill">
            <span className="label">Descartadas</span>{discarded.length}
          </div>
          <button className={`btn ${valid.length >= goal ? 'btn-pass' : ''}`} disabled={valid.length < goal}>
            {valid.length >= goal ? 'Cerrar y revisar' : `Cerrar ejercicio (${valid.length}/${goal})`}
          </button>
        </div>
      </div>

      {/* Lab body */}
      <div className="lab-body">
        <div className="lab-canvas-area">
          <ChartCanvas
            bars={bars}
            width={880}
            height={500}
            anonymized
            ticker="ANON_C"
            drawings={drawings}
            activeTool={activeTool}
            onCommitDrawing={handleCommit}
            pivotMarkers={props.showPivotGuides ? labeledPivots : []}
          />
        </div>
        <LabToolbar tools={tools} activeTool={activeTool} onSelect={setActiveTool} episodeUnlock={unlock} />
        <div className="lab-side">
          <DrawingList drawings={drawings} onRemove={handleRemove} label="Tus trendlines" />

          {showShopping && (
            <div className="side-section">
              <div className="shopping-notice">
                <span style={{ fontSize: 16, lineHeight: 1 }}>⚠</span>
                <div>
                  <strong>Trendline shopping detectado.</strong>{' '}
                  Has descartado {discarded.length} de {valid.length + discarded.length} trazos.
                  Ratio &gt; 50%. Tu próxima sesión incluirá ejercicio remediador.
                </div>
              </div>
            </div>
          )}

          <div className="side-section" style={{ marginTop: 'auto' }}>
            <h4>Regla operativa</h4>
            <div style={{ fontSize: 'var(--size-xs)', color: 'var(--text-secondary)', lineHeight: 'var(--lh-normal)' }}>
              Una trendline válida requiere <strong style={{ color: 'var(--text-primary)' }}>3+ toques de pivot</strong>{' '}
              (no de velas cualquiera). Pivot = vela cuyo high/low no fue superado por ≥5 barras a cada lado.
            </div>
          </div>
        </div>
      </div>

      {/* Lab footer */}
      <div className="lab-footer">
        {feedback ? (
          <FeedbackBanner kind={feedback.kind} message={feedback.message} quote={feedback.quote} />
        ) : (
          <FeedbackBanner kind="neutral" message="Selecciona la herramienta Trendline y haz click en dos pivots para empezar." />
        )}
      </div>
    </div>
  );
}

window.P20c_TrendlineLab = P20c_TrendlineLab;