'use client';

import React from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { ProtectedRoute, useAuth } from '@/lib/auth';
import { LayoutDashboard, BarChart3, UserCircle } from 'lucide-react';

export default function AppLayoutClient({
  children,
}: {
  children: React.ReactNode;
}) {
  const { signOut, user } = useAuth();
  const pathname = usePathname();
  
  const navigationItems = [
    { name: 'Dashboard', href: '/dashboard', icon: <LayoutDashboard className="h-5 w-5" /> },
    { name: 'Analytics', href: '/analytics', icon: <BarChart3 className="h-5 w-5" /> },
    { name: 'Account', href: '/account', icon: <UserCircle className="h-5 w-5" /> },
  ];

  const handleSignOut = async () => {
    await signOut();
  };

  return (
    <ProtectedRoute>
      <div className="flex min-h-screen bg-gray-100">
        {/* 侧边栏导航 */}
        <div className="fixed inset-y-0 left-0 w-64 bg-white shadow-lg">
          <div className="flex h-16 items-center px-6 border-b">
            <Link href="/" className="text-lg font-medium text-gray-900">
              ShortURL Analytics
            </Link>
          </div>
          <nav className="mt-4 px-2">
            {navigationItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center px-3 py-2 mt-2 rounded-md text-sm font-medium ${
                  pathname === item.href || pathname?.startsWith(`${item.href}/`)
                    ? 'bg-blue-100 text-blue-600'
                    : 'text-gray-700 hover:bg-gray-100'
                }`}
              >
                <span className="mr-3">{item.icon}</span>
                {item.name}
              </Link>
            ))}
          </nav>
        </div>

        {/* 主内容区域 */}
        <div className="flex-1 ml-64">
          {/* 顶部导航栏 */}
          <header className="bg-white shadow-sm">
            <div className="flex h-16 items-center justify-end px-6">
              <div className="flex items-center">
                <span className="text-sm font-medium text-gray-700 mr-4">
                  {user?.email}
                </span>
                <button
                  onClick={handleSignOut}
                  className="px-3 py-1.5 text-sm border border-gray-300 rounded-md hover:bg-gray-50"
                >
                  Sign Out
                </button>
              </div>
            </div>
          </header>

          {/* 页面内容 */}
          <main className="py-6">
            {children}
          </main>
        </div>
      </div>
    </ProtectedRoute>
  );
}