import type { Metadata } from "next";
import Link from "next/link";
import { getServerSession } from "next-auth";
import { ArrowLeft, Plus } from "lucide-react";
import { DropdownMenuAvatar } from "@/components/avatar";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/theme-toggle";
import { getSessionDiscordId } from "@/lib/auth/auth";
import { authOptions } from "@/lib/auth/auth-options";
import { getDiscordMemberProfile } from "@/lib/discord/discord";

export const metadata: Metadata = {
  title: "Share | Erika!",
  description: "แชร์ข้อความและไฟล์ .txt ผ่านลิงก์สั้น",
};

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

  return (
    <div className="min-h-screen bg-background text-foreground">
      <header className="sticky top-0 z-10 border-b bg-background/90 backdrop-blur">
        <div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-4 sm:px-6">
          <div className="flex items-center gap-3">
            <Button variant="ghost" size="icon-sm" asChild>
              <Link href="/" aria-label="กลับหน้าหลัก">
                <ArrowLeft />
              </Link>
            </Button>
            <Link href="/share" className="font-mono text-sm font-semibold">
              Erika / Share
            </Link>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" asChild>
              <Link href="/share">
                <Plus data-icon="inline-start" />
                สร้างลิงก์
              </Link>
            </Button>
            {session?.user && (
              <DropdownMenuAvatar
                userName={session.user.name ?? ""}
                userImage={session.user.image ?? ""}
                profile={profile}
                showName={false}
              />
            )}
            <ThemeToggle />
          </div>
        </div>
      </header>
      <main className="mx-auto w-full max-w-6xl px-4 py-6 sm:px-6 sm:py-10">
        {children}
      </main>
    </div>
  );
}