"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
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";

export function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="fixed inset-y-0 start-0 z-40 hidden w-64 flex-col border-s border-border bg-card/95 backdrop-blur-md md:flex">
      <div className="border-b border-border px-6 py-5">
        <Link href="/panel" className="block space-y-2">
          <span className="inline-flex p-2 dark:bg-white">
            <Image
              src="/logo.png"
              alt="Next Goal"
              width={207}
              height={80}
              priority
              className="h-10 w-auto max-w-full object-contain object-start"
            />
          </span>
          <p className="text-xs text-muted-foreground">مدیریت اهداف و عادت‌ها</p>
        </Link>
      </div>

      <nav
        aria-label={navigationDict.ariaLabel}
        className="flex flex-1 flex-col gap-1 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}
              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>
          );
        })}
      </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>
  );
}