Untitled

"use client"

import * as React from "react"
import { Minus, Plus, Trash2 } from 'lucide-react'
import { useTheme } from "next-themes"
import { useSettings } from "@/hooks/useSettings"
import { useTranslation, type SupportedLanguages } from "@/utils/translations"

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
  SidebarRail,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Moon, Sun } from 'lucide-react'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const { theme } = useTheme()
  const { settings, updateSettings } = useSettings()
  const { t } = useTranslation(settings?.language as SupportedLanguages || 'EN')

  const navData = React.useMemo(() => ({
    navMain: [
      {
        title: t('navigation.home'),
        url: "/",
        isDirectLink: true,
      },
      {
        title: t('navigation.gallery'),
        url: "gallery",
        isDirectLink: true,
      },
      {
        title: t('navigation.placeholder'),
        url: "#",
        items: [
          {
            title: t('navigation.components'),
            url: "#",
          },
          {
            title: t('navigation.fileConventions'),
            url: "#",
          },
          {
            title: t('navigation.functions'),
            url: "#",
          },
        ],
      },
      {
        title: t('navigation.help'),
        url: "#",
        items: [
          {
            title: t('navigation.guide'),
            url: "guide",
          },
        ],
      },
      {
        title: t('navigation.settings'),
        url: "#",
        items: [
          {
            title: t('navigation.components'),
            url: "#",
          },
          {
            title: t('navigation.fileConventions'),
            url: "#",
          },
          {
            title: t('navigation.functions'),
            url: "#",
          },
        ],
      },
    ],
  }), [t]);

  const handleThemeToggle = () => {
    const newDarkMode = theme === "light" ? 1 : 0;
    updateSettings({ dark_mode: newDarkMode });
  };

  const handleLanguageChange = (value: string) => {
    updateSettings({ language: value });
  };

  return (
    <Sidebar {...props}>
      <SidebarHeader className="border-b p-4">
        <div className="flex items-center gap-3 px-2">
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-sidebar-primary to-sidebar-primary/80 text-sidebar-primary-foreground">
            <Trash2 className="h-6 w-6" />
          </div>
          <div className="flex flex-col">
            <span className="text-lg font-semibold text-sidebar-foreground">SortiMate</span>
            <span className="text-xs text-sidebar-foreground/60">
              {t('common.aiAssistant')}
            </span>
          </div>
        </div>
      </SidebarHeader>
      
      <SidebarContent>
        <SidebarGroup>
          <SidebarMenu>
            {navData.navMain.map((item) => (
              item.isDirectLink ? (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton asChild>
                    <a href={item.url}>{item.title}</a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ) : (
                <Collapsible
                  key={item.title}
                  className="group/collapsible"
                >
                  <SidebarMenuItem>
                    <CollapsibleTrigger asChild>
                      <SidebarMenuButton>
                        {item.title}{" "}
                        <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
                        <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
                      </SidebarMenuButton>
                    </CollapsibleTrigger>
                    {item.items?.length ? (
                      <CollapsibleContent>
                        <SidebarMenuSub>
                          {item.items.map((item) => (
                            <SidebarMenuSubItem key={item.title}>
                              <SidebarMenuSubButton
                                asChild
                                isActive={item.isActive}
                              >
                                <a href={item.url}>{item.title}</a>
                              </SidebarMenuSubButton>
                            </SidebarMenuSubItem>
                          ))}
                        </SidebarMenuSub>
                      </CollapsibleContent>
                    ) : null}
                  </SidebarMenuItem>
                </Collapsible>
              )
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>

      <div className="mt-auto border-t p-4 space-y-2">
        <Button
          variant="ghost"
          size="sm"
          className="w-full justify-between"
          onClick={handleThemeToggle}
        >
          <span className="text-sm">{t('common.theme')}</span>
          <div className="flex items-center">
            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          </div>
        </Button>

        <Select
          value={settings?.language || "EN"}
          onValueChange={handleLanguageChange}
        >
          <SelectTrigger className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="EN">{t('common.english')}</SelectItem>
            <SelectItem value="DE">{t('common.german')}</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <SidebarRail />
    </Sidebar>
  );
}