import { useEffect, useState } from 'react'
import { NavLink, Outlet, useLocation } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import {
  ShieldCheck, Building, FileClock, HeartPulse, HardDriveDownload,
  Settings, Users, LayoutDashboard, LogOut, Menu, X, ChevronDown, Globe,
  FolderTree, Ruler,
} from 'lucide-react'
import { api, setOrgOverride } from '@/lib/api'
import { logout } from '@/lib/auth'
import { useMe } from '@/lib/useMe'
import { cn } from '@/lib/utils'
import { Logo } from './Logo'

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

const NAV: NavSection[] = [
  { group: 'Система', items: [
    { to: '/super-admin', icon: LayoutDashboard, label: 'Главная', end: true },
    { to: '/super-admin/organizations', icon: Building, label: 'Организации' },
    { to: '/super-admin/users', icon: Users, label: 'Пользователи', soon: true },
  ]},
  { group: 'Справочники', items: [
    { to: '/super-admin/countries', icon: Globe, label: 'Страны' },
    { to: '/super-admin/groups', icon: FolderTree, label: 'Группы (эталон)' },
    { to: '/super-admin/units', icon: Ruler, label: 'Ед. измерения (эталон)' },
  ]},
  { group: 'Аудит', items: [
    { to: '/super-admin/audit-log', icon: FileClock, label: 'Журнал действий' },
  ]},
  { group: 'Тех. обслуживание', items: [
    { to: '/super-admin/health', icon: HeartPulse, label: 'Здоровье', soon: true },
    { to: '/super-admin/backups', icon: HardDriveDownload, label: 'Бэкапы', soon: true },
    { to: '/super-admin/settings', icon: Settings, label: 'Системные настройки' },
    { to: '/super-admin/platform-settings', icon: Settings, label: 'SMTP / Email' },
  ]},
]

interface OrgRow { id: string; name: string; isArchived: boolean }

export function SuperAdminLayout() {
  const me = useMe()
  const location = useLocation()
  const [drawerOpen, setDrawerOpen] = useState(false)
  const [orgPickerOpen, setOrgPickerOpen] = useState(false)

  // Title-suffix « · Super Admin» — чтобы во вкладках браузера было ясно где
  // находишься. Сбрасывается при выходе из layout'а.
  useEffect(() => {
    const prev = document.title
    if (!document.title.endsWith(' · Super Admin')) {
      document.title = `${prev.replace(/ · Super Admin$/, '')} · Super Admin`
    }
    return () => { document.title = prev }
  }, [location.pathname])

  // Раньше тут стоял useEffect navigate('/dashboard') если getOrgOverride()
  // не пуст — это создавало цикл: SuperAdmin не мог зайти в системную консоль
  // когда override остался с прошлой сессии (его выкидывало обратно в
  // tenant-режим, баннер с «Выйти из режима» тоже в tenant-области).
  // Теперь переход в системную консоль безопасен — override остаётся, юзер
  // его сам снимает через баннер либо переключает другую орг через picker.

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

  const orgs = useQuery({
    queryKey: ['super-admin:orgs:picker'],
    queryFn: async () => (await api.get<{ items: OrgRow[] }>('/api/super-admin/organizations?pageSize=200&archived=false')).data.items,
    staleTime: 30_000,
    enabled: orgPickerOpen,
  })

  const sidebar = (
    <>
      <div className="px-5 py-4 border-b border-indigo-900/40">
        <div className="flex items-center justify-between">
          <Logo variant="dark" />
          <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-indigo-500/20 text-indigo-200 font-semibold">
            Super
          </span>
        </div>
        <p className="text-[11px] text-indigo-300 mt-1">Системная консоль</p>
      </div>
      <nav className="flex-1 overflow-y-auto py-3 space-y-4">
        {NAV.map((section) => (
          <div key={section.group}>
            <div className="px-5 mb-1.5 text-[10px] uppercase tracking-wider text-indigo-300/70 font-semibold">{section.group}</div>
            <div className="space-y-0.5">
              {section.items.map((it) => (
                <NavLink
                  key={it.to}
                  to={it.to}
                  end={it.end}
                  onClick={(e) => { if (it.soon) { e.preventDefault() } }}
                  className={({ isActive }) => cn(
                    'flex items-center gap-2.5 mx-2 px-3 py-1.5 rounded-md text-sm',
                    it.soon
                      ? 'text-indigo-300/40 cursor-not-allowed'
                      : isActive
                        ? 'bg-indigo-500/20 text-white font-medium'
                        : 'text-indigo-100/80 hover:bg-indigo-500/10 hover:text-white',
                  )}
                >
                  <it.icon className="w-4 h-4 flex-shrink-0" />
                  <span className="truncate">{it.label}</span>
                  {it.soon && <span className="ml-auto text-[10px] uppercase opacity-70">скоро</span>}
                </NavLink>
              ))}
            </div>
          </div>
        ))}
      </nav>
      <div className="border-t border-indigo-900/40 px-4 py-3">
        <div className="flex items-center gap-2 mb-2">
          <ShieldCheck className="w-4 h-4 text-indigo-300" />
          <div className="min-w-0">
            <div className="text-sm text-white font-medium truncate">{me.data?.name ?? me.data?.email}</div>
            <div className="text-[11px] text-indigo-300">Super Admin</div>
          </div>
        </div>
        <button
          onClick={() => { logout(); window.location.href = '/login' }}
          className="w-full flex items-center justify-center gap-1.5 text-xs text-indigo-200 hover:text-white border border-indigo-500/30 hover:bg-indigo-500/10 rounded-md py-1.5"
        >
          <LogOut className="w-3.5 h-3.5" /> Выйти
        </button>
      </div>
    </>
  )

  return (
    <div className="h-screen flex flex-col md:flex-row bg-slate-50 dark:bg-slate-950 overflow-hidden">
      <header className="md:hidden h-12 flex items-center gap-3 px-4 border-b border-slate-200 dark:border-slate-800 bg-indigo-950 text-white flex-shrink-0">
        <button onClick={() => setDrawerOpen(true)}><Menu className="w-6 h-6" /></button>
        <div className="flex items-center gap-2">
          <Logo variant="dark" />
          <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-indigo-500/30 text-indigo-100">Super</span>
        </div>
      </header>

      <aside className="hidden md:flex w-64 flex-shrink-0 bg-indigo-950 text-white flex-col h-full">
        {sidebar}
      </aside>

      {drawerOpen && (
        <div className="md:hidden fixed inset-0 z-40">
          <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-indigo-950 text-white flex flex-col shadow-xl">
            <div className="flex justify-end p-2"><button onClick={() => setDrawerOpen(false)}><X className="w-5 h-5" /></button></div>
            {sidebar}
          </aside>
        </div>
      )}

      <main className="flex-1 min-w-0 min-h-0 flex flex-col overflow-hidden">
        {/* Topbar системной консоли с быстрым переключателем «Открыть как…» */}
        <div className="h-11 flex items-center justify-between gap-3 px-4 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 flex-shrink-0">
          <div className="text-xs text-slate-500">
            <span className="font-semibold text-indigo-700 dark:text-indigo-300">Системная консоль</span>
            <span className="mx-1.5">·</span>
            <span>Super Admin</span>
          </div>
          <div className="relative">
            <button
              onClick={() => setOrgPickerOpen((o) => !o)}
              className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-md border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800"
            >
              Открыть организацию <ChevronDown className="w-3 h-3" />
            </button>
            {orgPickerOpen && (
              <div className="absolute right-0 top-full mt-1 w-72 max-h-80 overflow-auto bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-md shadow-lg z-50">
                {orgs.isLoading && <div className="px-3 py-2 text-sm text-slate-400">Загрузка…</div>}
                {orgs.data?.length === 0 && <div className="px-3 py-2 text-sm text-slate-400">Нет организаций</div>}
                {orgs.data?.map((o) => (
                  <button
                    key={o.id}
                    onClick={() => { setOrgPickerOpen(false); setOrgOverride({ id: o.id, name: o.name }, { redirectTo: '/dashboard' }) }}
                    className="w-full text-left px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-800 truncate"
                  >
                    {o.name}
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>
        <Outlet />
      </main>
    </div>
  )
}
