"use client";

import * as React from "react";
import {
  AudioWaveform,
  Blocks,
  BrainCircuit,
  Calendar,
  Command,
  Home,
  Inbox,
  MessageCircleQuestion,
  Search,
  Settings2,
  Sparkles,
  Trash2,
  Upload,
} from "lucide-react";

import { NavDocuments } from "@/components/nav-favorites";
import { NavMain } from "@/components/nav-main";
import { NavSecondary } from "@/components/nav-secondary";
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenuButton,
  SidebarRail,
} from "@/components/ui/sidebar";
import { createClient } from "@/utils/supabase/client";

export function AppSidebar({
  documents,
  ...props
}: React.ComponentProps<typeof Sidebar> & {
  documents?: Array<{ name: string; url: string; emoji?: string }>;
}) {
  const data = {
    navMain: [
      {
        title: "Search",
        url: "/dashboard/search",
        icon: Search,
      },
      {
        title: "Home",
        url: "/dashboard",
        icon: Home,
        isActive: true,
      },
      {
        title: "Upload",
        url: "/dashboard/upload",
        icon: Upload,
      },
    ],
    navSecondary: [
      {
        title: "Settings",
        url: "#",
        icon: Settings2,
      },
      {
        title: "Trash",
        url: "#",
        icon: Trash2,
      },
      {
        title: "Help",
        url: "#",
        icon: MessageCircleQuestion,
      },
    ],
  };

  return (
    <Sidebar className="border-r-0" {...props}>
      <SidebarHeader>
        <SidebarMenuButton className="w-fit px-1.5">
          <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
            <BrainCircuit className="size-3" />
          </div>
          <span className="truncate font-medium">Neuroread</span>
        </SidebarMenuButton>
        <NavMain items={data.navMain} />
      </SidebarHeader>
      <SidebarContent>
        <NavDocuments documents={documents} />
        <NavSecondary items={data.navSecondary} className="mt-auto" />
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  );
}