import Link from "next/link";
import { apiFetch } from "@/lib/api";
import { LogoutButton } from "@/components/logout-button";
import { DashboardNav } from "@/components/dashboard-nav";

async function getMe() {
  const res = await apiFetch("/v1/auth/me");
  if (!res.ok) return null;
  return res.json();
}

export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
  const me = await getMe();
  return (
    <div className="min-h-screen flex flex-col bg-ink-950 text-white">
      <header className="border-b border-white/5 backdrop-blur bg-ink-950/80 sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-md bg-brand-500 grid place-items-center text-ink-950 font-bold text-sm">I</div>
            <span className="font-bold tracking-tight">InboxKit</span>
          </Link>
          <div className="flex items-center gap-3">
            {me && (
              <>
                <span className="text-xs px-2 py-1 rounded-md bg-brand-500/10 border border-brand-500/30 text-brand-400 font-mono uppercase">
                  {me.tier}
                </span>
                <span className="text-sm text-white/60 hidden md:inline">{me.email}</span>
              </>
            )}
            <LogoutButton />
          </div>
        </div>
      </header>
      <div className="flex-1 max-w-6xl w-full mx-auto px-6 py-8 grid md:grid-cols-[200px_1fr] gap-8">
        <DashboardNav />
        <main>{children}</main>
      </div>
    </div>
  );
}