'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { useUser } from './user-context';
import { Button } from '@/components/ui/button';
import { useRouter } from 'next/navigation';
import {
  LayoutDashboard,
  FolderKanban,
  Target,
  CalendarClock,
  BarChart3,
  Users,
  Gauge,
  Files,
  CheckSquare,
} from 'lucide-react';

const mainNavItems = [
  { href: '/', label: '总览', icon: LayoutDashboard },
  { href: '/projects', label: '项目', icon: FolderKanban },
  { href: '/my-krs', label: '我的KR', icon: Target },
  { href: '/my-tasks', label: '我的计划', icon: CheckSquare },
  { href: '/meeting', label: '例会', icon: CalendarClock },
  { href: '/analysis', label: '分析', icon: BarChart3 },
];

const adminNavItems = [
  { href: '/admin/users', label: '用户管理', icon: Users },
  { href: '/admin/metrics', label: '指标库', icon: Gauge },
  { href: '/admin/templates', label: '模板库', icon: Files },
];

export function MainNav() {
  const pathname = usePathname();
  const router = useRouter();
  const { currentUser, logout } = useUser();
  const isOwner = currentUser?.role === 'owner';

  return (
    <nav className="fixed top-0 left-0 right-0 z-40 bg-white border-b">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex items-center justify-between h-14">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-center gap-2 font-bold text-lg">
              <Target className="h-6 w-6 text-teal-600" />
              <span className="text-slate-800">兜爸目标管理</span>
            </Link>
            <div className="hidden md:flex items-center gap-1">
              {mainNavItems.map((item) => {
                const Icon = item.icon;
                const isActive = pathname === item.href ||
                  (item.href !== '/' && pathname.startsWith(item.href));
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={cn(
                      'flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                      isActive
                        ? 'bg-teal-50 text-teal-700'
                        : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
                    )}
                  >
                    <Icon className="h-4 w-4" />
                    {item.label}
                  </Link>
                );
              })}
            </div>
          </div>

          <div className="flex items-center gap-3">
            {isOwner && (
              <div className="flex items-center gap-1">
                <span className="text-xs text-muted-foreground mr-2 hidden lg:block">管理</span>
                {adminNavItems.map((item) => {
                  const Icon = item.icon;
                  const isActive = pathname === item.href;
                  return (
                    <Link
                      key={item.href}
                      href={item.href}
                      className={cn(
                        'flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                        isActive
                          ? 'bg-slate-800 text-white'
                          : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
                      )}
                    >
                      <Icon className="h-4 w-4" />
                      <span className="hidden lg:inline">{item.label}</span>
                    </Link>
                  );
                })}
              </div>
            )}

            <div className="flex items-center gap-2">
              <span className="text-sm text-slate-700 hidden sm:inline">{currentUser?.name}</span>
              <Button
                variant="outline"
                size="sm"
                onClick={() => {
                  logout();
                  router.replace('/login');
                }}
              >
                退出
              </Button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}