import { useState, useEffect } from 'react'
import { NavLink, Outlet, useLocation } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import { api } from '@/lib/api'
import { logout } from '@/lib/auth'
import { cn } from '@/lib/utils'
import {
  LayoutDashboard, Package, FolderTree, Ruler, Tag,
  Users, Warehouse, Store as StoreIcon, LogOut, Download, UserCog, Shield, ShieldCheck,
  Boxes, History, TruckIcon, ShoppingCart, Settings, Menu, X,
} from 'lucide-react'
import { Logo } from './Logo'
import { SuperAdminAsOrgBanner } from './SuperAdminAsOrgBanner'

interface MeResponse {
  sub: string
  name: string
  email: string
  roles: string[]
  orgId: string
}

type NavItem = { to: string; icon: typeof LayoutDashboard; label: string; end?: boolean }
type NavSection = { group: string; items: NavItem[] }

const ROLE_RU: Record<string, string> = {
  SuperAdmin: 'Супер администратор',
  Admin: 'Администратор',
  Manager: 'Менеджер',
  Cashier: 'Кассир',
  Storekeeper: 'Кладовщик',
}
const HIDDEN_ROLES = new Set(['Admin']) // org-уровневая роль показывается через Employee, не Identity

function translateRoles(roles: string[]): string {
  return roles
    .filter((r) => !HIDDEN_ROLES.has(r))
    .map((r) => ROLE_RU[r] ?? r)
    .join(', ')
}

/** Меню зависит от ролей пользователя. Кассир/Кладовщик НЕ видят
 * раздел «Настройки организации» (там Сотрудники/Роли/Склады/Кассы —
 * это admin-only). Остальные разделы фильтруются по системной роли:
 * Кассир работает на кассе и видит товары/остатки + продажи; Кладовщик
 * — приёмки + остатки. Администратор и SuperAdmin (override) видят всё.
 *
 * Источник правды для прав — серверные `[Authorize(Roles = ...)]` на
 * каждом endpoint-е; sidebar-фильтр это UX-слой чтобы не показывать
 * неработающие пункты. */
function buildNav(roles: string[]): NavSection[] {
  const isSuperAdmin = roles.includes('SuperAdmin')
  const isAdmin = roles.includes('Admin') || isSuperAdmin
  const isCashier = roles.includes('Cashier')
  const isStorekeeper = roles.includes('Storekeeper')

  const sections: NavSection[] = [
    { group: 'Главное', items: [
      { to: '/', icon: LayoutDashboard, label: 'Главная', end: true },
      { to: '/dashboard', icon: LayoutDashboard, label: 'Аналитика' },
    ]},
  ]

  // Каталог — Кассиру и Кладовщику только просмотр товаров; группы/типы цен/единицы — admin.
  if (isAdmin || isCashier || isStorekeeper) {
    const catalog: NavItem[] = [{ to: '/catalog/products', icon: Package, label: 'Товары' }]
    if (isAdmin) {
      catalog.push(
        { to: '/catalog/product-groups', icon: FolderTree, label: 'Группы' },
        { to: '/catalog/units', icon: Ruler, label: 'Ед. измерения' },
        { to: '/catalog/price-types', icon: Tag, label: 'Типы цен' },
      )
    }
    sections.push({ group: 'Каталог', items: catalog })
  }

  if (isAdmin) {
    sections.push({ group: 'Контрагенты', items: [
      { to: '/catalog/counterparties', icon: Users, label: 'Контрагенты' },
    ]})
  }

  // Остатки видят все три tenant-роли.
  if (isAdmin || isCashier || isStorekeeper) {
    sections.push({ group: 'Остатки', items: [
      { to: '/inventory/stock', icon: Boxes, label: 'Остатки' },
      ...(isAdmin || isStorekeeper ? [{ to: '/inventory/movements', icon: History, label: 'Движения' }] : []),
    ]})
  }

  // Закупки — Admin и Storekeeper.
  if (isAdmin || isStorekeeper) {
    sections.push({ group: 'Закупки', items: [
      { to: '/purchases/supplies', icon: TruckIcon, label: 'Приёмки' },
    ]})
  }

  // Продажи — Admin и Cashier.
  if (isAdmin || isCashier) {
    sections.push({ group: 'Продажи', items: [
      { to: '/sales/retail', icon: ShoppingCart, label: 'Розничные чеки' },
    ]})
  }

  if (isAdmin) {
    sections.push({ group: 'Импорт', items: [
      { to: '/admin/import/moysklad', icon: Download, label: 'МойСклад' },
    ]})
    sections.push({ group: 'Настройки организации', items: [
      { to: '/settings/organization', icon: Settings, label: 'Общие' },
      { to: '/catalog/stores', icon: Warehouse, label: 'Склады' },
      { to: '/catalog/retail-points', icon: StoreIcon, label: 'Кассы' },
      { to: '/settings/employees', icon: UserCog, label: 'Сотрудники' },
      { to: '/settings/employee-roles', icon: Shield, label: 'Роли' },
    ]})
  }

  if (isSuperAdmin) {
    sections.push({
      group: 'Супер-админ',
      items: [
        { to: '/super-admin', icon: ShieldCheck, label: 'Системная консоль', end: true },
      ],
    })
  }

  return sections
}

export function AppLayout() {
  const { data: me } = useQuery({
    queryKey: ['me'],
    queryFn: async () => (await api.get<MeResponse>('/api/me')).data,
    staleTime: 5 * 60 * 1000,
  })

  const isSuperAdmin = !!me?.roles?.includes('SuperAdmin')
  const nav = buildNav(me?.roles ?? [])
  // При активном «открыто как…» — слабая жёлтая тонировка фона tenant-области
  // даёт периферийный сигнал «я не в своей админке».
  const inOverride = typeof window !== 'undefined' && !!localStorage.getItem('superAdminAsOrg')
  // Tenant-guard tost удалён — раздражал юзера на каждом редиректе.
  // Если когда-нибудь понадобится — лучше через ToastContainer, не alert().
  useEffect(() => { sessionStorage.removeItem('tenant-guard-msg') }, [])
  // Если SuperAdmin зашёл, а в системе ноль организаций — выкидываем
  // на setup wizard (нельзя пропустить, пока не создадут первую орг).
  const location2 = useLocation()
  useEffect(() => {
    if (!isSuperAdmin) return
    if (location2.pathname.startsWith('/super-admin/setup')) return
    api.get<{ needsSetup: boolean }>('/api/super-admin/setup-status')
      .then((r) => { if (r.data.needsSetup) window.location.replace('/super-admin/setup') })
      .catch(() => {})
  }, [isSuperAdmin, location2.pathname])

  const [drawerOpen, setDrawerOpen] = useState(false)
  const location = useLocation()
  // Закрывать drawer при смене маршрута.
  useEffect(() => { setDrawerOpen(false) }, [location.pathname])

  const sidebar = (
    <>
      <div className="h-14 flex items-center justify-between px-5 border-b border-slate-200 dark:border-slate-800">
        <Logo />
        <button
          onClick={() => setDrawerOpen(false)}
          className="md:hidden text-slate-500 hover:text-slate-800"
          aria-label="Закрыть меню"
        >
          <X className="w-5 h-5" />
        </button>
      </div>

      <nav className="flex-1 overflow-y-auto py-3">
        {nav.map((section) => (
          <div key={section.group} className="mb-4">
            <div className="px-5 text-xs uppercase tracking-wide text-slate-400 mb-1">{section.group}</div>
            {section.items.map((item) => (
              <NavLink
                key={item.to}
                to={item.to}
                end={'end' in item ? item.end : undefined}
                className={({ isActive }) => cn(
                  'flex items-center gap-2.5 px-5 py-2 md:py-1.5 text-sm transition-colors',
                  isActive
                    ? 'bg-[var(--color-brand-light)] dark:bg-[var(--color-brand-dark)]/20 text-[var(--color-brand-dark)] dark:text-[var(--color-brand-light)] font-medium border-r-2 border-[var(--color-brand)]'
                    : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800/50'
                )}
              >
                <item.icon className="w-4 h-4" />
                {item.label}
              </NavLink>
            ))}
          </div>
        ))}
      </nav>

      <div className="border-t border-slate-200 dark:border-slate-800 p-3">
        {me && (
          <div className="px-2 pb-2 text-xs text-slate-500">
            <div className="truncate font-medium text-slate-700 dark:text-slate-200">{me.name}</div>
            <div className="truncate">{translateRoles(me.roles)}</div>
          </div>
        )}
        <button
          onClick={logout}
          className="w-full flex items-center gap-2 px-2 py-1.5 text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800/50 rounded"
        >
          <LogOut className="w-4 h-4" /> Выход
        </button>
      </div>
    </>
  )

  return (
    <div className={cn(
      'h-screen flex flex-col md:flex-row overflow-hidden',
      inOverride ? 'bg-amber-50/60 dark:bg-amber-950/20' : 'bg-slate-50 dark:bg-slate-950',
    )}>
      {/* Mobile header with hamburger — только на узких экранах. */}
      <header className="md:hidden h-12 flex items-center gap-3 px-4 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 flex-shrink-0">
        <button
          onClick={() => setDrawerOpen(true)}
          className="text-slate-600 dark:text-slate-300"
          aria-label="Открыть меню"
        >
          <Menu className="w-6 h-6" />
        </button>
        <Logo />
      </header>

      {/* Desktop sidebar — закреплён слева на md+. */}
      <aside className="hidden md:flex w-60 flex-shrink-0 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 flex-col h-full">
        {sidebar}
      </aside>

      {/* Mobile drawer — overlay + сдвигающаяся панель. */}
      {drawerOpen && (
        <div className="md:hidden fixed inset-0 z-40" role="dialog" aria-modal="true">
          <div
            className="absolute inset-0 bg-slate-900/50 backdrop-blur-sm"
            onClick={() => setDrawerOpen(false)}
          />
          <aside className="absolute left-0 top-0 bottom-0 w-72 max-w-[85vw] bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 flex flex-col shadow-xl">
            {sidebar}
          </aside>
        </div>
      )}

      <main className="flex-1 min-w-0 min-h-0 flex flex-col overflow-hidden">
        <SuperAdminAsOrgBanner />
        <Outlet />
      </main>
    </div>
  )
}
