"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect } from "react";
import { usePathname } from "next/navigation";
import {
  X, Settings,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useUIStore } from "@/stores/ui-store";
import { WorkspaceSwitcher } from "@/components/layout/workspace-switcher";
import {
  orderSidebarItems,
  sidebarNavGroups,
  sidebarTopNav,
  type SidebarNavItem,
} from "@/lib/sidebar-navigation";

export function MobileSidebar() {
  const pathname = usePathname();
  const {
    favoriteSidebarItemIds,
    hiddenSidebarItemIds,
    initSidebarPreferences,
    sidebarCustomOrderIds,
    sidebarOpen,
    setSidebarOpen,
  } = useUIStore();
  const isVisible = (item: SidebarNavItem) => !hiddenSidebarItemIds.includes(item.id);
  const isFavorite = (item: SidebarNavItem) => favoriteSidebarItemIds.includes(item.id);
  const favoriteItems = orderSidebarItems(
    [
      ...sidebarTopNav,
      ...sidebarNavGroups.flatMap((group) => group.items),
    ].filter((item) => isVisible(item) && isFavorite(item)),
    sidebarCustomOrderIds
  );
  const visibleTopNav = orderSidebarItems(
    sidebarTopNav.filter((item) => isVisible(item) && !isFavorite(item)),
    sidebarCustomOrderIds
  );
  const visibleGroups = sidebarNavGroups
    .map((group) => ({
      ...group,
      items: orderSidebarItems(
        group.items.filter((item) => isVisible(item) && !isFavorite(item)),
        sidebarCustomOrderIds
      ),
    }))
    .filter((group) => group.items.length > 0);

  useEffect(() => {
    initSidebarPreferences();
  }, [initSidebarPreferences]);

  function NavLink({ item }: { item: SidebarNavItem }) {
    const isActive =
      item.href === "/"
        ? pathname === "/"
        : item.href === "/focus"
        ? pathname === "/focus" || (pathname.startsWith("/focus/") && !pathname.startsWith("/focus/rooms"))
        : pathname === item.href || pathname.startsWith(item.href + "/");
    return (
      <Link
        href={item.href}
        onClick={() => setSidebarOpen(false)}
        className={cn(
          "flex items-center gap-3 rounded-lg px-3 py-2.5 text-[13px] font-medium transition-all",
          isActive
            ? "bg-white/[0.07] text-white"
            : "text-white/40 hover:bg-white/[0.04] hover:text-white/70"
        )}
      >
        <item.icon className={cn("h-4 w-4 shrink-0", isActive ? "text-white/80" : "text-white/25")} />
        <span>{item.name}</span>
      </Link>
    );
  }

  if (!sidebarOpen) return null;

  return (
    <div className="fixed inset-0 z-[9990] md:hidden">
      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={() => setSidebarOpen(false)} />

      <div className="absolute inset-y-0 left-0 flex w-72 flex-col bg-[#0a0a0d] border-r border-white/[0.04] shadow-2xl shadow-black/60">
        <div className="flex h-14 items-center justify-between border-b border-white/[0.04] px-4">
          <div className="flex items-center gap-0">
            <Image
              src="/mindavio-logo.png"
              alt="Mindavio"
              width={104}
              height={104}
              className="rounded-lg"
              style={{ filter: "brightness(1.3) saturate(2.2) contrast(1.1)" }}
            />
            <span className="-ml-7 text-[12px] font-semibold tracking-wide text-gray-600 dark:text-white/75 dark:[text-shadow:0_0_12px_rgba(255,255,255,0.45)]">Mindavio</span>
          </div>
          <button onClick={() => setSidebarOpen(false)} className="rounded-md p-1.5 text-white/20 transition-colors hover:bg-white/[0.04] hover:text-white/40">
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="px-3 pt-3">
          <WorkspaceSwitcher />
        </div>

        <nav className="flex-1 overflow-y-auto px-2 py-2 scrollbar-none">
          {favoriteItems.length > 0 && (
            <div>
              <div className="flex items-center gap-2 px-3 pb-1 pt-2">
                <div className="h-px flex-1 bg-sky-400/60 opacity-20" />
                <p className="text-[9px] font-bold uppercase tracking-[0.18em] text-sky-400/60">Dock</p>
                <div className="h-px flex-1 bg-sky-400/60 opacity-20" />
              </div>
              <div className="space-y-0.5 pb-2">
                {favoriteItems.map((item) => <NavLink key={item.id} item={item} />)}
              </div>
            </div>
          )}

          {visibleTopNav.length > 0 && (
            <div className="space-y-0.5 pb-2">
              {visibleTopNav.map((item) => <NavLink key={item.id} item={item} />)}
            </div>
          )}

          {visibleGroups.map((group) => (
            <div key={group.id}>
              <div className="flex items-center gap-2 px-3 pb-1 pt-3">
                <div className={cn("h-px flex-1 opacity-20 bg-current", group.color)} />
                <p className={cn("text-[9px] font-bold uppercase tracking-[0.18em]", group.color)}>{group.label}</p>
                <div className={cn("h-px flex-1 opacity-20 bg-current", group.color)} />
              </div>
              <div className="space-y-0.5">
                {group.items.map((item) => <NavLink key={item.id} item={item} />)}
              </div>
            </div>
          ))}
        </nav>

        <div className="border-t border-white/[0.04] px-2 py-3">
          <Link
            href="/settings"
            onClick={() => setSidebarOpen(false)}
            className={cn(
              "flex items-center gap-3 rounded-lg px-3 py-2.5 text-[13px] font-medium transition-all",
              pathname.startsWith("/settings") ? "bg-white/[0.07] text-white" : "text-white/30 hover:bg-white/[0.04] hover:text-white/50"
            )}
          >
            <Settings className="h-4 w-4 shrink-0" />
            <span>Settings</span>
          </Link>
        </div>
      </div>
    </div>
  );
}