'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { cn } from '@/lib/utils'
import { LayoutDashboard, Package, ClipboardList, AlertTriangle, Truck, Settings, Activity, FileText, LogOut, ChevronLeft, ChevronRight, Gauge, CreditCard, Boxes, Users, Store, PackageCheck } from 'lucide-react'
import { useBusiness } from '@/components/providers/BusinessProvider'
import { getMe } from '@/lib/api/agent'
import { createClient } from '@/lib/supabase/client'
import { Button } from '@/components/ui/Button'

const navigation = [
  { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
  { name: 'Orders', href: '/dashboard/orders', icon: Package },
  { name: 'Inventory', href: '/dashboard/inventory', icon: AlertTriangle },
  { name: 'Suppliers', href: '/dashboard/suppliers', icon: Truck },
]

const keeperNavigation = [
  { name: 'Stock Operations', href: '/dashboard/keeper', icon: Package },
  { name: 'Receiving', href: '/dashboard/keeper/receiving', icon: PackageCheck },
  { name: 'Movements', href: '/dashboard/keeper/movements', icon: Activity },
  { name: 'Deliveries', href: '/dashboard/keeper/deliveries', icon: Truck },
]

const adminNavigation = [
  { name: 'Approvals', href: '/dashboard/approvals', icon: ClipboardList },
  { name: 'Catalog', href: '/dashboard/catalog', icon: Boxes },
  { name: 'Agent Ops', href: '/dashboard/agent', icon: Activity },
  { name: 'Operations', href: '/dashboard/operations', icon: Gauge },
  { name: 'Payments', href: '/dashboard/payments', icon: CreditCard },
  { name: 'Audit Log', href: '/dashboard/audit', icon: FileText },
]

const adminManagement = [
  { name: 'Storefront', href: '/dashboard/store', icon: Store },
  { name: 'Store Settings', href: '/dashboard/settings', icon: Settings },
  { name: 'Team', href: '/dashboard/team', icon: Users },
]

export function Sidebar() {
  const pathname = usePathname()
  const router = useRouter()
  const { business, setBusiness } = useBusiness()
  const [collapsed, setCollapsed] = useState(false)
  const [isAdmin, setIsAdmin] = useState(false)
  const [me, setMe] = useState<{ full_name: string | null; email: string | null; role: 'admin' | 'stock_keeper' | null; has_stock_keeper?: boolean } | null>(null)

  const showStockOps = me
    ? me.role === 'stock_keeper' || (me.role === 'admin' && me.has_stock_keeper !== true)
    : true

  useEffect(() => {
    getMe().then(res => {
      if (res.success) {
        if (res.data.role === 'admin') setIsAdmin(true)
        setMe({ full_name: res.data.full_name, email: res.data.email, role: res.data.role, has_stock_keeper: res.data.has_stock_keeper })
      }
    }).catch(() => {})
  }, [])

  async function handleSignOut() {
    try {
      await createClient()?.auth.signOut()
    } catch {
      /* session already gone */
    }
    setBusiness(null)
    router.push('/login')
    router.refresh()
  }

  const renderNav = (items: typeof navigation) =>
    items.map(item => {
      const isActive = pathname === item.href || pathname.startsWith(item.href + '/')
      const Icon = item.icon
      return (
        <Link
          key={item.name}
          href={item.href}
          className={cn(
            'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
            isActive
              ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
              : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white',
            collapsed && 'justify-center px-2'
          )}
          aria-current={isActive ? 'page' : undefined}
        >
          <Icon className="h-5 w-5 flex-shrink-0" aria-hidden="true" />
          {!collapsed && <span>{item.name}</span>}
        </Link>
      )
    })

  return (
    <aside
      className={cn(
        'fixed left-0 top-0 z-40 h-full flex flex-col border-r border-gray-200 bg-white transition-all duration-200 dark:border-gray-700 dark:bg-gray-900',
        collapsed ? 'w-16' : 'w-64'
      )}
      aria-label="Main navigation"
    >
      <div className="flex h-16 flex-shrink-0 items-center justify-between border-b border-gray-200 px-4 dark:border-gray-700">
        {!collapsed && (
          <Link href="/dashboard" className="flex items-center gap-2 font-bold text-xl text-indigo-600 dark:text-indigo-400">
            <Activity className="h-7 w-7" />
            <span>IMBARAGA</span>
          </Link>
        )}
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setCollapsed(!collapsed)}
          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
          className="h-8 w-8 p-0"
        >
          {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
        </Button>
      </div>

      <nav className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-4 space-y-1" role="navigation" aria-label="Dashboard">
        {renderNav(navigation)}
        {showStockOps && (
          <>
            {!collapsed && (
              <p className="px-3 pt-4 pb-1 text-xs font-semibold uppercase tracking-wide text-gray-400">
                Stock Ops
              </p>
            )}
            {renderNav(keeperNavigation)}
          </>
        )}
        {isAdmin && (
          <>
            {!collapsed && (
              <p className="px-3 pt-4 pb-1 text-xs font-semibold uppercase tracking-wide text-gray-400">
                Operations
              </p>
            )}
            {renderNav(adminNavigation)}
            {!collapsed && (
              <p className="px-3 pt-4 pb-1 text-xs font-semibold uppercase tracking-wide text-gray-400">
                Management
              </p>
            )}
            {renderNav(adminManagement)}
          </>
        )}
      </nav>

      <div className="flex-shrink-0 border-t border-gray-200 p-4 dark:border-gray-700">
        {!collapsed && me && (
          <div className="mb-3 px-1">
            <p className="truncate text-sm font-semibold text-gray-900 dark:text-white">
              {me.full_name || me.email || 'Signed in'}
            </p>
            {me.email && (
              <p className="truncate text-xs text-gray-500 dark:text-gray-400">{me.email}</p>
            )}
            <span
              className={cn(
                'mt-1 inline-block rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
                me.role === 'admin'
                  ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300'
                  : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300'
              )}
            >
              {me.role === 'admin' ? 'Admin' : 'Stock keeper'}
            </span>
          </div>
        )}
        {!collapsed && business && (
          <div className="mb-4 p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
            <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Business</p>
            <p className="text-sm font-semibold text-gray-900 dark:text-white truncate">{business.businessName}</p>
          </div>
        )}
        <Button
          variant="ghost"
          className={cn('w-full justify-start gap-2', collapsed && 'justify-center px-2')}
          onClick={handleSignOut}
        >
          <LogOut className="h-4 w-4" />
          {!collapsed && <span>Sign out</span>}
        </Button>
      </div>
    </aside>
  )
}