"use client";

import { useState } from "react";
import { useRouter, usePathname } from "next/navigation";
import Link from "next/link";

interface NavItem {
  name: string;
  href: string;
  icon: string;
}

const navItems: NavItem[] = [
  { name: "Dashboard", href: "/admin", icon: "📊" },
  { name: "Health", href: "/admin/health", icon: "❤️‍🩹" },
  { name: "Errors", href: "/admin/errors", icon: "🐞" },
  { name: "Activity", href: "/admin/activity", icon: "🔍" },
  { name: "Audit Log", href: "/admin/audit", icon: "📜" },
  { name: "Families", href: "/admin/families", icon: "🏠" },
  { name: "Users", href: "/admin/users", icon: "👥" },
  { name: "Children", href: "/admin/children", icon: "👶" },
  { name: "Revenue", href: "/admin/revenue", icon: "💰" },
  { name: "Storage", href: "/admin/storage", icon: "💾" },
  { name: "Analytics", href: "/admin/analytics", icon: "📈" },
  { name: "AI Usage", href: "/admin/ai", icon: "🤖" },
  { name: "Support", href: "/admin/support", icon: "🎫" },
  { name: "Settings", href: "/admin/settings", icon: "⚙️" },
];

export default function AdminSidebar({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  const [sidebarOpen, setSidebarOpen] = useState(true);

  const handleLogout = async () => {
    try {
      await fetch("/api/admin/auth", { method: "DELETE", credentials: "include" });
    } catch {}
    router.push("/admin-login");
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white flex">
      <aside className={`${sidebarOpen ? "w-64" : "w-16"} bg-gray-800 flex-shrink-0 transition-all duration-300 flex flex-col`}>
        <div className="p-4 flex items-center justify-between border-b border-gray-700">
          {sidebarOpen && (
            <Link href="/admin" className="text-lg font-bold text-rose-400">
              Tia Admin
            </Link>
          )}
          <button onClick={() => setSidebarOpen(!sidebarOpen)} className="text-gray-400 hover:text-white">
            {sidebarOpen ? "◀" : "▶"}
          </button>
        </div>

        <nav className="flex-1 p-2 space-y-1 overflow-y-auto">
          {navItems.map((item) => {
            const isActive = pathname === item.href || (item.href !== "/admin" && pathname.startsWith(item.href));
            return (
              <Link
                key={item.name}
                href={item.href}
                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${
                  isActive ? "bg-rose-500/20 text-rose-400" : "text-gray-400 hover:bg-gray-700 hover:text-white"
                }`}
              >
                <span className="text-lg">{item.icon}</span>
                {sidebarOpen && <span className="font-medium">{item.name}</span>}
              </Link>
            );
          })}
        </nav>

        <div className="mt-auto p-4 border-t border-gray-700">
          <button
            onClick={handleLogout}
            className="w-full px-3 py-2 bg-gray-700 text-gray-400 hover:text-white rounded-lg text-sm"
          >
            {sidebarOpen ? "Logout" : "🚪"}
          </button>
        </div>
      </aside>

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