import { Header, Footer } from "@/components/Shell";
import { SignIn } from "@/components/SignIn";
import { Dashboard } from "@/components/Dashboard";
import { admin, user, required } from "@/lib/supabase";
import Link from "next/link";
import { accountProfile } from "@/lib/profile";
export const dynamic = "force-dynamic";
export default async function DashboardPage() {
  const account = await user();
  const profile = account ? await accountProfile(account) : null;
  const history = account
    ? required(
        await admin()
          .from("game_sessions")
          .select("id,difficulty,created_at,current_round")
          .eq("owner_id", account.id)
          .order("created_at", { ascending: false })
          .limit(20),
      )
    : [];
  return (
    <>
      <Header />
      <main className="section page-content">
        {account ? (
          <>
            <span className="eyebrow">THE CARTOGRAPHER’S DESK</span>
            <h1>My expedition.</h1>
            <p className="lead">Welcome back, {profile?.display_name}.</p>
            <Dashboard />
            {history.length > 0 && (
              <section className="token-box">
                <h2>Recent journeys</h2>
                {history.map((s) => (
                  <div className="draft-row" key={s.id}>
                    <span>
                      {new Date(s.created_at).toLocaleDateString("en-GB")} ·{" "}
                      {s.difficulty} · {s.current_round}/5 rounds
                    </span>
                    <Link
                      className="button"
                      href={`/${s.current_round >= 5 ? "results" : "play"}/${s.id}`}
                    >
                      Open →
                    </Link>
                  </div>
                ))}
              </section>
            )}
          </>
        ) : (
          <SignIn />
        )}
      </main>
      <Footer />
    </>
  );
}