'use client'

import Link from 'next/link'
import Image from 'next/image'
import { usePathname } from 'next/navigation'
import { useStore } from '@/lib/store'
import { 
  Eye, 
  TrendingUp, 
  Settings,
  ChevronLeft,
  ChevronRight,
  LogOut,
  Crown,
  Zap,
  Shield,
  Crosshair,
  Menu,
  X,
  Tag,
  Target,
  Coins,
  Briefcase,
  MessageSquare,
} from 'lucide-react'
import { useState, useEffect } from 'react'
import clsx from 'clsx'

interface SidebarProps {
  collapsed?: boolean
  onCollapsedChange?: (collapsed: boolean) => void
}

export function Sidebar({ collapsed: controlledCollapsed, onCollapsedChange }: SidebarProps) {
  const pathname = usePathname()
  const { user, logout, subscription, domains } = useStore()
  
  const [internalCollapsed, setInternalCollapsed] = useState(false)
  const [mobileOpen, setMobileOpen] = useState(false)
  
  const collapsed = controlledCollapsed ?? internalCollapsed
  const setCollapsed = onCollapsedChange ?? setInternalCollapsed
  
  useEffect(() => {
    const saved = localStorage.getItem('sidebar-collapsed')
    if (saved) {
      setCollapsed(saved === 'true')
    }
  }, [])

  useEffect(() => {
    setMobileOpen(false)
  }, [pathname])
  
  const toggleCollapsed = () => {
    const newState = !collapsed
    setCollapsed(newState)
    localStorage.setItem('sidebar-collapsed', String(newState))
  }

  const tierName = subscription?.tier_name || subscription?.tier || 'Scout'
  const TierIcon = tierName === 'Tycoon' ? Crown : tierName === 'Trader' ? TrendingUp : Zap

  const availableCount = domains?.filter(d => d.is_available).length || 0
  const isTycoon = tierName.toLowerCase() === 'tycoon'

  // SECTION 1: Discover - Hunt is the main discovery hub
  const discoverItems = [
    { 
      href: '/terminal/hunt', 
      label: 'HUNT', 
      icon: Crosshair,
      badge: null,
    },
    { 
      href: '/terminal/intel', 
      label: 'INTEL', 
      icon: TrendingUp,
      badge: null,
    },
  ]

  // SECTION 2: Manage - Your own assets and tools
  const manageItems: Array<{
    href: string
    label: string
    icon: any
    badge: number | null
    tycoonOnly?: boolean
  }> = [
    { 
      href: '/terminal/watchlist', 
      label: 'WATCHLIST', 
      icon: Eye,
      badge: availableCount || null,
    },
    { 
      href: '/terminal/portfolio', 
      label: 'PORTFOLIO', 
      icon: Briefcase,
      badge: null,
    },
    {
      href: '/terminal/inbox',
      label: 'INBOX',
      icon: MessageSquare,
      badge: null,
    },
    { 
      href: '/terminal/sniper', 
      label: 'SNIPER', 
      icon: Target,
      badge: null,
    },
  ]

  // SECTION 3: Monetize - Passive income + For Sale
  const monetizeItems: Array<{
    href: string
    label: string
    icon: any
    badge: number | null
    isNew?: boolean
  }> = [
    { 
      href: '/terminal/yield', 
      label: 'YIELD', 
      icon: Coins,
      badge: null,
      isNew: true,
    },
    { 
      href: '/terminal/listing', 
      label: 'FOR SALE', 
      icon: Tag,
      badge: null,
    },
  ]

  const bottomItems = [
    { href: '/terminal/settings', label: 'Settings', icon: Settings },
  ]

  const isActive = (href: string) => {
    if (href === '/terminal/hunt') return pathname === '/terminal/hunt' || pathname === '/terminal' || pathname === '/terminal/dashboard'
    return pathname.startsWith(href)
  }

  const SidebarContent = () => (
    <>
      {/* Logo Section */}
      <div className={clsx(
        "relative h-20 flex items-center border-b border-white/[0.08]",
        collapsed ? "justify-center px-2" : "px-6"
      )}>
        <Link href="/" className="flex items-center gap-4 group w-full">
          <div className={clsx(
            "relative flex items-center justify-center transition-all duration-300",
            collapsed ? "w-8 h-8" : "w-10 h-10"
          )}>
            <div className="absolute inset-0 bg-accent/20 blur-lg rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
            <Image
              src="/pounce-puma.png"
              alt="pounce"
              width={40}
              height={40}
              className="relative object-contain"
            />
          </div>
          {!collapsed && (
            <div className="flex flex-col">
              <span 
                className="text-lg font-bold tracking-[0.05em] text-white"
                style={{ fontFamily: 'var(--font-display), Georgia, serif' }}
              >
                POUNCE
              </span>
              <span className="text-[10px] text-white/30 tracking-[0.2em] uppercase font-mono">
                Terminal
              </span>
            </div>
          )}
        </Link>
      </div>

      {/* Main Navigation */}
      <nav className="flex-1 py-8 px-4 overflow-y-auto scrollbar-hide space-y-8">
        {/* SECTION 1: Discover */}
        <div>
          {!collapsed && (
            <div className="flex items-center gap-2 mb-4 px-2">
              <div className="w-1 h-1 bg-accent rounded-full" />
              <p className="text-[10px] font-mono font-bold text-white/40 uppercase tracking-widest">
                Discover
              </p>
            </div>
          )}
          
          <div className="space-y-1">
            {discoverItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                onClick={() => setMobileOpen(false)}
                className={clsx(
                  "group relative flex items-center gap-3 px-3 py-2 transition-all duration-200",
                  isActive(item.href)
                    ? "text-white bg-white/[0.03] border-l-2 border-accent"
                    : "text-white/50 hover:text-white hover:bg-white/[0.02] border-l-2 border-transparent"
                )}
                title={collapsed ? item.label : undefined}
              >
                <item.icon className={clsx(
                  "w-4 h-4 transition-all duration-300",
                  isActive(item.href) ? "text-accent" : "text-white/40 group-hover:text-white"
                )} />
                {!collapsed && (
                  <span className={clsx(
                    "text-xs font-mono tracking-wide uppercase transition-colors",
                    isActive(item.href) ? "text-white" : "text-white/50 group-hover:text-white"
                  )}>
                    {item.label}
                  </span>
                )}
              </Link>
            ))}
          </div>
        </div>

        {/* SECTION 2: Manage */}
        <div>
          {!collapsed && (
            <div className="flex items-center gap-2 mb-4 px-2">
              <div className="w-1 h-1 bg-accent rounded-full" />
              <p className="text-[10px] font-mono font-bold text-white/40 uppercase tracking-widest">
                Manage
              </p>
            </div>
          )}
          
          <div className="space-y-1">
            {manageItems.map((item) => {
              const isDisabled = item.tycoonOnly && !isTycoon
              const ItemWrapper = (isDisabled ? 'div' : Link) as any
              
              return (
                <ItemWrapper
                  key={item.href}
                  {...(!isDisabled && { href: item.href })}
                  onClick={() => !isDisabled && setMobileOpen(false)}
                  className={clsx(
                    "group relative flex items-center gap-3 px-3 py-2 transition-all duration-200",
                    isDisabled
                      ? "opacity-40 cursor-not-allowed border-l-2 border-transparent"
                      : isActive(item.href)
                        ? "text-white bg-white/[0.03] border-l-2 border-accent"
                        : "text-white/50 hover:text-white hover:bg-white/[0.02] border-l-2 border-transparent"
                  )}
                  title={isDisabled ? "Upgrade to Tycoon to unlock" : collapsed ? item.label : undefined}
                >
                  <div className="relative">
                    <item.icon className={clsx(
                      "w-4 h-4 transition-all duration-300",
                      isDisabled ? "text-white/20" : isActive(item.href) ? "text-accent" : "text-white/40 group-hover:text-white"
                    )} />
                    {item.badge && typeof item.badge === 'number' && !isDisabled && (
                      <span className="absolute -top-1 -right-1 w-1.5 h-1.5 bg-accent rounded-full animate-pulse" />
                    )}
                  </div>
                  {!collapsed && (
                    <span className={clsx(
                      "text-xs font-mono tracking-wide uppercase transition-colors flex-1",
                      isDisabled ? "text-white/30" : isActive(item.href) ? "text-white" : "text-white/50 group-hover:text-white"
                    )}>
                      {item.label}
                    </span>
                  )}
                  {isDisabled && !collapsed && <Crown className="w-3 h-3 text-amber-500/40" />}
                </ItemWrapper>
              )
            })}
          </div>
        </div>

        {/* SECTION 3: Monetize */}
        <div>
          {!collapsed && (
            <div className="flex items-center gap-2 mb-4 px-2">
              <div className="w-1 h-1 bg-accent rounded-full" />
              <p className="text-[10px] font-mono font-bold text-white/40 uppercase tracking-widest">
                Monetize
              </p>
            </div>
          )}
          
          <div className="space-y-1">
            {monetizeItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                onClick={() => setMobileOpen(false)}
                className={clsx(
                  "group relative flex items-center gap-3 px-3 py-2 transition-all duration-200",
                  isActive(item.href)
                    ? "text-white bg-white/[0.03] border-l-2 border-accent"
                    : "text-white/50 hover:text-white hover:bg-white/[0.02] border-l-2 border-transparent"
                )}
                title={collapsed ? item.label : undefined}
              >
                <div className="relative">
                  <item.icon className={clsx(
                    "w-4 h-4 transition-all duration-300",
                    isActive(item.href) 
                      ? "text-accent" 
                      : "text-white/40 group-hover:text-white"
                  )} />
                </div>
                {!collapsed && (
                  <span className={clsx(
                    "text-xs font-mono tracking-wide uppercase transition-colors flex-1",
                    isActive(item.href) ? "text-white" : "text-white/50 group-hover:text-white"
                  )}>
                    {item.label}
                  </span>
                )}
                {item.isNew && !collapsed && (
                  <span className="px-1.5 py-0.5 text-[8px] font-mono font-bold uppercase tracking-wider bg-accent/20 text-accent border border-accent/20">
                    New
                  </span>
                )}
              </Link>
            ))}
          </div>
        </div>
      </nav>

      {/* Bottom Section */}
      <div className="border-t border-white/[0.08] p-4 space-y-1 bg-[#020202]">
        {/* Admin Link */}
        {user?.is_admin && (
          <Link
            href="/admin"
            onClick={() => setMobileOpen(false)}
            className="group flex items-center gap-3 px-3 py-2 text-amber-500/60 hover:text-amber-400 transition-all"
            title={collapsed ? "Admin Panel" : undefined}
          >
            <Shield className="w-4 h-4" />
            {!collapsed && <span className="text-xs font-mono tracking-wide uppercase">Admin</span>}
          </Link>
        )}
        
        {/* Settings */}
        {bottomItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            onClick={() => setMobileOpen(false)}
            className={clsx(
              "group flex items-center gap-3 px-3 py-2 transition-all",
              isActive(item.href)
                ? "text-white"
                : "text-white/40 hover:text-white"
            )}
            title={collapsed ? item.label : undefined}
          >
            <item.icon className="w-4 h-4" />
            {!collapsed && <span className="text-xs font-mono tracking-wide uppercase">{item.label}</span>}
          </Link>
        ))}

        {/* User Card */}
        <div className={clsx(
          "mt-6 border border-white/[0.08] bg-white/[0.02]",
          collapsed ? "p-2 border-none bg-transparent" : "p-4"
        )}>
          {collapsed ? (
            <div className="flex justify-center">
              <div className="w-8 h-8 border border-accent/20 bg-accent/5 flex items-center justify-center">
                <TierIcon className="w-4 h-4 text-accent" />
              </div>
            </div>
          ) : (
            <>
              <div className="flex items-center gap-3 mb-4">
                <div className="w-8 h-8 border border-accent/20 bg-accent/5 flex items-center justify-center shrink-0">
                  <TierIcon className="w-4 h-4 text-accent" />
                </div>
                <div className="flex-1 min-w-0 overflow-hidden">
                  <p className="text-xs font-bold text-white truncate font-mono uppercase tracking-wider">
                    {user?.name || user?.email?.split('@')[0]}
                  </p>
                  <div className="flex items-center gap-1.5 mt-0.5">
                    <span className={clsx(
                      "text-[10px] uppercase tracking-widest font-mono",
                      tierName === 'Tycoon' ? "text-amber-400" : 
                      tierName === 'Trader' ? "text-accent" : 
                      "text-white/40"
                    )}>
                      {tierName}
                    </span>
                  </div>
                </div>
              </div>
              
              <div className="space-y-2">
                <div className="flex items-center justify-between text-[10px] font-mono uppercase tracking-wider text-white/30">
                  <span>Usage</span>
                  <span>{subscription?.domains_used || 0}/{subscription?.domain_limit || 5}</span>
                </div>
                <div className="h-px bg-white/10 w-full">
                  <div 
                    className="h-full bg-accent transition-all duration-500 relative"
                    style={{ 
                      width: `${Math.min(((subscription?.domains_used || 0) / (subscription?.domain_limit || 5)) * 100, 100)}%` 
                    }}
                  >
                    <div className="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-1 bg-accent shadow-[0_0_5px_rgba(16,185,129,0.8)]" />
                  </div>
                </div>
              </div>
              
              {tierName === 'Scout' && (
                <Link 
                  href="/pricing" 
                  className="mt-4 flex items-center justify-center gap-2 w-full py-2 
                             border border-accent/20 bg-accent/5 text-accent text-[10px] font-bold uppercase tracking-[0.2em]
                             hover:bg-accent hover:text-black transition-all"
                >
                  Upgrade
                </Link>
              )}
            </>
          )}
        </div>

        {/* Logout */}
        <button
          onClick={() => {
            logout()
            setMobileOpen(false)
          }}
          className="w-full flex items-center gap-3 px-3 py-2 text-white/30 hover:text-white transition-all group"
          title={collapsed ? "Sign out" : undefined}
        >
          <LogOut className="w-4 h-4 group-hover:text-red-400 transition-colors" />
          {!collapsed && <span className="text-xs font-mono tracking-wide uppercase group-hover:text-red-400 transition-colors">Sign out</span>}
        </button>
      </div>

      {/* Collapse Toggle */}
      <button
        onClick={toggleCollapsed}
        className={clsx(
          "hidden lg:flex absolute -right-3 top-24 w-6 h-6 bg-[#020202] border border-white/10",
          "items-center justify-center text-white/40 hover:text-white",
          "hover:border-white/30 transition-all z-50"
        )}
      >
        {collapsed ? <ChevronRight className="w-3 h-3" /> : <ChevronLeft className="w-3 h-3" />}
      </button>
    </>
  )

  return (
    <>
      {/* Mobile Menu Button */}
      <button
        onClick={() => setMobileOpen(true)}
        className="lg:hidden fixed top-4 left-4 z-50 w-10 h-10 bg-[#020202] border border-white/10
                   flex items-center justify-center text-white/60 hover:text-white
                   transition-all shadow-lg"
      >
        <Menu className="w-5 h-5" />
      </button>

      {/* Mobile Overlay */}
      {mobileOpen && (
        <div 
          className="lg:hidden fixed inset-0 z-40 bg-black/90 backdrop-blur-sm"
          onClick={() => setMobileOpen(false)}
        />
      )}

      {/* Mobile Sidebar */}
      <aside 
        className={clsx(
          "lg:hidden fixed left-0 top-0 bottom-0 z-50 w-[280px] flex flex-col",
          "bg-[#020202] border-r border-white/[0.08]",
          "transition-transform duration-300 ease-out",
          mobileOpen ? "translate-x-0" : "-translate-x-full"
        )}
      >
        <button
          onClick={() => setMobileOpen(false)}
          className="absolute top-5 right-4 w-8 h-8 flex items-center justify-center 
                     text-white/40 hover:text-white transition-colors"
        >
          <X className="w-5 h-5" />
        </button>
        <SidebarContent />
      </aside>

      {/* Desktop Sidebar */}
      <aside 
        className={clsx(
          "hidden lg:flex fixed left-0 top-0 bottom-0 z-40 flex-col",
          "bg-[#020202] backdrop-blur-xl",
          "border-r border-white/[0.08]",
          "transition-all duration-300 ease-out",
          collapsed ? "w-[72px]" : "w-[240px]"
        )}
      >
        <SidebarContent />
      </aside>
    </>
  )
}