import Link from "next/link";
import { createClient } from "@/lib/supabase/server";
import { getProjectSummaries } from "@/lib/data/projects";
import { SignOutButton } from "@/components/sign-out-button";

export default async function Home() {
  const supabase = await createClient();
  const [projects, { data: userData }] = await Promise.all([
    getProjectSummaries(supabase),
    supabase.auth.getUser(),
  ]);
  const user = userData.user;

  return (
    <>
      <header className="sticky top-0 z-40 border-b bg-background/90 backdrop-blur">
        <div className="mx-auto flex h-14 w-full max-w-6xl items-center justify-between px-4 sm:px-6">
          <Link href="/" className="font-semibold tracking-tight">
            Review Portal
          </Link>
          {user && (
            <div className="flex items-center gap-3">
              <span className="hidden text-sm text-muted-foreground sm:inline">
                {user.email}
              </span>
              <SignOutButton />
            </div>
          )}
        </div>
      </header>

      <div className="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6">
        <h1 className="text-2xl font-semibold tracking-tight">Projects</h1>
        <p className="mt-1 text-sm text-muted-foreground">
          Select a project to review its pages.
        </p>

        {projects.length === 0 ? (
          <p className="mt-6 rounded-lg border bg-background p-6 text-sm text-muted-foreground">
            No projects yet.
          </p>
        ) : (
          <ul className="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {projects.map((project) => (
              <li key={project.id}>
                <Link
                  href={`/${project.slug}`}
                  className="block rounded-lg border bg-background p-4 transition-colors hover:bg-accent"
                >
                  <div className="font-medium">{project.name}</div>
                  <div className="mt-1 text-sm text-muted-foreground">
                    /{project.slug} · {project.pageCount} pages
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        )}
      </div>
    </>
  );
}