// parent-dashboard.jsx — Panel para mamá.
// Stats por chiquito: lecciones totales, racha, promedio de tiempo, materias.

function ActParentDashboard({ session, onPickChild, onAddChild, onSignOut }) {
  const [children, setChildren] = React.useState([]);
  const [statsByChild, setStatsByChild] = React.useState({});
  const [loading, setLoading] = React.useState(true);
  const [adding, setAdding] = React.useState(false);
  const [form, setForm] = React.useState({ nombre: '', edad: '', mascota_favorita: 'thiago' });

  React.useEffect(() => { reload(); }, []);

  async function reload() {
    setLoading(true);
    try {
      const list = await window.actListChildren();
      setChildren(list);
      const stats = {};
      for (const c of list) {
        stats[c.id] = await window.actStatsForChild(c.id);
      }
      setStatsByChild(stats);
    } catch (e) {
      console.warn(e);
    } finally {
      setLoading(false);
    }
  }

  async function submitAdd(e) {
    e.preventDefault();
    if (!form.nombre.trim()) return;
    try {
      const c = await window.actAddChild({
        nombre: form.nombre.trim(),
        edad: form.edad ? Number(form.edad) : null,
        mascota_favorita: form.mascota_favorita
      });
      setAdding(false);
      setForm({ nombre: '', edad: '', mascota_favorita: 'thiago' });
      await reload();
      onAddChild && onAddChild(c);
    } catch (e) {
      alert(e.message || 'No se pudo agregar.');
    }
  }

  return (
    <div className="act-dash">
      <header className="act-dash-top">
        <h1>Hola, mamá</h1>
        <button className="act-link" onClick={onSignOut}>Salir</button>
      </header>

      <section>
        <div className="act-row-between">
          <h2>Tus chiquitos</h2>
          <button className="act-pill" onClick={() => setAdding(a => !a)}>
            {adding ? 'Cancelar' : '+ Agregar'}
          </button>
        </div>

        {adding && (
          <form className="act-add-child" onSubmit={submitAdd}>
            <input
              placeholder="Nombre del chiquito"
              value={form.nombre}
              onChange={e => setForm({ ...form, nombre: e.target.value })}
              required
            />
            <input
              type="number" min="2" max="12" placeholder="Edad"
              value={form.edad}
              onChange={e => setForm({ ...form, edad: e.target.value })}
            />
            <select
              value={form.mascota_favorita}
              onChange={e => setForm({ ...form, mascota_favorita: e.target.value })}
            >
              {(window.ACT_MASCOTS || []).map(m => (
                <option key={m.id} value={m.id}>{m.emoji} {m.nombre}</option>
              ))}
            </select>
            <button type="submit">Guardar</button>
          </form>
        )}

        {loading && <div className="act-loading">Cargando…</div>}

        {!loading && children.length === 0 && (
          <div className="act-empty">
            Aún no agregas a ningún chiquito. Dale al botón <b>+ Agregar</b>.
          </div>
        )}

        <div className="act-children">
          {children.map(c => {
            const s = statsByChild[c.id] || { totalLecciones: 0, estrellas: 0, racha: 0, promedioMin: 0, porMateria: {} };
            const mascota = window.actMascotById(c.mascota_favorita);
            return (
              <div
                key={c.id}
                className="act-child-card"
                style={{ borderColor: mascota.color }}
                onClick={() => onPickChild && onPickChild(c)}
              >
                <div className="act-child-head">
                  <span className="act-child-emoji">{mascota.emoji}</span>
                  <div>
                    <div className="act-child-name">{c.nombre}</div>
                    <div className="act-child-meta">
                      {c.edad ? c.edad + ' años · ' : ''}{mascota.nombre}
                    </div>
                  </div>
                </div>
                <div className="act-child-stats">
                  <div><b>{s.totalLecciones}</b><span>lecciones</span></div>
                  <div><b>{s.estrellas}</b><span>estrellas</span></div>
                  <div><b>{s.racha}</b><span>días al hilo</span></div>
                  <div><b>{s.promedioMin}m</b><span>promedio</span></div>
                </div>
                <div className="act-child-cta">Continuar →</div>
              </div>
            );
          })}
        </div>
      </section>
    </div>
  );
}

window.ActParentDashboard = ActParentDashboard;