import { Outlet, Link, useLocation, Navigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import {
  LayoutDashboard, Users, Settings, BarChart3, ScrollText,
  MessageSquare, Search, Gamepad2, Shield, Sliders
} from 'lucide-react';
import { useAuthStore } from '@/stores/authStore';
import { cn } from '@/lib/cn';

const modLinks = [
  { path: '/admin/tickets', label: 'Tickets', icon: MessageSquare },
  { path: '/admin/users/lookup', label: 'User Lookup', icon: Search },
  { path: '/admin/matches', label: 'Matches', icon: Gamepad2 },
];

const adminLinks = [
  { path: '/admin/users', label: 'Users', icon: Users },
  { path: '/admin/elo', label: 'Elo Config', icon: Sliders },
  { path: '/admin/audit', label: 'Audit Log', icon: ScrollText },
  { path: '/admin/stats', label: 'Stats', icon: BarChart3 },
];

const ownerLinks = [
  { path: '/admin/system', label: 'System', icon: LayoutDashboard },
  { path: '/admin/config', label: 'Config', icon: Settings },
];

export default function AdminLayout() {
  const location = useLocation();
  const user = useAuthStore((s) => s.user);

  if (!user || (user.role !== 'moderator' && user.role !== 'admin' && user.role !== 'owner')) {
    return <Navigate to="/dashboard" replace />;
  }

  const isAdmin = user.role === 'admin' || user.role === 'owner';
  const isOwner = user.role === 'owner';

  const allLinks = [
    ...modLinks,
    ...(isAdmin ? adminLinks : []),
    ...(isOwner ? ownerLinks : []),
  ];

  return (
    <div className="flex min-h-[calc(100vh-64px)]">
      <aside className="w-56 bg-bg-surface border-r border-white/[0.06] flex-shrink-0 hidden lg:block">
        <div className="p-4">
          <div className="flex items-center gap-2 mb-6 px-3">
            <Shield className="w-5 h-5 text-amber-500" />
            <span className="text-sm font-bold text-text-primary uppercase tracking-wider">Admin</span>
          </div>
          <nav className="space-y-1">
            {allLinks.map((link) => {
              const isActive = location.pathname === link.path;
              return (
                <Link
                  key={link.path}
                  to={link.path}
                  className={cn(
                    'relative flex items-center gap-2.5 px-3 py-2 text-sm rounded-lg transition-colors',
                    isActive ? 'text-amber-500' : 'text-text-secondary hover:text-text-primary hover:bg-white/5'
                  )}
                >
                  {isActive && (
                    <motion.div
                      layoutId="admin-nav"
                      className="absolute inset-0 bg-amber-500/10 rounded-lg"
                      transition={{ type: 'spring', stiffness: 400, damping: 30 }}
                    />
                  )}
                  <link.icon className="w-4 h-4 relative z-10" />
                  <span className="relative z-10">{link.label}</span>
                </Link>
              );
            })}
          </nav>
        </div>
      </aside>

      <main className="flex-1 overflow-auto">
        <Outlet />
      </main>
    </div>
  );
}
