// ── Main App with Firebase Auth ─────────────────────────────────────────────

const App = () => {
  const [authState, setAuthState] = React.useState("loading");
  const [user, setUser] = React.useState(null);
  const [view, setView] = React.useState("overview");
  const [dark, setDark] = React.useState(() => {
    try {
      const s = JSON.parse(localStorage.getItem("familyhub_settings"));
      return s?.darkMode || false;
    } catch { return false; }
  });
  const [sidebarOpen, setSidebarOpen] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.classList.toggle("dark", dark);
    try {
      const s = JSON.parse(localStorage.getItem("familyhub_settings")) || {};
      s.darkMode = dark;
      localStorage.setItem("familyhub_settings", JSON.stringify(s));
    } catch {}
  }, [dark]);

  React.useEffect(() => {
    firebase.initializeApp(firebaseConfig);
    const db = firebase.firestore();
    Storage.connectFirestore(db);

    firebase.auth().onAuthStateChanged(async (firebaseUser) => {
      if (firebaseUser) {
        setUser(firebaseUser);
        const doc = await db.collection("users").doc(firebaseUser.uid).get();
        if (doc.exists) {
          const profile = doc.data();
          if (profile.status === "approved") {
            window._db = db;
            await Storage.syncFromFirestore();
            setAuthState("dashboard");
          } else if (profile.status === "rejected") {
            setAuthState("rejected");
          } else {
            setAuthState("pending");
          }
        } else {
          // New user — always start as pending. To bootstrap a new deployment,
          // manually set status:"approved" and role:"admin" in the Firebase Console
          // for the first admin account.
          await db.collection("users").doc(firebaseUser.uid).set({
            email: firebaseUser.email || "",
            displayName: firebaseUser.displayName || "",
            photoURL: firebaseUser.photoURL || "",
            provider: firebaseUser.providerData[0]?.providerId || "unknown",
            status: "pending",
            role: "member",
            createdAt: firebase.firestore.FieldValue.serverTimestamp(),
          });
          setAuthState("pending");
        }
      } else {
        setUser(null);
        setAuthState("landing");
      }
    });
  }, []);

  const signInWithGoogle = async () => {
    try {
      const provider = new firebase.auth.GoogleAuthProvider();
      await firebase.auth().signInWithPopup(provider);
    } catch (e) { if (e.code !== "auth/popup-closed-by-user") alert(e.message); }
  };

  const signInWithMicrosoft = async () => {
    try {
      const provider = new firebase.auth.OAuthProvider("microsoft.com");
      await firebase.auth().signInWithPopup(provider);
    } catch (e) { if (e.code !== "auth/popup-closed-by-user") alert(e.message); }
  };

  const signOut = async () => { window._db = null; await firebase.auth().signOut(); };

  if (authState === "loading") {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
        <div className="text-center">
          <div className="text-5xl mb-4 animate-spin inline-block">⏳</div>
          <p className="text-gray-600 dark:text-gray-300 text-lg">Loading...</p>
        </div>
      </div>
    );
  }

  if (authState === "pending") {
    return (
      <div className="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
        <div className="text-center px-6 max-w-md">
          <div className="text-6xl mb-6">⏳</div>
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Awaiting Approval</h2>
          <p className="text-gray-600 dark:text-gray-300 mb-8">A site admin will review and approve your access.</p>
          <BtnSecondary onClick={signOut}>Sign Out</BtnSecondary>
        </div>
      </div>
    );
  }

  if (authState === "rejected") {
    return (
      <div className="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
        <div className="text-center px-6 max-w-md">
          <div className="text-6xl mb-6">❌</div>
          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Access Denied</h2>
          <p className="text-gray-600 dark:text-gray-300 mb-8">Your access request was not approved.</p>
          <BtnSecondary onClick={signOut}>Sign Out</BtnSecondary>
        </div>
      </div>
    );
  }

  const signInWithEmail = async (email, password) => {
    try {
      await firebase.auth().signInWithEmailAndPassword(email, password);
    } catch (e) { alert(e.message); }
  };

  const registerWithEmail = async (name, email, password) => {
    try {
      const cred = await firebase.auth().createUserWithEmailAndPassword(email, password);
      await cred.user.updateProfile({ displayName: name });
    } catch (e) { alert(e.message); }
  };

  if (authState === "landing") {
    return <LandingScreen onSignIn={signInWithGoogle} onSignInGoogle={signInWithGoogle} onSignInMicrosoft={signInWithMicrosoft} onSignInEmail={signInWithEmail} onRegister={registerWithEmail} />;
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <TopNav
        onToggleSidebar={() => setSidebarOpen((o) => !o)}
        dark={dark}
        onToggleDark={() => setDark((d) => !d)}
        onLogout={signOut}
      />
      <div className="flex">
        <Sidebar
          active={view}
          onNavigate={setView}
          open={sidebarOpen}
          onClose={() => setSidebarOpen(false)}
        />
        <main className="flex-1 overflow-auto min-w-0">
          {view === "overview"  && <DashboardScreen onNavigate={setView} />}
          {view === "kanban"    && <TaskBoardScreen />}
          {view === "registry"  && <GiftRegistryScreen />}
          {view === "meals"     && <MealPlannerScreen />}
          {view === "memories"  && <MemoryWallScreen />}
          {view === "budget"    && <BudgetScreen />}
          {view === "documents" && <DocumentSafeScreen />}
          {view === "items"     && <ItemsScreen />}
          {view === "rentals"   && <RentalsScreen />}
          {view === "settings"  && (
            <SettingsScreen
              dark={dark}
              onToggleDark={() => setDark((d) => !d)}
              onLogout={signOut}
              user={user}
            />
          )}
        </main>
      </div>
    </div>
  );
};

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