/* P20a · Galería de clasificación (M00.E00 diagnóstico, 20 charts)
 * Grid de thumbnails. Click → modal con chart grande + clasificación + convicción.
 */

function P20a_Gallery(props = {}) {
  const total = props.total || 20;
  const charts = React.useMemo(() => {
    const regimes = ['uptrend', 'downtrend', 'range', 'transition'];
    const out = [];
    for (let i = 0; i < total; i++) {
      const r = regimes[(i * 3 + 2) % 4];
      out.push({ id: i, seed: 50 + i * 11, regime: r, groundTruth: r });
    }
    return out;
  }, [total]);

  const [submissions, setSubmissions] = React.useState(props.initialSubmissions || {
    0: { label: 'uptrend', conviction: 4, doubt: '' },
    2: { label: 'range', conviction: 3, doubt: 'Veo lateralidad amplia pero podría estar al final de un impulso.' },
    5: { label: 'transition', conviction: 2, doubt: '' },
    7: { label: 'downtrend', conviction: 5, doubt: '' },
    9: { label: 'uptrend', conviction: 3, doubt: '' },
    12: { label: 'range', conviction: 4, doubt: '' },
  });
  const [openChartId, setOpenChartId] = React.useState(props.openChartId != null ? props.openChartId : null);

  const regimeColor = {
    uptrend: 'var(--candle-up)', downtrend: 'var(--candle-down)',
    range: 'var(--text-secondary)', transition: 'var(--signal-warning)',
  };
  const regimeLabel = {
    uptrend: 'Alcista', downtrend: 'Bajista', range: 'Rango', transition: 'Transición',
  };

  const completed = Object.keys(submissions).length;

  return (
    <div className="shell-main" style={{ height: '100%' }}>
      <div className="lab-header">
        <div>
          <div className="lab-header-id">M00 · E00 · Diagnóstico inicial</div>
          <div className="lab-header-title">Clasifica los 20 gráficos. Sin tutor. Sin glosario. Sin tiempo límite.</div>
        </div>
        <div className="lab-header-counter">
          <div className="counter-pill"><span className="label">Clasificados</span>{completed}<span style={{ color: 'var(--text-muted)' }}>/{total}</span></div>
          <button className={`btn ${completed >= total ? 'btn-pass' : ''}`} disabled={completed < total}>Cerrar y revelar</button>
        </div>
      </div>

      <div style={{ padding: 16, overflowY: 'auto', background: 'var(--surface-0)', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
        {charts.map((c) => {
          const sub = submissions[c.id];
          return (
            <button key={c.id} onClick={() => setOpenChartId(c.id)} style={{
              background: 'var(--surface-1)',
              border: '1px solid ' + (sub ? regimeColor[sub.label] : 'var(--border-subtle)'),
              borderRadius: 'var(--radius-md)',
              padding: 10,
              cursor: 'pointer',
              textAlign: 'left',
              transition: 'transform 120ms, border-color 120ms',
              position: 'relative',
            }}
            onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = ''}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', textTransform: 'uppercase' }}>ANON_{String.fromCharCode(65 + c.id)}</span>
                {sub ? (
                  <span className="chip chip-mono" style={{ background: regimeColor[sub.label] + '22', color: regimeColor[sub.label], border: 'none' }}>
                    {regimeLabel[sub.label]} · {sub.conviction}
                  </span>
                ) : (
                  <span style={{ fontSize: 10, color: 'var(--text-disabled)', fontFamily: 'var(--font-mono)' }}>—</span>
                )}
              </div>
              <ThumbChart seed={c.seed} regime={c.regime} />
            </button>
          );
        })}
      </div>

      <div className="lab-footer">
        <FeedbackBanner kind="neutral" message="Gráficos anónimos: sin ticker, sin fechas reales. La identidad y el desenlace se revelan tras cerrar el ejercicio." />
      </div>

      {openChartId != null && (
        <GalleryModal
          chart={charts[openChartId]}
          chartId={openChartId}
          submission={submissions[openChartId]}
          onClose={() => setOpenChartId(null)}
          onSubmit={(s) => {
            setSubmissions({ ...submissions, [openChartId]: s });
            // No avanzar automáticamente — el alumno puede revisar
            setOpenChartId(null);
          }}
        />
      )}
    </div>
  );
}

function ThumbChart({ seed, regime }) {
  const bars = React.useMemo(() =>
    window.synthetic.makeSeries({ seed, n: 100, drift: 0.001, vol: 0.014, cycles: 2, regime }),
    [seed, regime]);
  return (
    <ChartCanvas
      bars={bars}
      width={196}
      height={108}
      anonymized
      showVolume={false}
      padding={{ top: 6, right: 6, bottom: 6, left: 6 }}
      showWatermark={false}
    />
  );
}

function GalleryModal({ chart, chartId, submission, onClose, onSubmit }) {
  const [label, setLabel] = React.useState(submission ? submission.label : null);
  const [conviction, setConviction] = React.useState(submission ? submission.conviction : 3);
  const [doubt, setDoubt] = React.useState(submission ? submission.doubt : '');

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

  const options = [
    { id: 'uptrend', label: 'Alcista', color: '#5BC68F' },
    { id: 'downtrend', label: 'Bajista', color: '#D85C5C' },
    { id: 'range', label: 'Rango', color: '#A2A9B4' },
    { id: 'transition', label: 'Transición', color: '#F0B86E' },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'rgba(10,12,16,0.78)', backdropFilter: 'blur(8px)', display: 'grid', placeItems: 'center', zIndex: 20 }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: 'var(--surface-1)', borderRadius: 'var(--radius-lg)',
        border: '1px solid var(--border-default)', boxShadow: 'var(--shadow-3)',
        padding: 20, width: 920, maxWidth: '92%', display: 'flex', flexDirection: 'column', gap: 16,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>GRÁFICO {chartId + 1} DE 20 · ANON_{String.fromCharCode(65 + chartId)}</div>
            <div style={{ fontSize: 16, fontWeight: 600, marginTop: 4 }}>Clasifica el régimen visible</div>
          </div>
          <button className="btn btn-ghost btn-icon" onClick={onClose}>{Icon.close()}</button>
        </div>
        <ChartCanvas bars={bars} width={880} height={360} anonymized />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
          {options.map((opt) => (
            <button key={opt.id} onClick={() => setLabel(opt.id)} style={{
              padding: '12px 16px',
              background: label === opt.id ? opt.color + '22' : 'var(--surface-2)',
              border: '1.5px solid ' + (label === opt.id ? opt.color : 'var(--border-default)'),
              borderRadius: 'var(--radius-sm)',
              color: label === opt.id ? opt.color : 'var(--text-primary)',
              cursor: 'pointer', fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
            }}>{opt.label}</button>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 16, alignItems: 'center' }}>
          <ConvictionPicker value={conviction} onChange={setConviction} />
          <input
            value={doubt}
            onChange={(e) => setDoubt(e.target.value)}
            placeholder="Duda en una línea (opcional)"
            style={{ background: 'var(--surface-2)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', padding: '8px 12px', color: 'var(--text-primary)', fontFamily: 'inherit', fontSize: 13 }}
          />
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" disabled={!label} onClick={() => onSubmit({ label, conviction, doubt })}>
            Cementar y siguiente
          </button>
        </div>
      </div>
    </div>
  );
}

window.P20a_Gallery = P20a_Gallery;