/* =====================================================================
   root.jsx
   ---------------------------------------------------------------------
   Qué hace este archivo:
   - Es el punto de entrada de toda la aplicación React.
   - Root: decide qué pantalla tiene que ver la persona ahora mismo:
       1. Si aún estamos comprobando si ya había una sesión guardada
          en este móvil → pantalla de carga.
       2. Si no hay sesión → AuthGate (bienvenida / login / registro).
       3. Si el padre/madre acaba de iniciar sesión pero aún no ha
          elegido con qué hijo/a quiere trabajar → ChildSelector.
       4. Si ya hay sesión completa → FamilyEconomyApp (la app en sí).
   - También conecta window.storage con el hijo/a activo, para que
     FamilyEconomyApp no tenga que preocuparse de Firebase.
   - Al final, esta es la línea que realmente "engancha" React a la
     página HTML (ReactDOM.createRoot(...).render(...)).

   Este archivo se carga EL ÚLTIMO de todos los .jsx, porque usa
   FamilyEconomyApp (de app.jsx), AuthGate y ChildSelector (de
   auth-screens.jsx), que tienen que existir ya.
   ===================================================================== */

function Root() {
  const [session, setSession] = useState(undefined); // undefined = comprobando, null = sin sesión
  const [pendingFamilyId, setPendingFamilyId] = useState(null); // padre logueado, eligiendo hijo/a

  useEffect(() => {
    const saved = window.loadLocalSession();
    setSession(saved || null);
    if (saved && saved.familyId) window.recordFamilyAccess(saved.familyId);
  }, []);

  // Puerta aparte para el panel de administrador del juego, sin relación
  // con la sesión normal de familia — se llega escribiendo .../#admin.
  if (typeof window !== "undefined" && window.location.hash === "#admin") {
    return <AdminGate />;
  }

  if (session === undefined) {
    return (
      <div className="eco-app loading-screen">
        <Loader2 size={28} />
        <p className="eco-mono">Comprobando sesión…</p>
      </div>
    );
  }

  const enterAsParent = (familyId, childId) => {
    const s = { familyId, role: "parent", childId };
    window.saveLocalSession(s);
    window.storage = window.createFamilyStorage(familyId, childId);
    setPendingFamilyId(null);
    setSession(s);
  };

  if (!session && pendingFamilyId) {
    return (
      <div className="eco-app">
        <ChildSelector familyId={pendingFamilyId} onPick={(childId) => enterAsParent(pendingFamilyId, childId)} />
      </div>
    );
  }

  if (!session) {
    return (
      <div className="eco-app">
        <AuthGate
          onParentPending={(familyId) => setPendingFamilyId(familyId)}
          onParentCreated={(familyId, childId) => enterAsParent(familyId, childId)}
          onChildReady={(familyId, childId) => {
            const s = { familyId, role: "child", childId };
            window.saveLocalSession(s);
            window.storage = window.createFamilyStorage(familyId, childId);
            setSession(s);
          }}
        />
      </div>
    );
  }

  window.storage = window.storage || window.createFamilyStorage(session.familyId, session.childId);

  return (
    <FamilyEconomyApp
      initialRole={session.role}
      familyId={session.familyId}
      childId={session.childId}
      onLogout={async () => {
        await window.logoutSession();
        window.clearLocalSession();
        window.storage = undefined;
        setSession(null);
      }}
      onSwitchChild={session.role === "parent" ? () => {
        window.storage = undefined;
        setPendingFamilyId(session.familyId);
        setSession(null);
      } : null}
    />
  );
}


ReactDOM.createRoot(document.getElementById("root")).render(<Root />);