// ───────────────────────── Step 2 · Vinculación curricular ─────────────────────────
function CompetenceBlock({ comp, linked, toggle, toggleAll }) {
  const ids = comp.criteria.map(c => c.id);
  const allOn = ids.every(id => linked.includes(id));
  const someOn = ids.some(id => linked.includes(id));
  return (
    <Card className="overflow-hidden">
      <div className="flex items-start gap-3.5 px-5 py-4 bg-canvas/50 border-b border-line">
        <button onClick={() => toggleAll(ids, !allOn)}
          className={cx('mt-0.5 w-5 h-5 rounded-[6px] border-2 flex items-center justify-center transition-all shrink-0',
            allOn ? 'bg-primary border-primary' : someOn ? 'bg-primary-100 border-primary' : 'bg-white border-[#cdcdd6] hover:border-primary-300')}>
          {allOn ? <Icon name="check" size={13} strokeWidth={3} className="text-white" /> : null}
        </button>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <Badge tone="primary">{comp.code}</Badge>
            <span className="text-[12px] font-semibold text-muted">Competencia específica</span>
          </div>
          <h4 className="text-[14.5px] font-semibold text-ink leading-snug">{comp.title}</h4>
        </div>
      </div>
      <div className="divide-y divide-line">
        {comp.criteria.map(c => {
          const on = linked.includes(c.id);
          return (
            <button key={c.id} onClick={() => toggle(c.id)}
              className={cx('w-full flex items-start gap-3.5 px-5 py-3.5 text-left transition-colors', on ? 'bg-primary-50/40' : 'hover:bg-canvas/50')}>
              <Checkbox checked={on} onChange={() => toggle(c.id)} className="mt-0.5" />
              <div className="flex-1 min-w-0">
                <span className="text-[12px] font-bold text-primary-800 tabular-nums">Criterio {c.code}</span>
                <p className="text-[13.5px] text-ink leading-snug mt-0.5">{c.text}</p>
              </div>
            </button>
          );
        })}
      </div>
    </Card>
  );
}

function CurriculumStep({ linked, setLinked }) {
  const toggle = (id) => setLinked(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  const toggleAll = (ids, on) => setLinked(prev => on ? [...new Set([...prev, ...ids])] : prev.filter(x => !ids.includes(x)));
  const total = COMPETENCES.reduce((a, c) => a + c.criteria.length, 0);

  return (
    <div className="space-y-5">
      <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-3">
        <p className="text-[14.5px] text-muted">
          Competencias y criterios de evaluación precargados para <span className="font-semibold text-ink">{CONTEXT.book}</span> · {CONTEXT.community} (LOMLOE).
        </p>
        <Badge tone={linked.length ? 'primary' : 'neutral'} className="px-3 py-1.5 text-[12.5px] shrink-0">
          <Icon name="target" size={14} /> {linked.length} de {total} criterios vinculados
        </Badge>
      </div>

      <div className="space-y-4">
        {COMPETENCES.map(c => (
          <CompetenceBlock key={c.id} comp={c} linked={linked} toggle={toggle} toggleAll={toggleAll} />
        ))}
      </div>
    </div>
  );
}

window.CurriculumStep = CurriculumStep;