"use client";

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import {
  Home,
  FolderOpen,
  Users,
  Type,
  Image,
  History,
  ChevronLeft,
  ChevronRight,
  Video,
  PanelsLeftBottom,
  ArrowLeftToLine,
  X
} from 'lucide-react';

interface SidebarProps {
  collapsed: boolean;
  onToggle: (collapsed: boolean) => void;
}

const navigationItems = [
  {
    title: 'Main',
    items: [
      { name: 'Home', href: '/', icon: Home },
      { name: 'Media Library', href: '/media', icon: FolderOpen },
      { name: 'Actors Library', href: '/actors', icon: Users },
      { name: 'Task History', href: '/history', icon: History },
    ],
  }
];

export function Sidebar({ collapsed, onToggle }: SidebarProps) {
  const pathname = usePathname();

  return (
    <>
      {/* Backdrop */}
      {!collapsed && (
        <div
          className="fixed inset-0 bg-[#000000bf] z-40"
          onClick={() => onToggle(true)}
        />
      )}
      
      {/* Sidebar */}
      <div
        className={cn(
          'fixed left-0 top-0 z-50 h-full w-64 bg-[#131416] transition-transform duration-300',
          collapsed ? '-translate-x-full' : 'translate-x-0'
        )}
      >
        <div className="flex h-full flex-col">
          <div className="flex h-16 items-center justify-between px-4">
            <div className="flex items-center space-x-2">
              <Video className="h-8 w-8 text-primary" />
              <span className="text-xl font-bold text-primary">
                Movie Flow
              </span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onToggle(true)}
              className="button-NxtqWZ"
            >
              <ArrowLeftToLine className="h-4 w-4" />
            </Button>
          </div>

          {/* Navigation */}
          <div className="flex-1 overflow-y-auto">
            {navigationItems.map((section, index) => (
              <div key={section.title}>
                <div className="space-y-1">
                  {section.items.map((item) => {
                    const isActive = pathname === item.href;
                    return (
                      <Link key={item.name} href={item.href}>
                        <Button
                          variant={isActive ? 'secondary' : 'ghost'}
                          className={cn(
                            'w-full justify-start px-4',
                            isActive && 'bg-primary/10 text-primary hover:bg-primary/20'
                          )}
                        >
                          <item.icon className="h-4 w-4" />
                          <span className="ml-2">{item.name}</span>
                        </Button>
                      </Link>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}