import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth-options";
import { FormLayoutClient, LoginButton } from "./client";
import { Metadata } from "next";
import { ThemeToggle } from "@/components/theme-toggle";
import { getSessionDiscordId } from "@/lib/auth";
import { getDiscordMemberProfile } from "@/lib/discord";
import Link from 'next/link';

const siteUrl = process.env.BASE_URL;

export const metadata: Metadata = {
  title: "กรอกแบบฟอร์ม",
    openGraph: {
    type: "website",
    locale: "th_TH",
    url: siteUrl,
    siteName: "Form",
    title: "กรอกแบบฟอร์ม",
    description:
      "Custom form ของเว็บไซด์",
    images: [
      {
        url: "/avatar.webp",
        width: 512,
        height: 512,
        alt: "Erika! avatar",
      },
    ],
  },
}

export default async function FormLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getServerSession(authOptions);
  const discordId = getSessionDiscordId(session);
  let profile = null;

  if (discordId) {
    profile = await getDiscordMemberProfile(discordId);
  }

  return (
    <div className="relative flex min-h-screen w-full flex-1 flex-col overflow-x-hidden bg-background text-foreground">
      <header className="relative z-10 flex shrink-0 items-center justify-between border-b border-border bg-background/90 px-6 py-3 backdrop-blur">
        <Link href="/form">
          <span className="font-semibold text-sm">
            Form
          </span>
        </Link>
        <div className="flex items-center gap-2">
          {session?.user ? (
            <FormLayoutClient
              userName={session.user.name ?? ""}
              userImage={session.user.image ?? ""}
              profile={profile}
            />
          ) : (
            <LoginButton />
          )}
          <ThemeToggle />
        </div>
      </header>
      <main className="relative z-10 mx-auto w-full max-w-6xl flex-1 overflow-y-auto px-3 py-4 sm:p-6 md:p-8">
        {children}
      </main>
    </div>
  );
}