'use client'

import { useEffect, useMemo, useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import {
  LayoutDashboard,
  Users,
  Building2,
  Settings,
  ClipboardList,
  FolderKanban,
  MapPin,
  CalendarCheck,
  UserCheck,
  UserCog,
  FileText,
  Ruler,
  Receipt,
  Package,
  Warehouse,
  Percent,
  Handshake,
  ShoppingCart,
  ClipboardCheck,
  NotebookPen,
  Wallet,
  LineChart,
  Truck,
  Banknote,
  X,
  Files,
  Bell,
  BarChart3,
  AlertTriangle,
  ArrowLeftRight,
  ChevronDown,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { useAuth } from '@/contexts/AuthContext'
import { useTour } from '@/contexts/TourContext'

type NavLink = {
  to: string
  icon: typeof LayoutDashboard
  key: string
  permission: string
}

type NavGroup = {
  id: string
  labelKey: string
  items: NavLink[]
}

const navGroups: NavGroup[] = [
  {
    id: 'overview',
    labelKey: 'overview',
    items: [
      { to: '/', icon: LayoutDashboard, key: 'dashboard', permission: 'dashboard.view' },
      { to: '/reports', icon: BarChart3, key: 'reports', permission: 'dashboard.view' },
      { to: '/notifications', icon: Bell, key: 'notifications', permission: 'notifications.view' },
    ],
  },
  {
    id: 'operations',
    labelKey: 'operations',
    items: [
      { to: '/projects', icon: FolderKanban, key: 'projects', permission: 'projects.view' },
      { to: '/sites', icon: MapPin, key: 'sites', permission: 'sites.view' },
      { to: '/assignments', icon: CalendarCheck, key: 'assignments', permission: 'assignments.view' },
      { to: '/attendances', icon: UserCheck, key: 'attendances', permission: 'attendances.view' },
    ],
  },
  {
    id: 'commercial',
    labelKey: 'commercial',
    items: [
      { to: '/contracts', icon: FileText, key: 'contracts', permission: 'contracts.view' },
      { to: '/measurement-books', icon: Ruler, key: 'measurementBooks', permission: 'mb.view' },
      { to: '/ipc', icon: Receipt, key: 'ipc', permission: 'ipc.view' },
      { to: '/offers', icon: Handshake, key: 'offers', permission: 'offers.view' },
      { to: '/orders', icon: ShoppingCart, key: 'orders', permission: 'orders.view' },
    ],
  },
  {
    id: 'field',
    labelKey: 'field',
    items: [
      { to: '/daily-ops', icon: NotebookPen, key: 'dailyOps', permission: 'daily_ops.view' },
      { to: '/inspections', icon: ClipboardCheck, key: 'inspections', permission: 'inspections.view' },
      { to: '/issues', icon: AlertTriangle, key: 'issues', permission: 'inspections.view' },
    ],
  },
  {
    id: 'finance',
    labelKey: 'finance',
    items: [
      { to: '/finance/dashboard', icon: LineChart, key: 'financeDashboard', permission: 'finance.view' },
      { to: '/finance/invoices', icon: Wallet, key: 'invoices', permission: 'finance.view' },
      { to: '/finance/purchases', icon: Receipt, key: 'purchases', permission: 'purchasing.view' },
      { to: '/payroll', icon: Banknote, key: 'payroll', permission: 'payroll.view' },
      { to: '/tax/rules', icon: Percent, key: 'taxRules', permission: 'tax.view' },
    ],
  },
  {
    id: 'supply',
    labelKey: 'supply',
    items: [
      { to: '/inventory/items', icon: Package, key: 'inventoryItems', permission: 'inventory.view' },
      { to: '/inventory/warehouses', icon: Warehouse, key: 'warehouses', permission: 'inventory.view' },
      {
        to: '/inventory/movements',
        icon: ArrowLeftRight,
        key: 'stockMovements',
        permission: 'inventory.view',
      },
      { to: '/assets', icon: Truck, key: 'assets', permission: 'assets.view' },
    ],
  },
  {
    id: 'masterData',
    labelKey: 'masterData',
    items: [
      { to: '/partners', icon: Building2, key: 'partners', permission: 'partners.view' },
      { to: '/employees', icon: Users, key: 'employees', permission: 'employees.view' },
      { to: '/documents', icon: Files, key: 'documents', permission: 'documents.view' },
    ],
  },
  {
    id: 'admin',
    labelKey: 'admin',
    items: [
      { to: '/users', icon: UserCog, key: 'users', permission: 'users.view' },
      { to: '/settings', icon: Settings, key: 'settings', permission: 'settings.view' },
      { to: '/audit-logs', icon: ClipboardList, key: 'audit', permission: 'audit.view' },
    ],
  },
]

function linkIsActive(pathname: string, to: string) {
  return to === '/' ? pathname === '/' : pathname === to || pathname.startsWith(`${to}/`)
}

export function Sidebar({ mobile = false, onClose }: { mobile?: boolean; onClose?: () => void }) {
  const { t } = useTranslation()
  const pathname = usePathname()
  const { user } = useAuth()
  const { step, isOpen: tourOpen } = useTour()
  const permissions = user?.permissions ?? []
  const isAdmin = user?.roles?.includes('admin')

  const visibleGroups = useMemo(
    () =>
      navGroups
        .map((group) => ({
          ...group,
          items: group.items.filter((l) => isAdmin || permissions.includes(l.permission)),
        }))
        .filter((group) => group.items.length > 0),
    [isAdmin, permissions],
  )

  const activeGroupId = useMemo(() => {
    for (const group of visibleGroups) {
      if (group.items.some((item) => linkIsActive(pathname, item.to))) return group.id
    }
    return visibleGroups[0]?.id
  }, [pathname, visibleGroups])

  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({})

  useEffect(() => {
    if (!activeGroupId) return
    setOpenGroups((prev) => ({ ...prev, [activeGroupId]: true }))
  }, [activeGroupId])

  useEffect(() => {
    if (!tourOpen || !step?.target) return
    const match = step.target.match(/nav-group-([a-zA-Z0-9_-]+)/)
    if (match?.[1]) {
      setOpenGroups((prev) => ({ ...prev, [match[1]]: true }))
    }
  }, [tourOpen, step])

  const toggleGroup = (id: string) => {
    setOpenGroups((prev) => ({ ...prev, [id]: !prev[id] }))
  }

  return (
    <aside
      className={cn(
        'premium-card relative m-3 flex h-[calc(100vh-1.5rem)] w-64 flex-col overflow-hidden rounded-3xl text-[var(--sidebar-text)]',
        mobile && 'fixed inset-y-0 left-0 z-50 shadow-2xl',
      )}
      style={{
        background: 'linear-gradient(165deg, rgba(19,55,39,0.96) 0%, rgba(7,19,13,0.98) 70%)',
        boxShadow: mobile ? undefined : 'var(--shadow-lg)',
      }}
    >
      <div
        className="float-blob pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full opacity-20 blur-3xl"
        style={{ background: 'radial-gradient(circle, #d4a054, transparent 70%)' }}
      />
      <div
        className="float-blob-slow pointer-events-none absolute -bottom-24 -left-20 h-64 w-64 rounded-full opacity-15 blur-3xl"
        style={{ background: 'radial-gradient(circle, #3d8b6e, transparent 70%)' }}
      />

      <div className="relative z-10 flex items-center justify-between px-5 py-6" data-tour="sidebar-brand">
        <div>
          <div className="text-xl font-bold tracking-tight text-white">{t('app.name')}</div>
          <div className="mt-1 text-xs uppercase tracking-[0.22em] text-brand-300/80">
            {t('app.subtitle')}
          </div>
        </div>
        {mobile && onClose && (
          <button type="button" onClick={onClose} className="rounded-lg p-1 hover:bg-white/10">
            <X size={20} />
          </button>
        )}
      </div>

      <nav className="relative z-10 flex-1 space-y-2 overflow-y-auto px-3 pb-3" data-tour="sidebar-nav">
        {visibleGroups.map((group) => {
          const isOpen = openGroups[group.id] ?? group.id === activeGroupId
          const hasActive = group.items.some((item) => linkIsActive(pathname, item.to))

          return (
            <div key={group.id} className="space-y-1">
              <button
                type="button"
                data-tour={`nav-group-${group.id}`}
                onClick={() => toggleGroup(group.id)}
                className={cn(
                  'flex w-full items-center justify-between rounded-xl px-3 py-2 text-left transition-colors',
                  hasActive
                    ? 'bg-white/8 text-brand-200'
                    : 'text-brand-300/70 hover:bg-white/6 hover:text-brand-100',
                )}
              >
                <span className="text-[10px] font-bold uppercase tracking-[0.18em]">
                  {t(`nav.groups.${group.labelKey}`)}
                </span>
                <ChevronDown
                  size={14}
                  className={cn('shrink-0 transition-transform duration-200', isOpen && 'rotate-180')}
                />
              </button>

              {isOpen && (
                <div className="space-y-1 pb-1">
                  {group.items.map(({ to, icon: Icon, key }) => {
                    const isActive = linkIsActive(pathname, to)
                    return (
                      <Link
                        key={to}
                        href={to}
                        onClick={onClose}
                        className={cn(
                          'shine-hover group flex items-center gap-3 rounded-2xl px-3 py-2.5 text-sm font-semibold transition-all duration-200',
                          isActive
                            ? 'translate-x-0.5 border border-brand-300/20 bg-gradient-to-b from-brand-400 to-brand-700 text-white depth-glow'
                            : 'text-brand-100/75 hover:translate-x-0.5 hover:bg-white/8 hover:text-white',
                        )}
                      >
                        <span className="premium-chip flex h-8 w-8 shrink-0 items-center justify-center rounded-xl">
                          <Icon size={17} className="icon-pop group-hover:scale-110" />
                        </span>
                        <span className="leading-snug">{t(`nav.${key}`)}</span>
                      </Link>
                    )
                  })}
                </div>
              )}
            </div>
          )
        })}
      </nav>

      <div className="relative z-10 m-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-xs text-brand-200">
        <div className="font-semibold text-white">{t('layout.brandTagline')}</div>
        <div className="mt-1 text-brand-300/75">{t('layout.secureCrm')}</div>
      </div>
    </aside>
  )
}