import Link from "next/link";
import type { ReactNode } from "react";
import { getSessionUser } from "@/lib/auth";

const LINKS = [
  ["/studio", "📊 Dashboard"],
  ["/studio/content", "🎬 Content"],
  ["/studio/upload", "⬆️ Upload"],
  ["/studio/analytics", "📈 Analytics"],
  ["/studio/comments", "💬 Comments"],
  ["/studio/monetization", "💰 Monetization"],
] as const;

export default async function StudioLayout({ children }: { children: ReactNode }) {
  const session = await getSessionUser();
  return (
    <div className="flex min-h-[calc(100dvh-3.5rem)] flex-col lg:flex-row">
      <aside className="w-full shrink-0 border-b border-line bg-surface/40 p-3 lg:w-60 lg:border-b-0 lg:border-r">
        <p className="px-3 py-2 text-xs font-bold uppercase tracking-wide text-muted">Creator Studio</p>
        <nav className="space-y-1">
          {LINKS.map(([href, label]) => (
            <Link key={href} href={href} className="block rounded-lg px-3 py-2 text-sm font-medium hover:bg-surface">
              {label}
            </Link>
          ))}
          {session?.channel ? (
            <Link href={`/channel/${session.channel.handle}`} className="block rounded-lg px-3 py-2 text-sm font-medium hover:bg-surface">
              📺 My channel
            </Link>
          ) : null}
        </nav>
      </aside>
      <div className="min-w-0 flex-1 p-4">{children}</div>
    </div>
  );
}