'use client';

import { useRouter, usePathname } from 'next/navigation';
import { motion } from 'framer-motion';
import { FaHome, FaMusic, FaShoppingBag, FaSignOutAlt, FaChartLine } from 'react-icons/fa';
import { useAdmin } from '@/lib/AdminContext';

export default function AdminSidebar() {
  const router = useRouter();
  const pathname = usePathname();
  const { logout } = useAdmin();

  const handleLogout = () => {
    logout();
    router.push('/admin');
  };

  const menuItems = [
    { icon: FaChartLine, label: 'Dashboard', path: '/admin/dashboard' },
    { icon: FaMusic, label: 'Albums', path: '/admin/albums' },
    { icon: FaShoppingBag, label: 'Purchases', path: '/admin/purchases' },
    { icon: FaHome, label: 'Back to Site', path: '/' },
  ];

  return (
    <div className="w-64 bg-paper-sand border-r-2 border-paper-brown flex flex-col">
      {/* Header */}
      <div className="p-6 border-b-2 border-paper-brown">
        <h1 className="text-2xl font-bold text-paper-dark border-b-4 border-paper-dark inline-block pb-1">
          Admin Panel
        </h1>
        <p className="text-sm text-paper-gray mt-3">Podzahr</p>
      </div>

      {/* Menu */}
      <nav className="flex-1 p-4 space-y-2">
        {menuItems.map((item) => {
          const isActive = pathname === item.path;
          const Icon = item.icon;

          return (
            <motion.button
              key={item.path}
              whileHover={{ x: 4 }}
              onClick={() => router.push(item.path)}
              className={`w-full flex items-center gap-3 px-4 py-3 border-2 transition-all ${
                isActive
                  ? 'bg-paper-brown text-paper-light border-paper-dark shadow-paper'
                  : 'text-paper-dark border-paper-brown/30 hover:bg-paper-light hover:border-paper-brown'
              }`}
            >
              <Icon className="text-xl" />
              <span className="font-medium">{item.label}</span>
            </motion.button>
          );
        })}
      </nav>

      {/* Logout */}
      <div className="p-4 border-t-2 border-paper-brown">
        <motion.button
          whileHover={{ x: 4 }}
          onClick={handleLogout}
          className="w-full flex items-center gap-3 px-4 py-3 border-2 border-red-400 text-red-700 hover:bg-red-100 transition-all"
        >
          <FaSignOutAlt className="text-xl" />
          <span className="font-medium">Logout</span>
        </motion.button>
      </div>
    </div>
  );
}