import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { motion } from 'framer-motion';
import {
  FileText,
  Plus,
  Warehouse,
  Factory,
  DollarSign,
  Droplets,
  LogOut,
  Home,
  ChevronRight,
  Building2
} from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';

interface NavItem {
  id: string;
  icon: React.ElementType;
  label: string;
  path: string;
  description?: string;
}

const navItems: NavItem[] = [
  { id: 'home', icon: Home, label: '首页', path: '/purchaser', description: '工作台概览' },
  { id: 'plans', icon: FileText, label: '计划总览', path: '/purchaser/plans', description: '查看所有计划' },
  { id: 'new', icon: Plus, label: '新建纺织计划', path: '/purchaser/plans/new', description: '创建新纺织计划' },
  { id: 'washing', icon: Droplets, label: '新建水洗计划', path: '/purchaser/washing-plans/new', description: '创建水洗计划' },
  { id: 'warehouse', icon: Warehouse, label: '产品信息', path: '/purchaser/warehouse', description: '管理产品库存' },
  { id: 'finished', icon: Building2, label: '水洗仓库', path: '/purchaser/finished-warehouse', description: '管理水洗厂内坯布库存' },
  { id: 'factories', icon: Factory, label: '工厂管理', path: '/purchaser/factories', description: '管理合作工厂' },
  { id: 'accounts-payable', icon: DollarSign, label: '应付账款', path: '/purchaser/accounts-payable', description: '查看应付账款' }
];

interface SidebarProps {
  collapsed?: boolean;
  onToggle?: () => void;
}

export function Sidebar({ collapsed = false, onToggle }: SidebarProps) {
  const navigate = useNavigate();
  const location = useLocation();
  const { auth, logout } = useAuth();

  const isActive = (path: string) => {
    if (path === '/purchaser') {
      return location.pathname === '/purchaser';
    }
    return location.pathname.startsWith(path);
  };

  const handleLogout = async () => {
    await logout();
    navigate('/login');
  };

  return (
    <motion.aside
      initial={{ x: -280 }}
      animate={{ x: 0 }}
      transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
      className={`fixed left-0 top-0 h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 text-white z-50 flex flex-col ${
        collapsed ? 'w-20' : 'w-64'
      }`}
    >
      {/* Logo区域 */}
      <div className="h-16 flex items-center px-4 border-b border-slate-700/50">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center shadow-lg shadow-amber-500/20">
            <Building2 className="w-6 h-6 text-white" />
          </div>
          {!collapsed && (
            <div>
              <h1 className="font-bold text-lg leading-tight">采购商工作台</h1>
              <p className="text-xs text-slate-400">{auth.company?.name || '未登录'}</p>
            </div>
          )}
        </div>
      </div>

      {/* 导航菜单 */}
      <nav className="flex-1 py-4 px-3 overflow-y-auto">
        <div className="space-y-1">
          {navItems.map((item) => {
            const active = isActive(item.path);
            const Icon = item.icon;
            
            return (
              <motion.button
                key={item.id}
                onClick={() => navigate(item.path)}
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                className={`w-full flex items-center gap-3 px-3 py-3 rounded-xl transition-all duration-200 group ${
                  active
                    ? 'bg-gradient-to-r from-amber-500/20 to-orange-500/20 text-amber-400 border border-amber-500/30'
                    : 'text-slate-300 hover:bg-slate-700/50 hover:text-white'
                }`}
              >
                <div className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
                  active ? 'bg-amber-500/20' : 'bg-slate-700/50 group-hover:bg-slate-600'
                }`}>
                  <Icon className="w-5 h-5" />
                </div>
                {!collapsed && (
                  <div className="flex-1 text-left">
                    <div className="font-medium text-sm">{item.label}</div>
                    <div className="text-xs text-slate-500 group-hover:text-slate-400">{item.description}</div>
                  </div>
                )}
                {!collapsed && active && (
                  <ChevronRight className="w-4 h-4 text-amber-400" />
                )}
              </motion.button>
            );
          })}
        </div>
      </nav>

      {/* 底部操作区 */}
      <div className="p-3 border-t border-slate-700/50 space-y-2">
        {/* 折叠按钮 */}
        <motion.button
          onClick={onToggle}
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-slate-400 hover:bg-slate-700/50 hover:text-white transition-colors"
        >
          <div className={`w-8 h-8 rounded-lg bg-slate-700/50 flex items-center justify-center transition-transform ${
            collapsed ? 'rotate-180' : ''
          }`}>
            <ChevronRight className="w-4 h-4" />
          </div>
          {!collapsed && <span className="text-sm">收起菜单</span>}
        </motion.button>

        {/* 退出登录 */}
        <motion.button
          onClick={handleLogout}
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          className="w-full flex items-center gap-3 px-3 py-3 rounded-xl text-red-400 hover:bg-red-500/10 transition-colors"
        >
          <div className="w-10 h-10 rounded-lg bg-red-500/10 flex items-center justify-center">
            <LogOut className="w-5 h-5" />
          </div>
          {!collapsed && <span className="font-medium text-sm">退出登录</span>}
        </motion.button>
      </div>
    </motion.aside>
  );
}
