import Link from "next/link";
import { Home, LayoutDashboard, ShoppingBag, BookOpen, GraduationCap, Briefcase, Users, Settings, ChevronRight, LogOut, MapPin, MessageCircle, Plane, Ticket } from "lucide-react";
import Image from "next/image";

const adminNav = [
  { href: "/admin", label: "Overview", icon: LayoutDashboard },
  { href: "/admin/home", label: "Home Page", icon: Home },
  { href: "/admin/ecommerce", label: "E Commerce", icon: ShoppingBag },
  { href: "/admin/journals", label: "Journals", icon: BookOpen },
  { href: "/admin/scholarships", label: "Scholarships", icon: GraduationCap },
  { href: "/admin/jobs", label: "Jobs", icon: Briefcase },
  { href: "/admin/tickets", label: "Tickets", icon: Ticket },
  { href: "/admin/tours", label: "Tours & Travel", icon: MapPin },
  { href: "/admin/visa", label: "Visa Services", icon: Plane },
  { href: "/admin/subscriptions", label: "Subscribers", icon: Users },
  { href: "/admin/chat", label: "Chat Leads", icon: MessageCircle },
  { href: "/admin/settings", label: "Settings", icon: Settings },
];

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex flex-col h-screen bg-neutral-100 overflow-hidden">
      <div className="flex flex-1 overflow-hidden">
      {/* Sidebar */}
      <aside className="w-60 bg-navy-900 flex flex-col shrink-0">
        <div className="p-5 border-b border-navy-800">
          <Image src="/images/logo-dark.png" alt="KC Systems" width={130} height={32} className="h-8 w-auto brightness-0 invert" />
          <div className="mt-3 text-xs text-navy-400 font-medium uppercase tracking-wider">Admin Panel</div>
        </div>
        <nav className="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
          {adminNav.map(({ href, label, icon: Icon }) => (
            <Link
              key={href}
              href={href}
              className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium text-navy-300 hover:text-white hover:bg-navy-700 transition-colors group"
            >
              <Icon size={17} className="shrink-0" />
              {label}
              <ChevronRight size={13} className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity" />
            </Link>
          ))}
        </nav>
        <div className="p-4 border-t border-navy-800 space-y-2">
          <div className="flex items-center gap-3 px-1">
            <div className="w-8 h-8 bg-navy-700 rounded-full flex items-center justify-center text-xs font-bold text-white shrink-0">A</div>
            <div className="min-w-0">
              <div className="text-xs font-medium text-white truncate">Admin User</div>
              <div className="text-xs text-navy-400 truncate">admin@kcsystems.com</div>
            </div>
          </div>
          <Link
            href="/login"
            className="flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-medium text-navy-400 hover:text-red-400 hover:bg-navy-800 transition-colors w-full"
          >
            <LogOut size={15} />
            Sign Out
          </Link>
        </div>
      </aside>

      {/* Content */}
      <div className="flex-1 overflow-y-auto">
        {children}
      </div>
      </div>
    </div>
  );
}