"use client";

import type React from "react";
import Link from "next/link";
import {
  LayoutDashboard,
  Download,
  Layers,
  Boxes,
  Store,
  Users,
  Settings,
  LucideMail,
  Wand2,
} from "lucide-react";

export type AdminNavItem = {
  label: string;
  href: string;
  icon: React.ReactNode;
};

type AdminLeftNavigationProps = {
  collapsed: boolean;
  onToggleCollapsed: () => void;
  items?: AdminNavItem[]; // ✅ NEW
};

const defaultNavItems: AdminNavItem[] = [
  { label: "Dashboard", href: "/admin", icon: <LayoutDashboard className="h-4 w-4" /> },
  { label: "Imports", href: "/admin/import-status", icon: <Download className="h-4 w-4" /> },
  { label: "Mappings", href: "/admin/mapping", icon: <Layers className="h-4 w-4" /> },
  { label: "Products", href: "/admin/products", icon: <Boxes className="h-4 w-4" /> },
  { label: "Merchants", href: "/admin/merchants", icon: <Store className="h-4 w-4" /> },
  { label: "Platforms", href: "/admin/platforms", icon: <Layers className="h-4 w-4" /> },
  { label: "Enrichment", href: "/admin/enrichment", icon: <Wand2 className="h-4 w-4" /> },
  { label: "Users", href: "/admin/users", icon: <Users className="h-4 w-4" /> },
  { label: "Settings", href: "/admin/settings", icon: <Settings className="h-4 w-4" /> },
  { label: "Manage Emails", href: "/admin/email/manage", icon: <LucideMail className="h-4 w-4" /> },
  { label: "Send an Email", href: "/admin/email/send", icon: <LucideMail className="h-4 w-4" /> },
];

export default function AdminLeftNavigation({
  collapsed,
  onToggleCollapsed,
  items = defaultNavItems, // ✅ NEW default
}: AdminLeftNavigationProps) {
  return (
    <aside
      className={`hidden border-r border-zinc-900 bg-zinc-950/80 px-3 py-6 md:flex md:flex-col transition-all duration-200 ${
        collapsed ? "w-16" : "w-60"
      }`}
    >
      <div className="mb-6 flex items-center gap-2">
        <button
          type="button"
          onClick={onToggleCollapsed}
          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-400 transition hover:border-amber-400/60 hover:text-amber-300"
        >
          <span className="sr-only">Toggle sidebar</span>
          <div className="space-y-0.5">
            <span className="block h-[1px] w-3 bg-current" />
            <span className="block h-[1px] w-3 bg-current" />
            <span className="block h-[1px] w-3 bg-current" />
          </div>
        </button>

        {!collapsed && (
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
              <Link href="/" title="Back to Battl Dashboard">
                Battl Builders
              </Link>
            </p>
            <p className="text-[10px] text-zinc-600">Admin Command</p>
          </div>
        )}
      </div>

      <nav className="flex-1 space-y-1 text-sm">
        {items.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className="flex items-center justify-between rounded-md px-2 py-1.5 text-zinc-300 transition hover:bg-zinc-900 hover:text-amber-300"
          >
            <div className="flex items-center gap-2">
              {item.icon}
              {!collapsed && <span>{item.label}</span>}
            </div>
            {!collapsed && <span className="text-[10px] text-zinc-600">›</span>}
          </Link>
        ))}
      </nav>

      {!collapsed && (
        <div className="mt-6 border-t border-zinc-900 pt-4 text-[11px] text-zinc-600">
          <p className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">Status</p>
          <p className="mt-1">
            Import engine: <span className="text-emerald-400">online</span>
          </p>
          <p className="text-zinc-500">Builder UI: in progress</p>
        </div>
      )}
    </aside>
  );
}