/* P26 · Perfil del alumno con CalibrationPlot y biases detectados */

function P26_Profile(props = {}) {
  // Datos de calibración: cada bucket de convicción → tasa de acierto observada
  const calibrationData = props.calibration || [
    { conviction: 1, accuracy: 0.22, n: 14, expected: 0.20 },
    { conviction: 2, accuracy: 0.36, n: 28, expected: 0.40 },
    { conviction: 3, accuracy: 0.58, n: 47, expected: 0.60 },
    { conviction: 4, accuracy: 0.69, n: 38, expected: 0.80 },
    { conviction: 5, accuracy: 0.64, n: 31, expected: 0.95 },
  ];

  const convictionHistogram = props.histogram || [
    { conviction: 1, n: 14 },
    { conviction: 2, n: 28 },
    { conviction: 3, n: 47 },
    { conviction: 4, n: 38 },
    { conviction: 5, n: 31 },
  ];

  const biases = [
    { id: 'overconf', severity: 'high', label: 'Sobreconfianza en convicción 5',
      detail: 'Declaras convicción 5 con frecuencia y aciertas 64%, no el 95-100% esperado. Considera reservar el 5 para casos verdaderamente excepcionales.',
      remediation: 'Ejercicio remediador: M00.E00 con 20 charts adicionales, máximo 3 podrán llevar convicción 5.' },
    { id: 'shopping', severity: 'medium', label: 'Trendline shopping moderado',
      detail: 'Ratio descartadas/válidas = 0.62 en M02. Has descartado 3 de cada 5 trendlines antes de comprometerte.',
      remediation: 'Próxima sesión M02.E03 te pedirá comprometer cada trendline antes de validar.' },
    { id: 'categoric', severity: 'low', label: 'Lenguaje categórico ocasional',
      detail: '4 incidencias detectadas en últimos 10 memos. "va a romper", "siempre que veas X". El linter las captura — sólo tenlo presente.',
      remediation: 'Sin acción inmediata. Mantén lectura crítica.' },
  ];

  const trades = props.trades || [
    { module: 'M01.E02', name: 'Rapid Classifier', score: '42/50', date: '12 mar', kind: 'gate' },
    { module: 'M02.E01', name: 'Trendline Drawing', score: '10/10 válidas', date: '15 mar', kind: 'mastery' },
    { module: 'M03.E04', name: 'Canales', score: '9/12', date: '18 mar', kind: 'gate' },
    { module: 'M05.E05', name: 'Spot the Fakeout', score: '12/15', date: '22 mar', kind: 'gate' },
    { module: 'M07.E03', name: 'Paper Trading', score: 'Expectancy +0.42R · 30 trades', date: '01 abr', kind: 'mastery' },
  ];

  return (
    <div className="shell-main" style={{ height: '100%', overflowY: 'auto' }}>
      {/* Header */}
      <div className="lab-header">
        <div>
          <div className="lab-header-id">PERFIL · DATOS PRIVADOS</div>
          <div className="lab-header-title">Tu calibración, sesgos detectados e historial de mastery</div>
        </div>
        <div className="lab-header-counter">
          <span style={{ fontSize: 'var(--size-xs)', color: 'var(--text-muted)' }}>No compartido · No publicado · Sólo visible para ti</span>
        </div>
      </div>

      <div style={{ padding: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, alignContent: 'start' }}>
        {/* CalibrationPlot */}
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 16, gridColumn: 'span 2' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 12 }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 2 }}>CALIBRATION PLOT · 158 DECISIONES</div>
              <div style={{ fontSize: 16, fontWeight: 600 }}>¿Tu convicción declarada predice tu acierto?</div>
            </div>
            <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontFamily: 'var(--font-mono)', maxWidth: 360, lineHeight: 1.5 }}>
              Estás <strong style={{ color: 'var(--signal-pass)' }}>bien calibrado en 1-3</strong>.{' '}
              <strong style={{ color: 'var(--signal-fail)' }}>Sobreconfianza en 5</strong>: aciertas 64%, no el 95% esperado.
            </div>
          </div>
          <CalibrationPlot data={calibrationData} width={920} height={260} />
        </div>

        {/* Histograma convicciones */}
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 16 }}>
          <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12 }}>DISTRIBUCIÓN DE CONVICCIONES</div>
          <ConvictionHistogram data={convictionHistogram} width={460} height={140} />
        </div>

        {/* Métricas globales */}
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 16 }}>
          <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12 }}>MÉTRICAS GLOBALES</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <MetricCard label="Tasa de trendline shopping" value="62%" sub="3 descartadas / 5 válidas" status="warn" />
            <MetricCard label="Calibración global (ECE)" value="0.18" sub="objetivo: < 0.10" status="warn" />
            <MetricCard label="Convicción media" value="3.4" sub="Mediana: 3" status="neutral" />
            <MetricCard label="Lenguaje categórico" value="4" sub="incidencias / 10 memos" status="neutral" />
          </div>
        </div>

        {/* Biases detectados */}
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 16, gridColumn: 'span 2' }}>
          <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12 }}>SESGOS DETECTADOS · 3</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            {biases.map((b) => (
              <div key={b.id} style={{
                padding: 12, background: 'var(--surface-2)', borderRadius: 'var(--radius-sm)',
                borderLeft: `3px solid ${b.severity === 'high' ? 'var(--signal-fail)' : b.severity === 'medium' ? 'var(--signal-warning)' : 'var(--text-muted)'}`,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>{b.label}</span>
                  <span style={{
                    fontSize: 10, fontFamily: 'var(--font-mono)', padding: '2px 6px', borderRadius: 2,
                    background: b.severity === 'high' ? 'var(--signal-fail-soft)' : b.severity === 'medium' ? 'var(--signal-warning-soft)' : 'var(--surface-3)',
                    color: b.severity === 'high' ? 'var(--signal-fail)' : b.severity === 'medium' ? 'var(--signal-warning)' : 'var(--text-muted)',
                    textTransform: 'uppercase', letterSpacing: '0.05em',
                  }}>{b.severity}</span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-secondary)', lineHeight: 1.5, marginBottom: 8 }}>{b.detail}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', fontStyle: 'italic', borderTop: '1px dashed var(--border-default)', paddingTop: 6 }}>{b.remediation}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Historial mastery */}
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 16, gridColumn: 'span 2' }}>
          <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12 }}>HISTORIAL DE MASTERY</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {trades.map((t, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '100px 1fr 220px auto', gap: 12,
                padding: '8px 12px', background: 'var(--surface-2)', borderRadius: 'var(--radius-sm)',
                alignItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 12,
              }}>
                <span style={{ color: 'var(--text-secondary)' }}>{t.module}</span>
                <span style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-sans)' }}>{t.name}</span>
                <span style={{ color: 'var(--signal-pass)' }}>{t.score}</span>
                <span style={{ color: 'var(--text-muted)', fontSize: 11 }}>{t.date}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function CalibrationPlot({ data, width, height }) {
  const pad = { top: 16, right: 24, bottom: 30, left: 36 };
  const innerW = width - pad.left - pad.right;
  const innerH = height - pad.top - pad.bottom;

  // x: convicción 1-5 → 0..innerW
  // y: accuracy 0-1 → innerH..0
  function xPx(c) { return pad.left + ((c - 1) / 4) * innerW; }
  function yPx(acc) { return pad.top + (1 - acc) * innerH; }
  const maxN = Math.max(...data.map((d) => d.n));

  return (
    <svg width={width} height={height} style={{ display: 'block' }}>
      {/* Grid horizontal */}
      {[0, 0.25, 0.5, 0.75, 1].map((y) => (
        <g key={y}>
          <line x1={pad.left} y1={yPx(y)} x2={width - pad.right} y2={yPx(y)} stroke="var(--chart-grid)" strokeWidth={1} />
          <text x={pad.left - 8} y={yPx(y) + 3} fontSize={10} fill="var(--text-muted)" textAnchor="end" fontFamily="JetBrains Mono">{(y * 100).toFixed(0)}%</text>
        </g>
      ))}
      {/* Eje x */}
      {[1, 2, 3, 4, 5].map((c) => (
        <g key={c}>
          <text x={xPx(c)} y={height - pad.bottom + 16} fontSize={11} fill="var(--text-secondary)" textAnchor="middle" fontFamily="IBM Plex Sans">{c}</text>
        </g>
      ))}
      {/* Línea diagonal ideal */}
      <line
        x1={xPx(1)} y1={yPx(0.20)} x2={xPx(5)} y2={yPx(0.95)}
        stroke="var(--calib-ideal)" strokeWidth={1.5} strokeDasharray="5 4" opacity={0.7}
      />
      <text x={xPx(5) - 4} y={yPx(0.95) - 8} fontSize={10} fill="var(--calib-ideal)" textAnchor="end" fontFamily="IBM Plex Sans">calibración ideal</text>

      {/* Puntos */}
      {data.map((d) => {
        const r = 6 + 14 * (d.n / maxN);
        // Color: bajo línea = sobreconfianza, sobre línea = subconfianza, en línea = bueno
        const diff = d.accuracy - d.expected;
        const color = Math.abs(diff) < 0.06 ? 'var(--calib-actual-good)'
          : diff < 0 ? 'var(--calib-actual-overconfident)'
          : 'var(--calib-actual-underconfident)';
        return (
          <g key={d.conviction}>
            <circle cx={xPx(d.conviction)} cy={yPx(d.accuracy)} r={r} fill={color} fillOpacity={0.15} stroke={color} strokeWidth={1.5} />
            <circle cx={xPx(d.conviction)} cy={yPx(d.accuracy)} r={4} fill={color} />
            <text x={xPx(d.conviction)} y={yPx(d.accuracy) - r - 4} fontSize={10} fill={color} textAnchor="middle" fontFamily="JetBrains Mono">{(d.accuracy * 100).toFixed(0)}% · n={d.n}</text>
          </g>
        );
      })}

      {/* Labels */}
      <text x={pad.left + innerW / 2} y={height - 4} fontSize={10} fill="var(--text-muted)" textAnchor="middle">CONVICCIÓN DECLARADA (1-5)</text>
      <text x={12} y={pad.top + innerH / 2} fontSize={10} fill="var(--text-muted)" textAnchor="middle" transform={`rotate(-90, 12, ${pad.top + innerH / 2})`}>TASA DE ACIERTO OBSERVADA</text>
    </svg>
  );
}

function ConvictionHistogram({ data, width, height }) {
  const max = Math.max(...data.map((d) => d.n));
  const barW = width / data.length - 16;
  return (
    <svg width={width} height={height}>
      {data.map((d, i) => {
        const h = (d.n / max) * (height - 36);
        const x = i * (width / data.length) + 8;
        const y = height - 28 - h;
        const color = d.conviction === 3 ? 'var(--text-secondary)' : d.conviction === 5 ? 'var(--signal-warning)' : 'var(--signal-info)';
        return (
          <g key={d.conviction}>
            <rect x={x} y={y} width={barW} height={h} fill={color} fillOpacity={0.7} />
            <text x={x + barW / 2} y={y - 4} fontSize={10} fill={color} textAnchor="middle" fontFamily="JetBrains Mono">{d.n}</text>
            <text x={x + barW / 2} y={height - 10} fontSize={11} fill="var(--text-secondary)" textAnchor="middle">{d.conviction}</text>
          </g>
        );
      })}
    </svg>
  );
}

function MetricCard({ label, value, sub, status }) {
  const color = status === 'pass' ? 'var(--signal-pass)' : status === 'warn' ? 'var(--signal-warning)' : status === 'fail' ? 'var(--signal-fail)' : 'var(--text-primary)';
  return (
    <div style={{ padding: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-sm)' }}>
      <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 600, color, marginTop: 2, fontFamily: 'var(--font-mono)' }}>{value}</div>
      <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>{sub}</div>
    </div>
  );
}

window.P26_Profile = P26_Profile;