// ───────────────────────── Step 3 · Configuración de la IA ─────────────────────────
function ConfigStep({ config, setConfig }) {
  const set = (patch) => setConfig(c => ({ ...c, ...patch }));

  const counts = config.typeCounts || {};
  const total = Object.values(counts).reduce((a, b) => a + b, 0);

  const toggleType = (id) => setConfig(c => {
    const next = { ...c.typeCounts };
    if (id in next) delete next[id];
    else next[id] = 3;
    return { ...c, typeCounts: next };
  });
  const setTypeCount = (id, v) => setConfig(c => {
    const next = { ...c.typeCounts };
    next[id] = Math.max(1, Math.min(20, v));
    return { ...c, typeCounts: next };
  });

  const levels = ['Bajo', 'Medio', 'Alto'];
  const levelTone = {
    Bajo:  'text-[#1f8a52] border-[#34B27B] bg-[#e7f7ee]',
    Medio: 'text-[#c77700] border-[#F0A33C] bg-[#fff4e5]',
    Alto:  'text-[#6a51d6] border-[#9C7BE0] bg-[#efeaff]',
  };

  return (
    <div className="space-y-5">
      <p className="text-[14.5px] text-muted">Define el nivel de dificultad y cuántas preguntas de cada tipo generará la IA.</p>

      {/* Dificultad — general */}
      <Card className="p-6">
        <div className="flex items-center gap-2.5 mb-1">
          <Icon name="gauge" size={19} className="text-primary-800" />
          <h3 className="text-[15px] font-bold text-ink">Nivel de dificultad</h3>
        </div>
        <p className="text-[13px] text-muted mb-5">Dificultad general para toda la actividad.</p>
        <div className="grid grid-cols-3 gap-3 max-w-lg">
          {levels.map(l => (
            <button key={l} onClick={() => set({ difficulty: l })}
              className={cx('rounded-xl border-2 py-4 font-bold text-[15px] transition-all',
                config.difficulty === l ? levelTone[l] : 'border-line text-muted hover:border-primary-200 bg-white')}>
              {l}
            </button>
          ))}
        </div>
      </Card>

      {/* Tipos de pregunta + número por tipo */}
      <Card className="p-6">
        <div className="flex items-center justify-between mb-1">
          <div className="flex items-center gap-2.5">
            <Icon name="list-check" size={19} className="text-primary-800" />
            <h3 className="text-[15px] font-bold text-ink">Preguntas por tipo</h3>
          </div>
          <div className="flex items-baseline gap-1.5">
            <span className="text-[22px] font-extrabold text-ink tabular-nums leading-none">{total}</span>
            <span className="text-[13px] text-muted">preguntas en total</span>
          </div>
        </div>
        <p className="text-[13px] text-muted mb-5">Activa los tipos que quieras e indica cuántas preguntas de cada uno generará la IA.</p>

        <div className="space-y-2.5">
          {QUESTION_TYPES.map(t => {
            const on = t.id in counts;
            return (
              <div key={t.id}
                className={cx('flex items-center gap-3.5 px-4 py-3 rounded-xl border transition-all',
                  on ? 'border-primary bg-primary-50/40' : 'border-line bg-white')}>
                <button onClick={() => toggleType(t.id)} className="flex items-center gap-3.5 flex-1 min-w-0 text-left">
                  <Checkbox checked={on} onChange={() => toggleType(t.id)} />
                  <div className={cx('w-9 h-9 rounded-lg flex items-center justify-center shrink-0 transition-colors', on ? 'bg-primary text-white' : 'bg-canvas text-muted')}>
                    <Icon name={t.icon} size={18} />
                  </div>
                  <div className="min-w-0">
                    <h5 className="text-[14px] font-semibold text-ink leading-tight">{t.label}</h5>
                    <p className="text-[11.5px] text-muted">{t.desc}</p>
                  </div>
                </button>
                {on
                  ? <Stepper value={counts[t.id]} onChange={(v) => setTypeCount(t.id, v)} min={1} max={20} />
                  : <span className="text-[12.5px] text-faint pr-2 hidden sm:block">Desactivado</span>}
              </div>
            );
          })}
        </div>

        {total === 0 && (
          <p className="mt-4 text-[13px] text-[#c77700] flex items-center gap-1.5">
            <Icon name="info" size={15} /> Activa al menos un tipo de pregunta para continuar.
          </p>
        )}
      </Card>
    </div>
  );
}

window.ConfigStep = ConfigStep;