// ───────────────────────── Paso 5 · Vista previa y entrega ─────────────────────────
function DeliveryStep({ delivery, setDelivery, title, setTitle, config, questions, setQuestions, linked, onEditQuestions, exportFormat, setExportFormat, integrationCopy, setIntegrationCopy }) {
  const set = (patch) => setDelivery(d => ({ ...d, ...patch }));
  const fileRef = React.useRef(null);

  const onLogo = (e) => {
    const f = e.target.files && e.target.files[0];
    if (f) { const url = URL.createObjectURL(f); set({ logo: url, logoName: f.name }); }
  };

  const total = questions.length;
  const typesCount = [...new Set(questions.map(q => q.type))].length;

  return (
    <div className="space-y-6">
      {/* Bloque 1 · Información de la actividad */}
      <Card className="p-6">
        {/* Título — icono + input en una línea */}
        <div className="flex items-center gap-3">
          <div className="w-11 h-11 rounded-xl bg-primary-50 text-primary flex items-center justify-center shrink-0">
            <Icon name="doc-check" size={22} />
          </div>
          <input value={title} onChange={(e) => setTitle(e.target.value)}
            placeholder="Título de la actividad…"
            className="flex-1 min-w-0 bg-white border border-line rounded-xl py-3 px-4 text-[16px] font-bold text-ink transition-colors hover:border-primary-300 focus:border-primary focus:ring-2 focus:ring-primary-100 outline-none" />
        </div>

        <div className="flex flex-wrap items-center gap-2 mt-3.5">
          <Badge tone={(window.DIFFICULTY_TONE || {})[config.difficulty] || 'neutral'}><Icon name="gauge" size={13} />Dificultad {config.difficulty.toLowerCase()}</Badge>
          <Badge tone="neutral"><Icon name="clipboard" size={13} />{total} preguntas</Badge>
          <Badge tone="neutral"><Icon name="list-check" size={13} />{typesCount} {typesCount === 1 ? 'tipo' : 'tipos'}</Badge>
          <Badge tone="neutral"><Icon name="target" size={13} />{linked.length} criterios</Badge>
        </div>

        {/* Información del centro (formulario · precargado de la sesión) */}
        <div className="mt-5 pt-5 border-t border-line">
          <div className="flex items-center gap-2 mb-4">
            <Icon name="building" size={16} className="text-primary-800" />
            <h4 className="text-[13px] font-bold uppercase tracking-wide text-muted">Información del centro</h4>
          </div>

          {/* Logotipo — fila de una sola línea (al inicio del bloque) */}
          <div className="mb-4">
            <span className="block text-[12.5px] font-semibold text-ink mb-1.5">Logotipo del centro</span>
            <div className="flex items-center justify-between gap-3 px-3 py-2.5 rounded-xl border border-line bg-white">
              <div className="flex items-center gap-3 min-w-0">
                <div className="w-10 h-10 rounded-lg border border-line bg-canvas/50 flex items-center justify-center overflow-hidden shrink-0">
                  {delivery.logo
                    ? <img src={delivery.logo} alt="Logo del centro" className="w-full h-full object-contain p-1" />
                    : <Icon name="image" size={18} className="text-faint" />}
                </div>
                <p className="text-[13px] text-muted truncate">{delivery.logoName || 'Máx. 200×200 px · .jpg'}</p>
              </div>
              <input ref={fileRef} type="file" accept="image/jpeg,image/png" className="hidden" onChange={onLogo} />
              <Button variant="outline" size="sm" icon="upload" onClick={() => fileRef.current && fileRef.current.click()} className="shrink-0">
                {delivery.logo ? 'Cambiar' : 'Subir imagen'}
              </Button>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-5 gap-y-4">
            <label className="block min-w-0">
              <span className="block text-[12.5px] font-semibold text-ink mb-1.5">Centro</span>
              <Select icon="building" value={delivery.center} onChange={(v) => set({ center: v })}
                options={CENTERS} placeholder="Selecciona el centro…" />
            </label>
            <label className="block min-w-0">
              <span className="block text-[12.5px] font-semibold text-ink mb-1.5">Grupo</span>
              <Select icon="users" value={delivery.group} onChange={(v) => set({ group: v })}
                options={GROUPS} placeholder="Selecciona grupo…" />
            </label>
            <label className="block min-w-0">
              <span className="block text-[12.5px] font-semibold text-ink mb-1.5">Materia</span>
              <div className="relative">
                <Icon name="book" size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted pointer-events-none" />
                <input value={delivery.materia} onChange={(e) => set({ materia: e.target.value })}
                  className="w-full bg-white border border-line rounded-xl py-3 pl-11 pr-4 text-sm font-medium text-ink transition-colors hover:border-primary-300 focus:border-primary focus:ring-2 focus:ring-primary-100 outline-none" />
              </div>
            </label>
            <label className="block min-w-0">
              <span className="block text-[12.5px] font-semibold text-ink mb-1.5">Curso</span>
              <div className="relative">
                <Icon name="school" size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted pointer-events-none" />
                <input value={delivery.curso} onChange={(e) => set({ curso: e.target.value })}
                  className="w-full bg-white border border-line rounded-xl py-3 pl-11 pr-4 text-sm font-medium text-ink transition-colors hover:border-primary-300 focus:border-primary focus:ring-2 focus:ring-primary-100 outline-none" />
              </div>
            </label>
          </div>
        </div>
      </Card>

      {/* Vista previa reordenable de las preguntas */}
      <ActivityPreview questions={questions} setQuestions={setQuestions} />

      {/* Solucionario */}
      <Card className="p-5">
        <div className="flex items-center justify-between gap-4">
          <div className="flex items-start gap-3.5">
            <div className="w-11 h-11 rounded-xl bg-primary-50 text-primary-800 flex items-center justify-center shrink-0"><Icon name="doc-check" size={22} /></div>
            <div>
              <h3 className="text-[15px] font-bold text-ink">Incluir solucionario para el alumnado</h3>
              <p className="text-[13px] text-muted mt-0.5 max-w-md">Si lo activas, el alumnado verá las respuestas correctas y la guía de corrección al finalizar.</p>
            </div>
          </div>
          <Switch checked={delivery.solutions} onChange={(v) => set({ solutions: v })} />
        </div>
      </Card>

      {/* Exportar e integrar */}
      <ExportBlock title={title} selected={exportFormat} onSelect={setExportFormat}
        copies={TEACHER_COPIES} copy={integrationCopy} setCopy={setIntegrationCopy} />
    </div>
  );
}

window.DeliveryStep = DeliveryStep;