import { getServerSession } from "next-auth";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import { FormLayoutClient } from "./client";
import LoginDialog from "@/components/login-dialog";
import { Metadata } from "next";
import { ThemeToggle } from "@/components/theme-toggle";
import { getDiscordMemberProfile } from "@/app/actions/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 = (session?.user as any)?.discordId;
  let profile = null;

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

  return (
    <div className="flex min-h-screen flex-col flex-1 w-full bg-background text-foreground">
      <header className="border-b border-border px-6 py-3 flex items-center justify-between shrink-0">
        <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}
            />
          )}
          <ThemeToggle />
        </div>
      </header>
      <main className="flex-1 p-6 md:p-8 overflow-y-auto max-w-6xl mx-auto w-full">
        {children}
      </main>
      {!session && <LoginDialog />}
    </div>
  );
}