/* =====================================================================
   auth-screens.jsx
   ---------------------------------------------------------------------
   Qué hace este archivo:
   - AuthGate: la pantalla de bienvenida + iniciar sesión + crear
     cuenta. Es lo primero que ve cualquiera al abrir la app.
   - ChildSelector: la pantalla "¿Con quién quieres entrar?" que ve
     el padre/madre tras iniciar sesión, para elegir o añadir un
     hijo/a (máximo 5).

   Estos dos componentes usan las funciones de firebase-config.js
   (window.loginParent, window.createFamily, etc.) para hablar con la
   base de datos, y los componentes visuales de ui-components.jsx
   (Logo, Loader2...) para pintarse.
   ===================================================================== */

function AuthGate({ onParentPending, onParentCreated, onChildReady }) {
  const [mode, setMode] = useState("welcome"); // welcome | login | register
  const [loginRole, setLoginRole] = useState("parent"); // parent | child
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [familyName, setFamilyName] = useState("");
  const [childName, setChildName] = useState("");
  const [newPin, setNewPin] = useState("");
  const [famCode, setFamCode] = useState("");
  const [childPin, setChildPin] = useState("");
  const [error, setError] = useState("");
  const [info, setInfo] = useState("");
  const [busy, setBusy] = useState(false);
  const [createdCode, setCreatedCode] = useState(null);
  const [resetMode, setResetMode] = useState(false);

  const mailtoCode = (name, code) => {
    const subject = encodeURIComponent("Código de acceso a Clevank World");
    const body = encodeURIComponent(
      `El código de acceso de ${name} en Clevank World es: ${code}\n\nLo necesita junto con su PIN para entrar desde su móvil.`
    );
    return `mailto:?subject=${subject}&body=${body}`;
  };

  return (
    <div className="game-background">
      <div className="game-card-frame">
        <div className="logo-img-container"><Logo size={260} /></div>

        {mode === "welcome" && (
          <>
            <h2 className="welcome-heading">¡Te damos la bienvenida!</h2>
            <div className="divider-dots"><span className="star-badge">★</span></div>
            <p className="intro-text-block">
              <span className="badge-icon bg-coin"><CoinIcon /></span>
              Aquí aprenderás a <span className="hl-green">ganar dinero</span>, <span className="hl-blue">ahorrar</span>, tomar
              decisiones, cumplir <span className="hl-purple">misiones</span> y crear <span className="hl-teal">tu propio mundo</span>.
              <span className="badge-icon bg-piggy"><PiggyIcon /></span>
            </p>
            <div className="cta-grid">
              <button className="btn-game-3d btn-blue-3d" onClick={() => { setMode("login"); setError(""); }}>
                <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" fill="white"/><path d="M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7" stroke="white" strokeWidth="2" strokeLinecap="round"/></svg>
                Iniciar Sesión
              </button>
              <button className="btn-game-3d btn-green-3d" onClick={() => { setMode("register"); setError(""); setCreatedCode(null); }}>
                <svg viewBox="0 0 24 24" fill="none"><circle cx="10" cy="8" r="4" fill="white"/><path d="M2 20c0-4.4 3.6-7 8-7s8 2.6 8 7" stroke="white" strokeWidth="2" strokeLinecap="round"/><path d="M19 8v6M16 11h6" stroke="white" strokeWidth="2.2" strokeLinecap="round"/></svg>
                Crear Cuenta
              </button>
            </div>
          </>
        )}

        {mode === "login" && !resetMode && (
          <>
            <h2 className="welcome-heading">Iniciar Sesión</h2>
            <div className="role-selector">
              <button className={`role-btn ${loginRole === "parent" ? "active" : ""}`} onClick={() => { setLoginRole("parent"); setError(""); }}>👨‍👩‍👧 Padre/Madre</button>
              <button className={`role-btn ${loginRole === "child" ? "active" : ""}`} onClick={() => { setLoginRole("child"); setError(""); }}>👦 Hijo/a</button>
            </div>

            {error && <div className="error-box">{error}</div>}

            {loginRole === "parent" ? (
              <>
                <div className="form-group">
                  <label>Correo electrónico</label>
                  <input className="form-control" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
                </div>
                <div className="form-group">
                  <label>Contraseña</label>
                  <input className="form-control" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
                </div>
                <button
                  className="btn-game-3d btn-blue-3d btn-full"
                  disabled={busy}
                  onClick={async () => {
                    setBusy(true); setError("");
                    try {
                      const r = await window.loginParent({ email, password });
                      onParentPending(r.familyId);
                    } catch (e) { setError(window.translateAuthError(e)); }
                    setBusy(false);
                  }}
                >
                  {busy ? "Entrando…" : "Entrar al Juego 🚀"}
                </button>
                <button className="btn-secondary-link" onClick={() => { setResetMode(true); setError(""); setInfo(""); }}>¿Olvidaste tu contraseña?</button>
              </>
            ) : (
              <>
                <div className="form-group">
                  <label>Código familiar (6 letras/números)</label>
                  <input className="form-control" maxLength={6} style={{ textTransform: "uppercase", letterSpacing: "0.2em", textAlign: "center" }} value={famCode} onChange={(e) => setFamCode(e.target.value.toUpperCase())} />
                </div>
                <div className="form-group">
                  <label>PIN secreto</label>
                  <input className="form-control" type="password" maxLength={6} style={{ textAlign: "center", letterSpacing: "0.3em" }} value={childPin} onChange={(e) => setChildPin(e.target.value)} />
                </div>
                <button
                  className="btn-game-3d btn-blue-3d btn-full"
                  disabled={busy}
                  onClick={async () => {
                    if (!famCode.trim() || !childPin.trim()) { setError("Rellena el código y el PIN."); return; }
                    setBusy(true); setError("");
                    try {
                      const r = await window.loginChild({ code: famCode, pin: childPin });
                      onChildReady(r.familyId, r.childId);
                    } catch (e) { setError(e.message || "Código o PIN incorrecto."); }
                    setBusy(false);
                  }}
                >
                  {busy ? "Entrando…" : "Entrar al Juego 🚀"}
                </button>
              </>
            )}
            <button className="btn-secondary-link" onClick={() => { setMode("welcome"); setError(""); }}>← Volver al inicio</button>
          </>
        )}

        {mode === "login" && resetMode && (
          <>
            <h2 className="welcome-heading">Recuperar Contraseña</h2>
            {error && <div className="error-box">{error}</div>}
            {info && <div className="success-box">{info}</div>}
            <div className="form-group">
              <label>Tu email</label>
              <input className="form-control" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
            </div>
            <button
              className="btn-game-3d btn-blue-3d btn-full"
              disabled={busy}
              onClick={async () => {
                if (!email.trim()) { setError("Escribe tu email."); return; }
                setBusy(true); setError(""); setInfo("");
                try {
                  await window.sendPasswordReset(email.trim());
                  setInfo("Correo enviado. Revisa tu bandeja de entrada.");
                } catch (e) {
                  // Si el email no existe, mostramos el mismo mensaje de éxito
                  // a propósito — así el formulario tampoco sirve para
                  // averiguar qué emails están dados de alta.
                  if (e.code === "auth/user-not-found" || e.code === "auth/invalid-credential") {
                    setInfo("Correo enviado. Revisa tu bandeja de entrada.");
                  } else {
                    setError(window.translateAuthError(e));
                  }
                }
                setBusy(false);
              }}
            >
              Enviar enlace
            </button>
            <button className="btn-secondary-link" onClick={() => { setResetMode(false); setError(""); setInfo(""); }}>← Volver</button>
          </>
        )}

        {mode === "register" && !createdCode && (
          <>
            <h2 className="welcome-heading">Crear Nueva Familia</h2>
            {error && <div className="error-box">{error}</div>}
            <div className="form-group">
              <label>Nombre de la familia</label>
              <input className="form-control" placeholder="Ej: Familia García" value={familyName} onChange={(e) => setFamilyName(e.target.value)} />
            </div>
            <div className="form-group">
              <label>Email del padre/madre</label>
              <input className="form-control" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
            </div>
            <div className="form-group">
              <label>Contraseña (mín. 6 caracteres)</label>
              <input className="form-control" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            </div>
            <div className="form-group">
              <label>Nombre de tu primer hijo/a</label>
              <input className="form-control" value={childName} onChange={(e) => setChildName(e.target.value)} />
            </div>
            <div className="form-group">
              <label>PIN para tu hijo/a (4 números)</label>
              <input className="form-control" type="password" maxLength={6} value={newPin} onChange={(e) => setNewPin(e.target.value)} />
            </div>
            <button
              className="btn-game-3d btn-green-3d btn-full"
              disabled={busy}
              onClick={async () => {
                if (!email || password.length < 6 || !familyName.trim() || !childName.trim() || !newPin.trim()) {
                  setError("Completa todos los campos (contraseña mínimo 6 caracteres).");
                  return;
                }
                setBusy(true); setError("");
                try {
                  const r = await window.createFamily({ email, password, familyName: familyName.trim(), childName: childName.trim(), pin: newPin.trim() });
                  setCreatedCode(r);
                } catch (e) { setError(window.translateAuthError(e)); }
                setBusy(false);
              }}
            >
              {busy ? "Creando…" : "Registrar Familia ✨"}
            </button>
            <button className="btn-secondary-link" onClick={() => { setMode("login"); setError(""); }}>¿Ya tienes cuenta? Inicia sesión</button>
          </>
        )}

        {mode === "register" && createdCode && (
          <div className="success-box" style={{ textAlign: "center" }}>
            <h3 style={{ margin: "0 0 0.4rem" }}>¡Cuenta creada con éxito! 🎉</h3>
            <p style={{ margin: "0 0 0.2rem" }}>Te hemos enviado un correo de confirmación.<br />Guarda este código para {createdCode.child.name}:</p>
            <p className="code-reveal">{createdCode.child.code}</p>
            <a className="mailto-link" href={mailtoCode(createdCode.child.name, createdCode.child.code)}>✉️ Enviar código por email</a>
            <button className="btn-game-3d btn-blue-3d btn-full" onClick={() => onParentCreated(createdCode.familyId, createdCode.child.childId)}>
              Continuar a la oficina
            </button>
          </div>
        )}
      </div>
    </div>
  );
}


function ChildSelector({ familyId, onPick }) {
  const [children, setChildren] = useState(null);
  const [adding, setAdding] = useState(false);
  const [name, setName] = useState("");
  const [pin, setPin] = useState("");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);
  const [newCode, setNewCode] = useState(null);

  const refresh = async () => {
    try { setChildren(await window.listChildrenSummaries(familyId)); }
    catch (e) { setError("No se pudo cargar la lista de hijos/as."); setChildren([]); }
  };

  useEffect(() => { refresh(); }, []);

  if (children === null) {
    return (
      <div className="game-background">
        <div className="game-card-frame"><Loader2 size={24} /><p className="eco-mono">Cargando hijos/as…</p></div>
      </div>
    );
  }

  return (
    <div className="game-background">
      <div className="game-card-frame">
        <div className="logo-img-container"><Logo size={180} /></div>
        <h2 className="welcome-heading">¿Con quién quieres entrar?</h2>
        <div className="divider-dots"><span className="star-badge">★</span></div>

        {newCode ? (
          <div className="success-box" style={{ textAlign: "center" }}>
            <p style={{ margin: "0 0 0.2rem" }}>¡Hijo/a añadido! Apunta su código de acceso:</p>
            <p className="code-reveal">{newCode}</p>
            <a
              className="mailto-link"
              href={`mailto:?subject=${encodeURIComponent("Código de acceso a Clevank World")}&body=${encodeURIComponent(`El código de acceso de ${name} en Clevank World es: ${newCode}\n\nLo necesita junto con su PIN para entrar desde su móvil.`)}`}
            >
              ✉️ Enviar código por email
            </a>
            <button className="btn-game-3d btn-blue-3d btn-full" onClick={() => { setNewCode(null); setAdding(false); setName(""); setPin(""); refresh(); }}>Vale</button>
          </div>
        ) : adding ? (
          <>
            {error && <div className="error-box">{error}</div>}
            <div className="form-group">
              <label>Nombre del hijo/a</label>
              <input className="form-control" value={name} onChange={(e) => setName(e.target.value)} />
            </div>
            <div className="form-group">
              <label>Su PIN (4 dígitos)</label>
              <input className="form-control" type="password" maxLength={6} value={pin} onChange={(e) => setPin(e.target.value)} />
            </div>
            <button
              className="btn-game-3d btn-green-3d btn-full"
              disabled={busy}
              onClick={async () => {
                if (!name.trim() || !pin.trim()) { setError("Rellena nombre y PIN."); return; }
                setBusy(true); setError("");
                try {
                  const r = await window.addChild(familyId, name.trim(), pin.trim());
                  setNewCode(r.code);
                } catch (e) { setError(e.message || "No se pudo añadir."); }
                setBusy(false);
              }}
            >
              Guardar
            </button>
            <button className="btn-secondary-link" onClick={() => { setAdding(false); setError(""); }}>← Cancelar</button>
          </>
        ) : (
          <>
            {error && <div className="error-box">{error}</div>}
            {children.length === 0 && <p className="empty-hint">Todavía no hay hijos/as en esta familia.</p>}
            <div className="icon-grid">
              {children.map((c) => (
                <div key={c.id} style={{ position: "relative" }}>
                  <button className="icon-tile" style={{ "--tile-color": "var(--accent-blue)", width: "100%" }} onClick={() => onPick(c.id)}>
                    <span className="tile-icon">🧒</span>
                    <span className="tile-label">{c.name}</span>
                    <span className="tiny-hint eco-mono">{(c.wallet || 0).toFixed(2)} €</span>
                    {c.pendingCount > 0 && <span className="badge">{c.pendingCount}</span>}
                  </button>
                  <button
                    className="icon-btn"
                    style={{ position: "absolute", top: "-6px", right: "-6px", background: "#FFFDF8" }}
                    title={`Eliminar a ${c.name}`}
                    onClick={(e) => {
                      e.stopPropagation();
                      if (window.confirm(`¿Seguro que quieres eliminar a ${c.name}? Se perderá para siempre su cartera, historial y todo lo demás — esto no se puede deshacer.`)) {
                        window.deleteChild(familyId, c.id).then(refresh).catch(() => setError("No se pudo eliminar."));
                      }
                    }}
                  >
                    <X size={13} />
                  </button>
                </div>
              ))}
            </div>
            {children.length < 5 ? (
              <button className="btn-game-3d btn-blue-3d btn-full" onClick={() => setAdding(true)}>+ Añadir hijo/a</button>
            ) : (
              <p className="tiny-hint">Máximo de 5 hijos/as por familia alcanzado.</p>
            )}
          </>
        )}
      </div>
    </div>
  );
}

// Puerta de entrada del panel de administrador del juego. Se llega aquí
// solo con la dirección .../#admin — no hay ningún botón visible en el
// resto de la app que lleve hasta esto. El permiso de verdad lo dan las
// reglas de Firestore (que reconocen un único email como administrador),
// esto es solo la puerta de entrada.
function AdminGate() {
  const [status, setStatus] = useState("checking"); // checking | out | in
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    const current = firebase.auth().currentUser;
    setStatus(current && current.email ? "in" : "out");
  }, []);

  if (status === "checking") {
    return (
      <div className="game-background">
        <div className="game-card-frame"><Loader2 size={24} /><p className="eco-mono">Comprobando sesión…</p></div>
      </div>
    );
  }

  if (status === "in") {
    return <AdminPanel onLogout={async () => { await window.logoutSession(); setStatus("out"); }} />;
  }

  return (
    <div className="game-background">
      <div className="game-card-frame">
        <h2 className="welcome-heading">Panel de administrador</h2>
        <div className="divider-dots"><span className="star-badge">★</span></div>
        {error && <div className="error-box">{error}</div>}
        <div className="form-group">
          <label>Email</label>
          <input className="form-control" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
        </div>
        <div className="form-group">
          <label>Contraseña</label>
          <input className="form-control" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
        </div>
        <button
          className="btn-game-3d btn-blue-3d btn-full"
          disabled={busy}
          onClick={async () => {
            setBusy(true); setError("");
            try {
              await window.loginAdmin({ email: email.trim(), password });
              setStatus("in");
            } catch (e) { setError(window.translateAuthError(e)); }
            setBusy(false);
          }}
        >
          Entrar
        </button>
      </div>
    </div>
  );
}

function AdminPanel({ onLogout }) {
  const [families, setFamilies] = useState(null);
  const [error, setError] = useState("");
  const [selectedId, setSelectedId] = useState(null);
  const [inactiveDays, setInactiveDays] = useState("30");
  const [confirmingDelete, setConfirmingDelete] = useState(null); // familyId en primer clic
  const [deleteBusy, setDeleteBusy] = useState(false);

  const load = () => {
    setError("");
    window.listAllFamiliesForAdmin()
      .then(setFamilies)
      .catch((e) => { setError("No se pudo cargar la lista (¿tu cuenta tiene permiso de administrador en las reglas de Firestore?)."); setFamilies([]); });
  };

  useEffect(() => { load(); }, []);

  const fmtDate = (ts) => (ts ? new Date(ts).toLocaleDateString("es-ES", { day: "2-digit", month: "short", year: "numeric" }) : "Sin datos");

  const handleDelete = async (familyId) => {
    setDeleteBusy(true);
    try {
      await window.deleteFamilyForAdmin(familyId);
      setConfirmingDelete(null);
      setSelectedId(null);
      load();
    } catch (e) { setError("No se pudo eliminar esa familia."); }
    setDeleteBusy(false);
  };

  if (families === null) {
    return (
      <div className="eco-app">
        <p className="eco-mono" style={{ padding: "1.2rem" }}><Loader2 size={18} /> Cargando familias…</p>
      </div>
    );
  }

  const selected = families.find((f) => f.id === selectedId);
  const now = Date.now();
  const sevenDaysAgo = now - 7 * 86400000;
  const newFamilies = families.filter((f) => (f.createdAt || 0) >= sevenDaysAgo);
  const inactiveThreshold = now - (parseInt(inactiveDays) || 30) * 86400000;
  const inactiveFamilies = families.filter((f) => f.lastAccessAt && f.lastAccessAt < inactiveThreshold);
  const totalChildren = families.reduce((sum, f) => sum + f.children.length, 0);
  const totalMovements = families.reduce((sum, f) => sum + f.children.reduce((s, c) => s + (c.movementCount || 0), 0), 0);
  const totalWrites = families.reduce((sum, f) => sum + f.children.reduce((s, c) => s + (c.writeCount || 0), 0) + (f.familyWriteCount || 0), 0);
  const totalReads = families.reduce((sum, f) => sum + f.children.reduce((s, c) => s + (c.readCount || 0), 0) + (f.familyReadCount || 0), 0);
  const planCounts = {};
  families.forEach((f) => { const p = f.plan || "free"; planCounts[p] = (planCounts[p] || 0) + 1; });
  const nearLimitFamilies = families.filter((f) => f.children.length >= 4);

  return (
    <div className="eco-app">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "1rem 1.2rem" }}>
        <div style={{ display: "flex", alignItems: "center", gap: "0.6rem" }}>
          <Logo size={40} />
          <h1 className="eco-display" style={{ fontSize: "1.1rem" }}>Panel de administrador</h1>
        </div>
        <button className="btn ghost small" onClick={onLogout}>Salir</button>
      </div>
      <div style={{ padding: "0 1.2rem 1.2rem" }}>
        {error && <div className="error-box">{error}</div>}

        {selected ? (
          <>
            <button className="text-link" style={{ marginBottom: "0.6rem" }} onClick={() => setSelectedId(null)}>← Volver a todas las familias</button>
            <div className="card">
              <p className="card-title" style={{ marginTop: 0 }}>{selected.familyName || "(sin nombre)"}</p>
              <p className="tiny-hint" style={{ marginTop: 0 }}>
                Dada de alta: {fmtDate(selected.createdAt)} · Último acceso: {fmtDate(selected.lastAccessAt)} ·{" "}
                {selected.avgAccessesPerDay !== null ? `${selected.avgAccessesPerDay.toFixed(2)} accesos/día de media` : "sin datos de accesos todavía"}
              </p>
              <p className="tiny-hint" style={{ marginTop: "0.2rem" }}>
                Movimientos de toda la familia (todos los hijos/as juntos): {selected.children.reduce((s, c) => s + (c.movementCount || 0), 0)}.
              </p>
              <p className="tiny-hint" style={{ marginTop: "0.2rem" }}>
                Uso del padre/madre (cambiar de hijo/a, tablón compartido, gestión de PIN...): {selected.familyReadCount || 0} lecturas · {selected.familyWriteCount || 0} escrituras.
              </p>
              <div className="table">
                {selected.children.map((c) => (
                  <div className="table-row" key={c.id}>
                    <span>{c.name}</span>
                    <span className="tiny-hint">Cartera: {(c.wallet || 0).toFixed(2)} € · Racha: {c.streakRecord} · Movimientos: {c.movementCount}</span>
                    <span className="tiny-hint">Escrituras: {c.writeCount || 0} · Lecturas: {c.readCount || 0} · Tamaño: {c.docSizeKb || 0} KB · Última actividad: {fmtDate(c.lastActivity)}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: "0.8rem" }}>
                {confirmingDelete === selected.id ? (
                  <div className="row-buttons tight">
                    <span className="tiny-hint" style={{ flexBasis: "100%" }}>¿Seguro del todo? Se borra para siempre, con todos sus hijos/as.</span>
                    <button className="btn danger small" disabled={deleteBusy} onClick={() => handleDelete(selected.id)}>Sí, eliminar definitivamente</button>
                    <button className="btn ghost small" onClick={() => setConfirmingDelete(null)}>Cancelar</button>
                  </div>
                ) : (
                  <button className="btn danger small" onClick={() => setConfirmingDelete(selected.id)}>Eliminar esta familia</button>
                )}
              </div>
            </div>
          </>
        ) : (
          <>
            <div className="card">
              <p className="card-title" style={{ marginTop: 0 }}>Resumen general</p>
              <p className="tiny-hint" style={{ marginTop: 0 }}>
                {families.length} familia{families.length === 1 ? "" : "s"} · {totalChildren} hijo{totalChildren === 1 ? "" : "s"} en total · {totalMovements} movimientos · {totalWrites} escrituras · {totalReads} lecturas registradas (aproximado).
              </p>
              <p className="tiny-hint" style={{ marginTop: "0.3rem" }}>
                Por plan: {Object.entries(planCounts).map(([p, n]) => `${p}: ${n}`).join(" · ")}
              </p>
            </div>

            {nearLimitFamilies.length > 0 && (
              <div className="card">
                <p className="card-title" style={{ marginTop: 0 }}>⚠️ Cerca del límite de hijos/as</p>
                <p className="section-sub" style={{ marginBottom: "0.5rem" }}>El máximo actual es de 5 hijos/as por familia.</p>
                <div className="table">
                  {nearLimitFamilies.map((f) => (
                    <div className="table-row" key={f.id}>
                      <span className="text-link" onClick={() => setSelectedId(f.id)}>{f.familyName || "(sin nombre)"}</span>
                      <span className="tiny-hint">{f.children.length} de 5 hijos/as</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {newFamilies.length > 0 && (
              <div className="card">
                <p className="card-title" style={{ marginTop: 0 }}>🌱 Familias nuevas (últimos 7 días)</p>
                <div className="table">
                  {newFamilies.map((f) => (
                    <div className="table-row" key={f.id}>
                      <span className="text-link" onClick={() => setSelectedId(f.id)}>{f.familyName || "(sin nombre)"}</span>
                      <span className="tiny-hint">Alta: {fmtDate(f.createdAt)}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            <div className="card">
              <p className="card-title" style={{ marginTop: 0 }}>💤 Familias inactivas</p>
              <p className="section-sub" style={{ marginBottom: "0.5rem" }}>Familias sin ningún acceso registrado desde hace más de los días que indiques. Se pueden eliminar por completo (pide confirmar dos veces).</p>
              <div className="input-row" style={{ marginBottom: "0.5rem" }}>
                <label className="tiny-label">Días sin uso</label>
                <input className="amount-input eco-mono small-input" type="number" min="1" value={inactiveDays} onChange={(e) => setInactiveDays(e.target.value)} />
              </div>
              {inactiveFamilies.length === 0 && <p className="empty-hint">Ninguna familia lleva tanto tiempo sin usarse.</p>}
              <div className="table">
                {inactiveFamilies.map((f) => (
                  <div className="table-row" key={f.id} style={{ flexWrap: "wrap" }}>
                    <span className="text-link" onClick={() => setSelectedId(f.id)}>{f.familyName || "(sin nombre)"}</span>
                    <span className="tiny-hint">Último acceso: {fmtDate(f.lastAccessAt)}</span>
                    {confirmingDelete === f.id ? (
                      <div className="row-buttons tight" style={{ flexBasis: "100%", marginTop: "0.3rem" }}>
                        <span className="tiny-hint" style={{ flexBasis: "100%" }}>¿Seguro del todo? Se borra para siempre, con todos sus hijos/as.</span>
                        <button className="btn danger small" disabled={deleteBusy} onClick={() => handleDelete(f.id)}>Sí, eliminar definitivamente</button>
                        <button className="btn ghost small" onClick={() => setConfirmingDelete(null)}>Cancelar</button>
                      </div>
                    ) : (
                      <button className="btn ghost small" onClick={() => setConfirmingDelete(f.id)}>Eliminar</button>
                    )}
                  </div>
                ))}
              </div>
            </div>

            <div className="card">
              <p className="card-title" style={{ marginTop: 0 }}>Todas las familias</p>
              <div className="table">
                {families.map((f) => (
                  <div className="table-row" key={f.id} style={{ flexWrap: "wrap" }}>
                    <span className="text-link" onClick={() => setSelectedId(f.id)}>{f.familyName || "(sin nombre)"}</span>
                    <span className="tiny-hint">Alta: {fmtDate(f.createdAt)}</span>
                    <span className="tiny-hint">Último acceso: {fmtDate(f.lastAccessAt)}</span>
                    <span className="tiny-hint">{f.avgAccessesPerDay !== null ? `${f.avgAccessesPerDay.toFixed(2)} accesos/día` : "sin datos"}</span>
                    <span className="tiny-hint">{f.children.reduce((s, c) => s + (c.movementCount || 0), 0)} movimientos</span>
                    {confirmingDelete === f.id ? (
                      <div className="row-buttons tight" style={{ flexBasis: "100%", marginTop: "0.3rem" }}>
                        <span className="tiny-hint" style={{ flexBasis: "100%" }}>¿Seguro del todo? Se borra para siempre, con todos sus hijos/as.</span>
                        <button className="btn danger small" disabled={deleteBusy} onClick={() => handleDelete(f.id)}>Sí, eliminar definitivamente</button>
                        <button className="btn ghost small" onClick={() => setConfirmingDelete(null)}>Cancelar</button>
                      </div>
                    ) : (
                      <button className="btn ghost small" onClick={() => setConfirmingDelete(f.id)}>Eliminar</button>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}