import { Link } from 'react-router-dom';
import {
  Sidebar,
  SidebarContent, SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem, useSidebar,
} from "@/components/ui/sidebar"
import { t } from 'i18next';
import { cn } from '@root/lib/utils';

import {
  Home,
  Users,
  Server,
  Cable,
  ListChecks,
  FileText,
  Settings, EarthLock,
} from 'lucide-react';
import { UpdateButton } from "@/components/layout/update-button";
import React from "react";
import { SheetClose } from '@/components/ui/sheet';
import logo from "@/assets/image/logo.png"

const menuItems = [
  { title: 'Home', url: '/home', icon: Home },
  { title: 'Profiles', url: '/profile', icon: Users },
  { title: 'Proxies', url: '/proxies', icon: Server },
  { title: 'Connections', url: '/connections', icon: Cable },
  { title: 'Rules', url: '/rules', icon: ListChecks },
  { title: 'Logs', url: '/logs', icon: FileText },
  { title: 'Settings', url: '/settings', icon: Settings },
];

export function AppSidebar() {
  const { isMobile } = useSidebar();
  return (
    <Sidebar variant="floating" collapsible="icon">
      <SidebarHeader>
        <SidebarMenuButton size="lg"
          className={cn(
            "flex h-12 items-center transition-all duration-200",
            "group-data-[state=expanded]:w-full group-data-[state=expanded]:gap-2 group-data-[state=expanded]:px-3",
            "group-data-[state=collapsed]:w-full group-data-[state=collapsed]:justify-center"
          )}
        >
          <img
            src={logo}
            alt="logo"
            className="h-6 w-6 flex-shrink-0"
          />
          <span className="font-semibold whitespace-nowrap group-data-[state=collapsed]:hidden">
            Koala Clash
          </span>
        </SidebarMenuButton>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu className="gap-3">
              {menuItems.map((item) => {
                const isActive = location.pathname === item.url;
                const linkElement = (
                  <Link
                    key={item.title}
                    to={item.url}
                    className={cn(
                      'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
                      'data-[active=true]:font-semibold data-[active=true]:border'
                    )}
                  >
                    <item.icon className="h-4 w-4 drop-shadow-md" />
                    {t(item.title)}
                  </Link>
                )
                return (
                <SidebarMenuItem key={item.title} className="my-1">
                  <SidebarMenuButton
                    asChild
                    isActive={isActive}
                    tooltip={t(item.title)}>
                    {isMobile ? (
                        <SheetClose asChild>
                          {linkElement}
                        </SheetClose>
                      ) : (
                        linkElement
                      )}
                  </SidebarMenuButton>
                </SidebarMenuItem>
                )
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <div className="w-full flex justify-center">
          <UpdateButton className="bg-green-700 hover:bg-green-500 hover:text-white text-white text-shadow-md" />
        </div>
      </SidebarFooter>
    </Sidebar>
  )
}