"use client";

import { useCallback, useEffect, useState } from "react";

import { api } from "./api-client";
import { ApplicationShell } from "./application-shell";
import type { Principal } from "./app-types";
import { AuthExperience } from "./auth-experience";

export default function HomePage() {
  const [principal, setPrincipal] = useState<Principal | null>();

  const refreshSession = useCallback(async () => {
    const response = await api("/api/v1/auth/session");
    if (!response.ok) {
      setPrincipal(null);
      return;
    }
    const payload = (await response.json()) as { data: Principal };
    setPrincipal(payload.data);
  }, []);

  useEffect(() => {
    const controller = new AbortController();
    void api("/api/v1/auth/session", { signal: controller.signal })
      .then(async (response) => {
        if (!response.ok) return null;
        const payload = (await response.json()) as { data: Principal };
        return payload.data;
      })
      .then((nextPrincipal) => {
        if (!controller.signal.aborted) setPrincipal(nextPrincipal);
      })
      .catch((error: unknown) => {
        if (error instanceof Error && error.name !== "AbortError") setPrincipal(null);
      });
    return () => controller.abort();
  }, []);

  if (principal === undefined) {
    return (
      <main className="boot-screen" aria-live="polite" aria-busy="true">
        <span className="brand-mark">MI</span>
        <span>Loading secure workspace…</span>
      </main>
    );
  }
  if (principal === null) {
    return <AuthExperience onSignedIn={setPrincipal} />;
  }
  return (
    <ApplicationShell
      principal={principal}
      onPrincipalChange={refreshSession}
      onLogout={() => setPrincipal(null)}
    />
  );
}