import * as React from "react"
import Image from "next/image"

import { AppWindow, Settings, LayoutDashboardIcon, Briefcase } from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarRail,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"

import Link from "next/link"

// This is sample data.
const data = {
  navMain: [
    {
        title: "Dashboard",
        icon: LayoutDashboardIcon,
        url: "/dashboard"
    },
    {
        title: "Customization",
        url: "#",
        icon: Briefcase,
        items: [
            {
            title: "Applications",
            icon: AppWindow,
            url: "/dashboard/applications",
        },
        {
            title: "Settings",
            icon: Settings,
            url: "/Dashboard/setting",
        },
      ],
    },
  ],
}

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  return (
    <Sidebar {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild>
              <a href="#">
                <Image src="/logo.png" width={48} height={48} alt="Logo"/>
                <div className="flex flex-col gap-0.5 leading-none">
                  <span className="font-semibold">CoreControl</span>
                  <span className="">v0.0.1</span>
                </div>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent className="flex flex-col h-full">
        <SidebarGroup className="flex-grow">
            <SidebarMenu>
            {data.navMain.map((item) => (
                <SidebarMenuItem key={item.title}>
                <SidebarMenuButton asChild>
                    <Link href={item.url} className="font-medium">
                    {item.icon && <item.icon className="mr-2" />}
                    {item.title}
                    </Link>
                </SidebarMenuButton>
                {item.items?.length ? (
                    <SidebarMenuSub>
                    {item.items.map((subItem) => (
                        <SidebarMenuSubItem key={subItem.title}>
                        <SidebarMenuSubButton asChild isActive={subItem.isActive}>
                            <Link href={subItem.url}>
                            {subItem.icon && <subItem.icon className="mr-2" />}
                            {subItem.title}
                            </Link>
                        </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                    ))}
                    </SidebarMenuSub>
                ) : null}
                </SidebarMenuItem>
            ))}
            </SidebarMenu>
        </SidebarGroup>

        {/* 🚀 Hier kommt der Logout-Button ganz unten */}
        <div className="p-4">
            <Button variant="destructive" className="w-full">
            Logout
            </Button>
        </div>
        </SidebarContent>

      <SidebarRail />
    </Sidebar>
  )
}