"use client";

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

import Link from "next/link";
import { School, Settings, User, GraduationCap, Award, Users, Clock, BookOpen, Home } from "lucide-react";

const SidebarContent = () => {
  return (
    <Command className="bg-background h-full">
      <CommandList className="overflow-visible">
        <CommandGroup heading="Dashboard PODIF" className="mt-2">      
          <Link href="/" className="w-full no-underline cursor-pointer">
            <CommandItem className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors cursor-pointer">
              <Home className="h-4 w-4" />
              <span>Beranda</span>
            </CommandItem>
          </Link>
        </CommandGroup>
        <CommandGroup heading="Menu Utama">
          <CommandItem className="p-0">
            <Accordion type="single" collapsible defaultValue="visualisasi" className="w-full">
              <AccordionItem value="visualisasi" className="border-none">
                <AccordionTrigger className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md transition-colors">
                  <div className="flex items-center">
                    <School className="mr-2 h-4 w-4" />
                    <span>Visualisasi</span>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="pl-6 flex flex-col space-y-1">
                  <Link href="visualisasi/mahasiswa" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <GraduationCap className="mr-2 h-4 w-4" />
                      <span>Mahasiswa</span>
                    </Link>
                    <Link href="visualisasi/status" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <GraduationCap className="mr-2 h-4 w-4" />
                      <span>Status Kuliah</span>
                    </Link>
                    <Link href="visualisasi/tipekelulusan" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <Clock className="mr-2 h-4 w-4" />
                      <span>Tipe Kelulusan</span>
                    </Link>
                    <Link href="visualisasi/beasiswa" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <BookOpen className="mr-2 h-4 w-4" />
                      <span>Beasiswa</span>
                    </Link>
                    <Link href="visualisasi/prestasi" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <Award className="mr-2 h-4 w-4" />
                      <span>Prestasi</span>
                    </Link>
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </CommandItem>
          <CommandItem className="p-0 mt-2">
            <Accordion type="single" collapsible defaultValue="keloladata" className="w-full">
              <AccordionItem value="keloladata" className="border-none">
                <AccordionTrigger className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md transition-colors">
                  <div className="flex items-center">
                    <School className="mr-2 h-4 w-4" />
                    <span>Kelola Data</span>
                  </div>
                </AccordionTrigger>
                <AccordionContent>
                  <div className="pl-6 flex flex-col space-y-1">
                    <Link href="keloladata/mahasiswa" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <GraduationCap className="mr-2 h-4 w-4" />
                      <span>Mahasiswa</span>
                    </Link>
                    <Link href="keloladata/beasiswa" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <BookOpen className="mr-2 h-4 w-4" />
                      <span>Beasiswa</span>
                    </Link>
                    <Link href="keloladata/prestasi" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <Award className="mr-2 h-4 w-4" />
                      <span>Prestasi</span>
                    </Link>
                    <Link href="keloladata/kelompokkeahlian" className="py-2 px-3 hover:bg-accent hover:text-accent-foreground rounded-md flex items-center transition-colors">
                      <Award className="mr-2 h-4 w-4" />
                      <span>Kelompok Keahlian</span>
                    </Link>
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
      </CommandList>
    </Command>
  );
};

export default SidebarContent;