"use client";

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

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

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

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

  async function handleSignOut() {
    if (signingOut) return;
    setSigningOut(true);
    await signOut();
    setSigningOut(false);
    setState({ kind: "out" });
  }

  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 })} />;
  }
  return (
    <main className="shell">
      <header>
        <Logo size={32} />
        <div>
          <strong>{state.person.name}</strong>
          <span>{state.person.email}</span>
        </div>
        <button type="button" onClick={handleSignOut} disabled={signingOut}>
          {signingOut ? "Signing out..." : "Sign out"}
        </button>
      </header>
      <Feed onSignedOut={() => setState({ kind: "out" })} />
    </main>
  );
}