import type { Metadata } from 'next';
import './globals.css';
import { AuthGuard } from '@/components/AuthGuard';
import { Sidebar } from '@/components/layout/Sidebar';

export const metadata: Metadata = {
  title: '龙石小红书内容生产平台',
  description: '小红书内容生产工具',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body className="bg-surface-secondary text-text-primary">
        <AuthGuard>
          <div className="flex flex-col min-h-screen">
            {/* 顶部 Header */}
            <header className="h-14 bg-brand-orange flex items-center px-6 justify-between flex-shrink-0">
              <h1 className="text-white font-bold text-base">
                龙石小红书内容生产平台
              </h1>
              <UserBadge />
            </header>

            <div className="flex flex-1 overflow-hidden">
              <Sidebar />
              <main className="flex-1 overflow-auto">
                {children}
              </main>
            </div>
          </div>
        </AuthGuard>
      </body>
    </html>
  );
}

/** 右上角当前用户展示（Server Component 不可用 Store，Client 组件内联） */
function UserBadge() {
  // 通过 Client 组件获取 store 数据，此处为 Server Component 占位
  return <UserBadgeClient />;
}

// 内联 Client 组件，避免额外文件
import UserBadgeClient from '@/components/layout/UserBadge';
