import { Outlet, Link, useLocation } from 'react-router-dom';
import { useAuthStore } from '@/stores/authStore';
import { useUIStore } from '@/stores/uiStore';
import {
  Home,
  FileText,
  CheckSquare,
  Image,
  Settings,
  LogOut,
  Menu,
  X,
} from 'lucide-react';
import { cn } from '@/utils/cn';

export default function Layout() {
  const location = useLocation();
const logout = useAuthStore((state) => state.logout);
  const { sidebarOpen, toggleSidebar } = useUIStore();

  const navigation = [
    { name: '仪表盘', href: '/dashboard', icon: Home },
    { name: '文档', href: '/documents', icon: FileText },
    { name: '待办', href: '/todos', icon: CheckSquare },
    { name: '图片', href: '/images', icon: Image },
    { name: '设置', href: '/settings', icon: Settings },
  ];

  const handleLogout = () => {
    logout();
    window.location.href = '/login';
  };

  return (
    <div className="flex h-screen bg-gray-100">
      {/* Sidebar */}
      <aside
        className={cn(
          'fixed inset-y-0 left-0 z-50 w-64 transform bg-white shadow-lg transition-transform duration-300 ease-in-out md:relative md:translate-x-0',
          !sidebarOpen && '-translate-x-full'
        )}
      >
        <div className="flex h-full flex-col">
          {/* Logo */}
          <div className="flex items-center justify-between border-b px-6 py-4">
            <h1 className="text-xl font-bold text-gray-800">图片分析系统</h1>
            <button
              onClick={toggleSidebar}
              className="rounded p-1 hover:bg-gray-100 md:hidden"
            >
              <X className="h-6 w-6" />
            </button>
          </div>

          {/* Navigation */}
          <nav className="flex-1 space-y-1 px-3 py-4">
            {navigation.map((item) => {
              const isActive = location.pathname === item.href;
              return (
                <Link
                  key={item.name}
                  to={item.href}
                  className={cn(
                    'flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors',
                    isActive
                      ? 'bg-blue-50 text-blue-600'
                      : 'text-gray-700 hover:bg-gray-50'
                  )}
                >
                  <item.icon className="mr-3 h-5 w-5" />
                  {item.name}
                </Link>
              );
            })}
          </nav>

          {/* User section */}
          <div className="border-t p-4">
            <button
              onClick={handleLogout}
              className="flex w-full items-center rounded-lg px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50"
            >
              <LogOut className="mr-3 h-5 w-5" />
              退出登录
            </button>
          </div>
        </div>
      </aside>

      {/* Main content */}
      <div className="flex flex-1 flex-col overflow-hidden">
        {/* Header */}
        <header className="flex items-center border-b bg-white px-6 py-4">
          <button
            onClick={toggleSidebar}
            className="rounded p-2 hover:bg-gray-100 md:hidden"
          >
            <Menu className="h-6 w-6" />
          </button>
          <h2 className="ml-4 text-lg font-semibold text-gray-800 md:ml-0">
            {navigation.find((item) => item.href === location.pathname)?.name ||
              '仪表盘'}
          </h2>
        </header>

        {/* Page content */}
        <main className="flex-1 overflow-y-auto p-6">
          <Outlet />
        </main>
      </div>

      {/* Overlay for mobile */}
      {!sidebarOpen && (
        <div
          className="fixed inset-0 z-40 bg-black bg-opacity-50 md:hidden"
          onClick={toggleSidebar}
        />
      )}
    </div>
  );
}
