"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard, Building2, Globe, Brain, AlertTriangle, Activity,
  ExternalLink, BarChart3, Users, FileSearch, Radio, Flag,
  CreditCard, Zap, Shield, Target, Footprints, Megaphone,
} from "lucide-react";
import { APP_URL } from "@/lib/config";

// Sidebar is grouped per the admin portal spec. Each group has a
// small-caps header + its item list. Keeping the groupings here as
// data (rather than JSX) so new sections can be added without
// reflowing the component body.
type NavItem = { href: string; label: string; icon: typeof LayoutDashboard; comingSoon?: boolean };
type NavGroup = { heading: string; items: NavItem[] };

const GROUPS: NavGroup[] = [
  {
    heading: "Overview",
    items: [
      { href: "/admin", label: "Dashboard", icon: LayoutDashboard },
    ],
  },
  {
    heading: "Platform",
    items: [
      { href: "/admin/users", label: "Users", icon: Users },
      { href: "/admin/organizations", label: "Organizations", icon: Building2 },
      { href: "/admin/brands", label: "Brands", icon: Globe },
      { href: "/admin/integrations", label: "Integrations", icon: Zap },
      { href: "/admin/ai-usage", label: "Cost Center", icon: Brain },
    ],
  },
  {
    heading: "Content",
    items: [
      { href: "/admin/content", label: "All Audits & Reports", icon: FileSearch },
      { href: "/admin/signals", label: "Signal Overview", icon: Radio },
      { href: "/admin/industry", label: "Industry Data", icon: BarChart3 },
    ],
  },
  {
    heading: "Intelligence",
    items: [
      { href: "/admin/ai-monitor", label: "AI Monitor", icon: Shield },
      { href: "/admin/analytics", label: "Platform Analytics", icon: Target },
      { href: "/admin/sessions", label: "Session Explorer", icon: Footprints },
      { href: "/admin/paid-media", label: "Paid Media", icon: Megaphone },
    ],
  },
  {
    heading: "Data",
    items: [
      { href: "/admin/historical", label: "Historical Data", icon: BarChart3 },
    ],
  },
  {
    heading: "System",
    items: [
      { href: "/admin/health", label: "Health Monitor", icon: Activity },
      { href: "/admin/errors", label: "Error Log", icon: AlertTriangle },
      { href: "/admin/flags", label: "Feature Flags", icon: Flag, comingSoon: true },
    ],
  },
  {
    heading: "Billing",
    items: [
      { href: "/admin/billing", label: "Plans & Pricing", icon: CreditCard, comingSoon: true },
    ],
  },
];

export default function AdminSidebar() {
  const pathname = usePathname();
  return (
    <aside className="w-60 bg-slate-900 text-white flex flex-col shrink-0 h-screen sticky top-0">
      <div className="px-5 py-4 border-b border-slate-800 flex items-center gap-2">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src="/images/meseo-logo-white.png" alt="meSEO" className="h-7 w-auto" />
        <span className="text-[9px] font-bold uppercase tracking-widest text-red-400 bg-red-500/10 border border-red-500/30 px-1.5 py-0.5 rounded">
          Admin
        </span>
      </div>
      <nav className="flex-1 px-3 py-4 space-y-4 overflow-y-auto">
        {GROUPS.map((group) => (
          <div key={group.heading}>
            <p className="px-3 pb-1.5 text-[9px] font-bold uppercase tracking-widest text-slate-500">
              {group.heading}
            </p>
            <div className="space-y-0.5">
              {group.items.map((item) => {
                const active = pathname === item.href || (item.href !== "/admin" && pathname.startsWith(item.href));
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={`flex items-center gap-2.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
                      active
                        ? "bg-slate-800 text-white"
                        : "text-slate-400 hover:text-white hover:bg-slate-800/50"
                    }`}
                  >
                    <item.icon className="w-3.5 h-3.5" />
                    <span className="flex-1">{item.label}</span>
                    {item.comingSoon && (
                      <span className="text-[8px] font-bold uppercase tracking-wider text-slate-500 bg-slate-800 px-1 py-0.5 rounded">
                        Soon
                      </span>
                    )}
                  </Link>
                );
              })}
            </div>
          </div>
        ))}
      </nav>
      <div className="px-3 py-3 border-t border-slate-800 space-y-1">
        {/* Exit to App points at the app hostname explicitly rather
            than the relative /dashboard path — admins running the
            portal on admin.meseoapp.com need a cross-host link. */}
        <a
          href={APP_URL}
          className="flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-slate-400 hover:text-white hover:bg-slate-800/50"
        >
          <ExternalLink className="w-3.5 h-3.5" /> Exit to App
        </a>
      </div>
    </aside>
  );
}
