// ───────────────────────── Screen 1 · Home / Dashboard ─────────────────────────
const TYPE_TONE = window.ACTIVITY_TONE || { Examen: 'primary', Repaso: 'purple', 'Práctica': 'green', Control: 'amber' };

function HistoryRow({ item, onView, onEdit }) {
  const [menu, setMenu] = React.useState(false);
  return (
    <div className="group relative flex items-center gap-3.5 px-4 py-3.5 rounded-[10px] bg-white border border-line shadow-card hover:border-primary-200 transition-colors">
      <button onClick={() => onView(item)} className="flex items-center gap-3.5 flex-1 min-w-0 text-left">
        <div className="w-10 h-10 rounded-[10px] bg-primary-50 text-primary-800 flex items-center justify-center shrink-0">
          <Icon name="list-alt-check" size={20} strokeWidth={1.9} />
        </div>
        <div className="min-w-0 flex-1">
          <h4 className="text-[14.5px] font-semibold text-ink leading-snug truncate">{item.title}</h4>
          <div className="flex items-center gap-2 mt-0.5 text-[12px] text-muted">
            <span>{item.questions} preguntas</span>
            <span className="text-faint">·</span>
            <span>{item.unit}</span>
            <span className="text-faint">·</span>
            <span>{item.date}</span>
          </div>
        </div>
      </button>
      <div className="relative shrink-0">
        <IconButton name="menu-dots" label="Acciones" onClick={() => setMenu(m => !m)} />
        {menu && (
          <>
            <div className="fixed inset-0 z-10" onClick={() => setMenu(false)} />
            <div className="absolute right-0 top-10 z-20 w-44 bg-white rounded-xl border border-line shadow-pop py-1.5 anim-fade-in">
              {[['eye', 'Visualizar', () => onView(item)], ['edit', 'Editar', () => onEdit(item)], ['copy', 'Duplicar', () => onEdit(item)]].map(([ic, lbl, fn]) => (
                <button key={lbl} onClick={() => { setMenu(false); fn && fn(); }}
                  className="w-full flex items-center gap-3 px-3.5 py-2 text-sm text-ink hover:bg-canvas transition-colors">
                  <Icon name={ic} size={17} className="text-muted" />{lbl}
                </button>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function HistoryPanel({ onView, onEdit }) {
  const empty = HISTORY.length === 0;
  return (
    <div>
      <h2 className="text-[13px] font-bold uppercase tracking-wide text-muted mb-3">Generaciones anteriores</h2>
      {empty ? (
        <div className="rounded-xl border border-dashed border-line px-5 py-8 text-center">
          <div className="w-11 h-11 rounded-full bg-canvas flex items-center justify-center mx-auto mb-3">
            <Icon name="clock" size={20} className="text-faint" />
          </div>
          <p className="text-[13.5px] font-semibold text-ink">Aún no has generado actividades</p>
          <p className="text-[12.5px] text-muted mt-1">Las que crees aparecerán aquí para reutilizarlas.</p>
        </div>
      ) : (
        <div className="space-y-2.5">
          {[...HISTORY].sort((a, b) => (a.daysAgo ?? 0) - (b.daysAgo ?? 0)).map(h => <HistoryRow key={h.id} item={h} onView={onView} onEdit={onEdit} />)}
        </div>
      )}
    </div>
  );
}

function HomeScreen({ onStart, onView, onEdit }) {
  return (
    <div className="max-w-[1040px] mx-auto px-4 lg:px-8 py-14 anim-fade-up">
      <header>
        <h1 className="text-[34px] leading-[1.12] font-extrabold text-ink tracking-tight">
          Generador de Actividades
        </h1>
        <p className="mt-3 text-[16px] leading-relaxed text-muted max-w-2xl">
          Crea exámenes, repasos y prácticas a partir del contenido de tu libro. Elige las páginas,
          vincula el currículo oficial y deja que la IA redacte las preguntas. Tú revisas, editas y publicas.
        </p>
      </header>

      {/* Tarjeta del libro + CTA destacado */}
      <Card className="mt-8 p-7 flex flex-col sm:flex-row gap-7 sm:items-center">
        <div className="w-[150px] h-[192px] rounded-xl overflow-hidden shadow-card shrink-0 ring-1 ring-black/5 mx-auto sm:mx-0"
          style={{ background: `url(${CONTEXT.cover}) center/cover` }} />
        <div className="min-w-0 flex-1">
          <span className="text-[12.5px] font-semibold text-muted tracking-wide">{CONTEXT.level}</span>
          <h3 className="text-[26px] font-extrabold text-ink leading-[1.1] tracking-tight mt-1">Biología y Geología 1</h3>

          <div className="flex flex-wrap gap-2 mt-4">
            <Badge><Icon name="school" size={13} />{CONTEXT.school}</Badge>
            <Badge><Icon name="layers" size={13} />{UNITS.length} unidades</Badge>
          </div>
        </div>
        <div className="shrink-0 sm:self-stretch sm:border-l sm:border-line sm:pl-7 flex sm:flex-col items-stretch justify-center">
          <Button size="lg" icon="sparkle" onClick={onStart} className="w-full sm:w-auto">
            Comenzar a generar
          </Button>
        </div>
      </Card>

      {/* Cómo funciona — los cuatro pasos */}
      <div className="mt-12">
        <h2 className="text-[13px] font-bold uppercase tracking-wide text-muted mb-3">Cómo funciona</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
          {[
            { ic: 'book',     t: 'Elige el contenido',   d: 'Selecciona unidades y páginas de tu libro.' },
            { ic: 'target',   t: 'Vincula el currículo', d: 'Marca competencias y criterios oficiales.' },
            { ic: 'sparkle',  t: 'Genera con IA',        d: 'Define tipos y dificultad; la IA redacta.' },
            { ic: 'doc-check',t: 'Revisa y publica',     d: 'Edita, exporta o integra en EdebéOn+.' },
          ].map((s, i) => (
            <div key={s.t} className="relative rounded-[10px] bg-white border border-line shadow-card p-4">
              <div className="w-9 h-9 rounded-lg bg-primary-50 text-primary-800 flex items-center justify-center mb-2.5">
                <Icon name={s.ic} size={19} strokeWidth={1.9} />
              </div>
              <h4 className="text-[14px] font-semibold text-ink leading-tight">{s.t}</h4>
              <p className="text-[12.5px] text-muted mt-1 leading-snug">{s.d}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Histórico — al final, a todo el ancho (oculto si no hay) */}
      <div className="mt-12">
        <HistoryPanel onView={onView} onEdit={onEdit} />
      </div>
    </div>
  );
}

window.HomeScreen = HomeScreen;