"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Receipt,
  PiggyBank,
  Target,
  RefreshCw,
  ListTodo,
  BarChart3,
  Settings,
  X,
  ShieldCheck
} from "lucide-react";
import { useTranslations, useLocale } from "@/lib/i18n/i18n-provider";
import { cn } from "@/lib/utils";

const ITEMS = [
  { href: "dashboard", icon: LayoutDashboard, key: "nav.dashboard" },
  { href: "expenses", icon: Receipt, key: "nav.expenses" },
  { href: "budget", icon: PiggyBank, key: "nav.budget" },
  { href: "goals", icon: Target, key: "nav.goals" },
  { href: "subscriptions", icon: RefreshCw, key: "nav.subscriptions" },
  { href: "planning", icon: ListTodo, key: "nav.planning" },
  { href: "reports", icon: BarChart3, key: "nav.reports" },
  { href: "settings", icon: Settings, key: "nav.settings" }
];

export function Sidebar({
  mobileOpen,
  onCloseMobile,
  isAdmin = false
}: {
  mobileOpen: boolean;
  onCloseMobile: () => void;
  isAdmin?: boolean;
}) {
  const pathname = usePathname();
  const t = useTranslations();
  const locale = useLocale();

  const items = isAdmin
    ? [...ITEMS, { href: "admin", icon: ShieldCheck, key: "nav.admin" }]
    : ITEMS;

  const nav = (
    <nav className="flex flex-1 flex-col gap-1 px-3">
      {items.map(({ href, icon: Icon, key }) => {
        const full = `/${locale}/${href}`;
        const active = pathname === full || pathname.startsWith(full + "/");
        return (
          <Link
            key={href}
            href={full}
            onClick={onCloseMobile}
            className={cn(
              "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors",
              active ? "bg-brand-50 text-brand-700" : "text-ink-600 hover:bg-ink-100"
            )}
            aria-current={active ? "page" : undefined}
          >
            <Icon className="h-4 w-4 shrink-0" aria-hidden="true" />
            {t(key)}
          </Link>
        );
      })}
    </nav>
  );

  return (
    <>
      {/* Desktop sidebar */}
      <aside className="hidden w-64 shrink-0 flex-col border-r border-ink-100 bg-white py-6 md:flex">
        <Link href={`/${locale}`} className="mb-6 flex items-center gap-2 px-6">
          <div className="h-6 w-6 rounded-lg bg-brand-600" />
          <span className="text-base font-semibold text-ink-900">Tidyly</span>
        </Link>
        {nav}
      </aside>

      {/* Mobile drawer */}
      {mobileOpen && (
        <div className="fixed inset-0 z-40 md:hidden">
          <div className="absolute inset-0 bg-ink-950/40" onClick={onCloseMobile} aria-hidden="true" />
          <aside className="relative z-10 flex h-full w-72 flex-col bg-white py-6 shadow-xl">
            <div className="mb-6 flex items-center justify-between px-6">
              <Link href={`/${locale}`} className="flex items-center gap-2" onClick={onCloseMobile}>
                <div className="h-6 w-6 rounded-lg bg-brand-600" />
                <span className="text-base font-semibold text-ink-900">Tidyly</span>
              </Link>
              <button
                onClick={onCloseMobile}
                aria-label="Close menu"
                className="rounded-lg p-1.5 text-ink-400 hover:bg-ink-100"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            {nav}
          </aside>
        </div>
      )}
    </>
  );
}