"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,
} 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 },
    ],
  },
  {
    title: 'Plugins',
    items: [
      { name: 'Text to Clip', href: '/plugins/text-to-clip', icon: Type },
      { name: 'Text to Image', href: '/plugins/text-to-image', icon: Image },
    ],
  },
  {
    title: 'History',
    items: [
      { name: 'Task History', href: '/history', icon: History },
    ],
  },
];

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

  return (
    <div
      className={cn(
        'fixed left-0 top-0 z-50 h-full transition-all duration-300',
        collapsed ? 'w-16' : 'w-64'
      )}
    >
      <div className="flex h-full flex-col">
        {/* Logo */}
        <div className="flex h-16 items-center justify-between px-4 border-border">
          {!collapsed && (
            <div className="flex items-center space-x-2">
              <Video className="h-8 w-8 text-primary" />
              <span className="text-xl font-bold bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent">
                Movie Flow
              </span>
            </div>
          )}
          <Button
            variant="ghost"
            size="sm"
            onClick={() => onToggle(!collapsed)}
            className="h-8 w-8 p-0"
          >
            {collapsed ? (
              <ChevronRight className="h-4 w-4" />
            ) : (
              <ChevronLeft className="h-4 w-4" />
            )}
          </Button>
        </div>

        {/* Navigation */}
        <div className="flex-1 overflow-y-auto py-4">
          {navigationItems.map((section, index) => (
            <div key={section.title} className="px-3 py-2">
              {!collapsed && (
                <h2 className="mb-2 px-4 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                  {section.title}
                </h2>
              )}
              <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',
                          collapsed ? 'px-2' : 'px-4',
                          isActive && 'bg-primary/10 text-primary hover:bg-primary/20'
                        )}
                      >
                        <item.icon className="h-4 w-4" />
                        {!collapsed && <span className="ml-2">{item.name}</span>}
                      </Button>
                    </Link>
                  );
                })}
              </div>
              {index < navigationItems.length - 1 && (
                <Separator className="mt-4" />
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}