"use client";

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

type AdminLeftNavigationProps = {
  collapsed: boolean;
  onToggleCollapsed: () => void;
};

const navItems = [
  {
    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: "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 a Email",
    href: "/admin/email/send",
    icon: <LucideMail className="h-4 w-4" />,
  },
];

export default function AdminLeftNavigation({
  collapsed,
  onToggleCollapsed,
}: 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">
        {navItems.map((item) => (
          <a
            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>}
          </a>
        ))}
      </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>
  );
}