"use client";

import { useEffect, useState } from "react";
import { loadSession, type Person } from "@/lib/auth-client";
import { SignInForm } from "./SignInForm";
import { AppShell } from "./AppShell";
import { Feed } from "./Feed";
import { DiscoverRails } from "./DiscoverRails";
import { ExpertSearch } from "./ExpertSearch";

type State = { kind: "loading" } | { kind: "out" } | { kind: "in"; person: Person };

export function App() {
  const [state, setState] = useState<State>({ kind: "loading" });

  useEffect(() => {
    let live = true;
    loadSession().then((person) => {
      if (live) setState(person ? { kind: "in", person } : { kind: "out" });
    });
    return () => {
      live = false;
    };
  }, []);

  if (state.kind === "loading") {
    return (
      <main className="center">
        <p aria-live="polite">Loading...</p>
      </main>
    );
  }
  if (state.kind === "out") {
    return <SignInForm onSignedIn={(person) => {
      setState({ kind: "in", person });
      // POST /api/session keeps its shape; the feed user id comes from GET.
      void loadSession().then((full) => {
        if (full) setState({ kind: "in", person: full });
      });
    }} />;
  }
  return (
    <AppShell
      person={state.person}
      search={<ExpertSearch />}
      feed={<Feed feedUserId={state.person.feedUserId} person={state.person} onSignedOut={() => setState({ kind: "out" })} />}
      discover={<DiscoverRails />}
    />
  );
}