"use client"

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { 
  LayoutDashboard, 
  FileText, 
  Settings, 
  Users, 
  Bell, 
  Plus,
  Search,
  Filter,
  ChevronLeft,
  ChevronRight,
  Home,
  Database,
  Layers,
  Zap,
  BarChart3,
  Globe,
  Code
} from 'lucide-react'
import { cn } from '@/lib/utils'

interface AdminSidebarProps {
  currentView: string
  onViewChange: (view: string) => void
  className?: string
}

export function AdminSidebar({ currentView, onViewChange, className }: AdminSidebarProps) {
  const [isCollapsed, setIsCollapsed] = useState(false)

  const navigationItems = [
    {
      id: 'dashboard',
      label: 'Dashboard',
      icon: LayoutDashboard,
      description: 'Overview & Analytics',
      badge: null
    },
    {
      id: 'templates',
      label: 'Templates',
      icon: FileText,
      description: 'Manage Templates',
      badge: null
    },
    {
      id: 'features',
      label: 'Features',
      icon: Layers,
      description: 'Feature Management',
      badge: null
    },
    {
      id: 'ai-features',
      label: 'AI Features',
      icon: Zap,
      description: 'AI-Powered Creation',
      badge: 'NEW'
    },
    {
      id: 'users',
      label: 'Users',
      icon: Users,
      description: 'User Management',
      badge: null
    },
    {
      id: 'notifications',
      label: 'Notifications',
      icon: Bell,
      description: 'System Alerts',
      badge: '3'
    },
    {
      id: 'analytics',
      label: 'Analytics',
      icon: BarChart3,
      description: 'Usage Statistics',
      badge: null
    },
    {
      id: 'settings',
      label: 'Settings',
      icon: Settings,
      description: 'System Configuration',
      badge: null
    }
  ]

  const quickActions = [
    {
      id: 'create-template',
      label: 'New Template',
      icon: Plus,
      action: () => onViewChange('create-template')
    },
    {
      id: 'add-feature',
      label: 'Add Feature',
      icon: Layers,
      action: () => onViewChange('add-feature')
    },
    {
      id: 'ai-analyze',
      label: 'AI Analyze',
      icon: Zap,
      action: () => onViewChange('ai-analyze')
    }
  ]

  return (
    <div className={cn(
      "bg-gray-900/50 border-r border-white/10 flex flex-col transition-all duration-300",
      isCollapsed ? "w-16" : "w-64",
      className
    )}>
      {/* Header */}
      <div className="p-4 border-b border-white/10">
        <div className="flex items-center justify-between">
          {!isCollapsed && (
            <div>
              <h2 className="text-white font-semibold text-lg">Admin Panel</h2>
              <p className="text-white/60 text-sm">CodeNuk Management</p>
            </div>
          )}
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setIsCollapsed(!isCollapsed)}
            className="text-white/60 hover:text-white hover:bg-white/10"
          >
            {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
          </Button>
        </div>
      </div>

      {/* Navigation */}
      <div className="flex-1 overflow-y-auto">
        <div className="p-2">
          {!isCollapsed && (
            <div className="text-white/40 text-xs font-medium uppercase tracking-wider px-3 py-2">
              Navigation
            </div>
          )}
          <nav className="space-y-1">
            {navigationItems.map((item) => {
              const Icon = item.icon
              const isActive = currentView === item.id
              
              return (
                <Button
                  key={item.id}
                  variant="ghost"
                  onClick={() => onViewChange(item.id)}
                  className={cn(
                    "w-full justify-start text-left transition-colors",
                    isActive 
                      ? "bg-orange-500/20 text-orange-400 border-r-2 border-orange-400" 
                      : "text-white/70 hover:text-white hover:bg-white/10",
                    isCollapsed ? "px-2" : "px-3"
                  )}
                >
                  <Icon className={cn("h-4 w-4", isCollapsed ? "" : "mr-3")} />
                  {!isCollapsed && (
                    <>
                      <div className="flex-1">
                        <div className="font-medium">{item.label}</div>
                        <div className="text-xs text-white/50">{item.description}</div>
                      </div>
                      {item.badge && (
                        <Badge 
                          variant="outline" 
                          className={cn(
                            "text-xs",
                            item.badge === 'NEW' 
                              ? "bg-emerald-500/20 text-emerald-300 border-emerald-500/30"
                              : "bg-orange-500/20 text-orange-300 border-orange-500/30"
                          )}
                        >
                          {item.badge}
                        </Badge>
                      )}
                    </>
                  )}
                </Button>
              )
            })}
          </nav>
        </div>

        {/* Quick Actions */}
        {!isCollapsed && (
          <div className="p-2 border-t border-white/10 mt-4">
            <div className="text-white/40 text-xs font-medium uppercase tracking-wider px-3 py-2">
              Quick Actions
            </div>
            <div className="space-y-1">
              {quickActions.map((action) => {
                const Icon = action.icon
                return (
                  <Button
                    key={action.id}
                    variant="outline"
                    size="sm"
                    onClick={action.action}
                    className="w-full justify-start border-white/20 text-white/70 hover:text-white hover:bg-white/10"
                  >
                    <Icon className="h-4 w-4 mr-2" />
                    {action.label}
                  </Button>
                )
              })}
            </div>
          </div>
        )}
      </div>

      {/* Footer */}
      <div className="p-4 border-t border-white/10">
        {!isCollapsed ? (
          <div className="space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="text-white/60">System Status</span>
              <div className="flex items-center gap-1">
                <div className="w-2 h-2 bg-emerald-400 rounded-full"></div>
                <span className="text-emerald-400 text-xs">Online</span>
              </div>
            </div>
            <div className="text-xs text-white/40">
              Backend: Connected • DB: Healthy
            </div>
          </div>
        ) : (
          <div className="flex justify-center">
            <div className="w-2 h-2 bg-emerald-400 rounded-full"></div>
          </div>
        )}
      </div>
    </div>
  )
}
