"use client"

import * as React from "react"
import { 
  ArrowRightIcon, 
  SettingsIcon, 
  LayoutTemplateIcon, 
  FilesIcon, 
  MenuIcon, 
  GlobeIcon 
} from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar
} from "@/components/ui/sidebar"
import { usePathname } from "next/navigation"
import { ThemeToggle } from "@/components/theme-toggle"
import Link from "next/link"
import { NavUser } from "@/components/nav-user"

type NavItem = {
  title: string;
  url: string;
  icon: React.ReactNode;
};

const navItems: NavItem[] = [
  { title: "تنظیمات عمومی", url: "/storefront/settings", icon: <SettingsIcon className="w-4 h-4" /> },
  { title: "مدیریت برگه‌ها", url: "/storefront/pages", icon: <FilesIcon className="w-4 h-4" /> },
  { title: "طراحی فوتر", url: "/storefront/footer", icon: <LayoutTemplateIcon className="w-4 h-4" /> },
  { title: "فهرست‌ها و منوها", url: "/storefront/menus", icon: <MenuIcon className="w-4 h-4" /> },
  { title: "قالب‌ها", url: "/storefront/themes", icon: <LayoutTemplateIcon className="w-4 h-4" /> },
]

export function StorefrontSidebar({ user, onlineServerUrl, settings, ...props }: React.ComponentProps<typeof Sidebar> & { user?: any, onlineServerUrl?: string | null, settings?: any }) {
  const pathname = usePathname();
  const { setOpenMobile } = useSidebar();

  const isNavActive = (url: string) => {
    return pathname.startsWith(url);
  };

  return (
    <Sidebar side="right" {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem className="flex items-center gap-1 w-full relative">
            <SidebarMenuButton size="lg" asChild className="flex-1">
              <Link href="/" onClick={() => setOpenMobile(false)}>
                <div className="flex aspect-square size-8 items-center justify-center rounded-lg shadow-sm bg-transparent overflow-hidden object-contain">
                  <img src="/favicon.ico" alt="Tukan Logo" className="w-full h-full object-contain drop-shadow-sm" />
                </div>
                <div className="grid flex-1 text-right text-sm leading-tight mr-2">
                  <span className="truncate font-bold text-base">سایت‌ساز توکان</span>
                  <span className="truncate text-xs text-muted-foreground">طراحی فروشگاه آنلاین</span>
                </div>
              </Link>
            </SidebarMenuButton>
            <div className="absolute left-2">
              <ThemeToggle />
            </div>
          </SidebarMenuItem>
          <SidebarMenuItem className="px-2 pt-2">
            <Link href="/" onClick={() => setOpenMobile(false)}>
              <div className="flex items-center gap-2 text-muted-foreground hover:text-foreground text-sm py-2 px-2 rounded-lg hover:bg-muted transition-colors">
                <ArrowRightIcon className="w-4 h-4" />
                <span>بازگشت به پنل اصلی</span>
              </div>
            </Link>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <SidebarContent>
        <SidebarMenu className="px-3 mt-4 space-y-1 flex-1">
          {navItems.map((item) => (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton
                asChild
                className={`py-5 group/navitem transition-colors rounded-xl font-medium`}
                isActive={isNavActive(item.url)}
              >
                <Link href={item.url} className="flex items-center gap-3" onClick={() => setOpenMobile(false)}>
                  <div className={`transition-transform duration-300 group-hover/navitem:scale-110 group-hover/navitem:text-indigo-500`}>
                    {item.icon}
                  </div>
                  <span className={`text-sm tracking-tight group-hover/navitem:text-indigo-600`}>{item.title}</span>
                </Link>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarContent>

      <SidebarFooter>
        <SidebarMenu className="px-3">
          {onlineServerUrl && (
            <SidebarMenuItem>
              <SidebarMenuButton asChild className="mb-1 text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50 font-bold transition-colors cursor-pointer rounded-xl py-5">
                <a href={onlineServerUrl} target="_blank" rel="noopener noreferrer">
                  <GlobeIcon className="w-5 h-5" />
                  <span>نمایش نسخه آنلاین</span>
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          )}
        </SidebarMenu>
        <NavUser user={user || { name: "مدیر", email: "admin@tukan.ir", avatar: "" }} />
      </SidebarFooter>
    </Sidebar>
  )
}