"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect } from "react";
import { Menu, X } from "lucide-react";
import { navItems } from "@/components/bottom-nav/nav-items";
import { AndroidAppDownloadLink } from "@/components/android-app-download-link";
import { isActiveRoute } from "@/components/navigation/is-active-route";
import { ThemeToggle } from "@/components/theme-toggle";
import { navigationDict } from "@/features/navigation/dict";
import { panelDict } from "@/features/panel/dict";

type DashboardMenuDrawerProps = {
  open: boolean;
  onClose: () => void;
};

function ProfileIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={1.75}
    >
      <circle cx="12" cy="8" r="4" />
      <path d="M6 20c0-3.3 2.7-6 6-6s6 2.7 6 6" />
    </svg>
  );
}

const extraMenuItems = [
  {
    href: "/panel/profile",
    label: panelDict.profile,
    icon: ProfileIcon,
  },
] as const;

export function DashboardMenuDrawer({ open, onClose }: DashboardMenuDrawerProps) {
  const pathname = usePathname();

  useEffect(() => {
    if (!open) {
      return;
    }

    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        onClose();
      }
    };

    document.addEventListener("keydown", handleEscape);
    document.body.style.overflow = "hidden";

    return () => {
      document.removeEventListener("keydown", handleEscape);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);

  return (
    <>
      <button
        type="button"
        aria-label={panelDict.closeMenu}
        onClick={onClose}
        className={`fixed inset-0 z-[100] bg-black/40 transition-opacity duration-300 md:hidden ${
          open ? "opacity-100" : "pointer-events-none opacity-0"
        }`}
      />

      <aside
        aria-hidden={!open}
        className={`fixed inset-y-0 right-0 z-[101] flex w-[min(100%,18rem)] flex-col border-l border-border bg-card shadow-soft transition-transform duration-300 ease-out md:hidden ${
          open ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <div className="flex items-center justify-between border-b border-border px-4 py-4">
          <Link href="/panel" onClick={onClose} className="inline-flex p-1">
            <Image
              src="/logo.png"
              alt="Next Goal"
              width={140}
              height={54}
              className="h-8 w-auto object-contain"
            />
          </Link>
          <button
            type="button"
            aria-label={panelDict.closeMenu}
            onClick={onClose}
            className="inline-flex size-10 items-center justify-center rounded-2xl text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
          >
            <X aria-hidden className="size-5" />
          </button>
        </div>

        <nav
          aria-label={navigationDict.ariaLabel}
          className="flex flex-1 flex-col gap-1 overflow-y-auto px-3 py-4"
        >
          {navItems.map((item) => {
            const active = isActiveRoute(pathname, item.href);
            const Icon = item.icon;
            const label = navigationDict[item.label];

            return (
              <Link
                key={item.href}
                href={item.href}
                onClick={onClose}
                aria-current={active ? "page" : undefined}
                className={`flex items-center gap-3 rounded-2xl px-3 py-3 transition-colors ${
                  active
                    ? "bg-primary/15 text-primary"
                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                }`}
              >
                <span
                  className={`inline-flex size-10 items-center justify-center rounded-xl ${
                    active ? "bg-primary text-primary-foreground shadow-soft-sm" : ""
                  }`}
                >
                  <Icon className="size-5" />
                </span>
                <span className="text-sm font-medium">{label}</span>
              </Link>
            );
          })}

          {extraMenuItems.map((item) => {
            const active = pathname.startsWith(item.href);
            const Icon = item.icon;

            return (
              <Link
                key={item.href}
                href={item.href}
                onClick={onClose}
                aria-current={active ? "page" : undefined}
                className={`flex items-center gap-3 rounded-2xl px-3 py-3 transition-colors ${
                  active
                    ? "bg-primary/15 text-primary"
                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                }`}
              >
                <span
                  className={`inline-flex size-10 items-center justify-center rounded-xl ${
                    active ? "bg-primary text-primary-foreground shadow-soft-sm" : ""
                  }`}
                >
                  <Icon className="size-5" />
                </span>
                <span className="text-sm font-medium">{item.label}</span>
              </Link>
            );
          })}
        </nav>

        <div className="space-y-3 border-t border-border px-4 py-4">
          <AndroidAppDownloadLink
            label={panelDict.androidAppDownload}
            className="flex w-full items-center justify-center gap-2 rounded-2xl border border-emerald-200 bg-emerald-50 px-3 py-3 text-sm font-medium text-emerald-900 transition-colors hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-100 dark:hover:bg-emerald-950/60"
          />
          <ThemeToggle menuPlacement="top" />
        </div>
      </aside>
    </>
  );
}

export function DashboardMenuButton({
  onClick,
}: {
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      aria-label={panelDict.openMenu}
      onClick={onClick}
      className="inline-flex size-10 items-center justify-center rounded-2xl bg-card text-muted-foreground shadow-soft-sm transition-colors hover:bg-accent hover:text-accent-foreground md:hidden"
    >
      <Menu aria-hidden className="size-5" />
    </button>
  );
}