import { useState, useEffect, createContext, useContext } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  useLocation,
  Navigate
} from 'react-router-dom';
import {
  IconBrandTabler,
  IconWorld,
  IconNetwork,
  IconSettings,
  IconHome,
  IconDatabase,
  IconServer,
  IconFilter,
  IconDownload,
  IconCreditCard,
  IconMenu2,
  IconArrowsExchange
} from '@tabler/icons-react';
import ServerManager from './ServerManager';
import FilterManager from './FilterManager';
import EasySwitchManager from './EasySwitchManager';
import DomainsNewManager from './DomainsNewManager';
import IPRangesManager from './IPRangesManager';
import ASNsNewManager from './ASNsNewManager';
import AutoUrlManager from './AutoUrlManager';
import BillingManager from './BillingManager';
import CommunitiesManager from './CommunitiesManager';
import NetworkConfigManager from './NetworkConfigManager';
import Dashboard from './Dashboard';
import MikrotikBackupsManager from './MikrotikBackupsManager.jsx';
import './App.css';
import { NotifyProvider } from './components/NotifyProvider.jsx';
import SettingsModal from './components/SettingsModal.jsx';
import ToastContainer from './components/ToastContainer.jsx';
import CommandPalette, { KeyboardShortcutsButton } from './components/CommandPalette.jsx';
import ErrorBoundary from './components/ErrorBoundary.jsx';
import NetworkErrorHandler from './components/NetworkErrorHandler.jsx';

// --- Simple i18n (RU/EN) ---
const LanguageContext = createContext({ lang: 'ru', setLang: () => {}, t: (k) => k });

function LanguageProvider({ children }) {
  const [lang, setLang] = useState(() => localStorage.getItem('lang') || 'ru');
  useEffect(() => { localStorage.setItem('lang', lang); }, [lang]);
  const dict = {
    ru: {
      home: 'Главная', data: 'Данные', management: 'Управление', tools: 'Инструменты',
      dashboard: 'Панель', domains: 'Домены', ipRanges: 'IP-диапазоны', asns: 'AS',
      communities: 'Community', servers: 'Серверы', filters: 'Фильтры', billing: 'Биллинг', autoUrls: 'Авто URL',
      easySwitch: 'Easy Switch', networkConfig: 'Сетевые настройки', mikrotikBackups: 'MikroTik Бэкапы',
      light: 'Светлая', dark: 'Тёмная'
    },
    en: {
      home: 'Home', data: 'Data', management: 'Management', tools: 'Tools',
      dashboard: 'Dashboard', domains: 'Domains', ipRanges: 'IP Ranges', asns: 'ASNs',
      communities: 'Communities', servers: 'Servers', filters: 'Filters', billing: 'Billing', autoUrls: 'Auto URLs',
      easySwitch: 'Easy Switch', networkConfig: 'Network Config', mikrotikBackups: 'MikroTik Backups',
      light: 'Light', dark: 'Dark'
    }
  };
  const t = (key) => (dict[lang] && key in dict[lang] ? dict[lang][key] : key);
  return (
    <LanguageContext.Provider value={{ lang, setLang, t }}>
      {children}
    </LanguageContext.Provider>
  );
}

// --- Theme provider (light/dark) ---
const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
  useEffect(() => {
    localStorage.setItem('theme', theme);
    document.documentElement.setAttribute('data-bs-theme', theme);
  }, [theme]);
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
// Единственный экземпляр QueryClient для всего приложения
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      staleTime: 30_000,
    }
  }
});

function App() {
  return (
    <ErrorBoundary>
      <Router>
        <QueryClientProvider client={queryClient}>
          <LanguageProvider>
            <ThemeProvider>
              <ToastContainer>
                <NotifyProvider>
                  <NetworkErrorHandler />
                  <MainLayout />
                </NotifyProvider>
              </ToastContainer>
            </ThemeProvider>
          </LanguageProvider>
        </QueryClientProvider>
      </Router>
    </ErrorBoundary>
  );
}

function MainLayout() {
  const location = useLocation();
  const { lang, setLang, t } = useContext(LanguageContext);
  const { theme, setTheme } = useContext(ThemeContext);
  // Навбар стал лаконичным: без неиспользуемых уведомлений/иконок
  const [settingsOpen, setSettingsOpen] = useState(false);

  // Состояние для управления выпадающими меню
  const [dropdownStates, setDropdownStates] = useState({
    data: false,
    management: false,
    tools: false
  });

  // Закрытие всех выпадающих меню при клике вне их области
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (!event.target.closest('.nav-item.dropdown')) {
        setDropdownStates({
          data: false,
          management: false,
          tools: false
        });
      }
    };

    document.addEventListener('click', handleClickOutside);
    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  }, []);

  const toggleDropdown = (dropdown) => {
    setDropdownStates(prev => {
      // Закрываем все выпадающие меню
      const newState = {
        data: false,
        management: false,
        tools: false
      };
      // Открываем только выбранное меню, если оно было закрыто
      if (!prev[dropdown]) {
        newState[dropdown] = true;
      }
      return newState;
    });
  };

  const navCategories = [
    {
      id: 'home',
      title: t('home'),
      icon: IconHome,
      path: '/dashboard',
      single: true
    },
    {
      id: 'data',
      title: t('data'),
      icon: IconDatabase,
      items: [
        { id: 'domains', title: t('domains'), path: '/domains', icon: IconWorld },
        { id: 'ip-ranges', title: t('ipRanges'), path: '/ip-ranges', icon: IconNetwork },
        { id: 'asns', title: t('asns'), path: '/asns', icon: IconNetwork },
        { id: 'communities', title: t('communities'), path: '/communities', icon: IconFilter }
      ]
    },
    {
      id: 'management',
      title: t('management'),
      icon: IconServer,
      items: [
        { id: 'servers', title: t('servers'), path: '/servers', icon: IconServer },
        { id: 'filters', title: t('filters'), path: '/filters', icon: IconFilter },
        { id: 'network-config', title: t('networkConfig'), path: '/network-config', icon: IconNetwork },
        { id: 'easy-switch', title: t('easySwitch'), path: '/easy-switch', icon: IconArrowsExchange },
        { id: 'billing', title: t('billing'), path: '/billing', icon: IconCreditCard }
      ]
    },
    {
      id: 'tools',
      title: t('tools'),
      icon: IconSettings,
      items: [
        { id: 'auto-urls', title: t('autoUrls'), path: '/auto-urls', icon: IconDownload },
        { id: 'mikrotik-backups', title: t('mikrotikBackups'), path: '/mikrotik-backups', icon: IconDatabase }
      ]
    },
    // Убрали неиспользуемые/неработающие разделы
  ];

  // Определяем активную вкладку по адресу
  const getActiveTab = () => {
    for (const category of navCategories) {
      if (category.single && location.pathname === category.path) {
        return category.id;
      }
      if (category.items) {
        for (const item of category.items) {
          if (location.pathname.startsWith(item.path)) {
            return item.id;
          }
        }
      }
    }
    return 'home';
  };

  const activeTab = getActiveTab();

  return (
    <div className="page d-flex flex-column min-vh-100">
      {/* Skip link для доступности */}
      <a href="#main-content" className="skip-link">
        Перейти к основному содержанию
      </a>
      
      {/* Верхнее меню Tabler Admin */}
      <header className="navbar navbar-expand-md navbar-light d-print-none" style={{boxShadow: '0 1px 0 0 #e9ecef'}}>
        <div className="container-xl">
          {/* Логотип */}
          <div className="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
            <Link to="/" className="navbar-brand d-flex align-items-center">
              <IconBrandTabler className="navbar-brand-icon me-2" />
              <span className="fw-bold">S3 Lists Manager</span>
            </Link>
          </div>

          {/* Кнопка бургера для мобильных */}
          <button
            className="navbar-toggler d-md-none"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbar-menu"
            aria-controls="navbar-menu"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <IconMenu2 />
          </button>
          
          {/* Основное меню */}
          <div className="collapse navbar-collapse" id="navbar-menu">
            <div className="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
              <ul className="navbar-nav">
                {navCategories.map(category => (
                  <li key={category.id} className="nav-item dropdown">
                    {category.single ? (
                      <Link
                        to={category.path}
                        className={`nav-link${activeTab === category.id ? ' active' : ''}`}
                      >
                        <category.icon className="icon icon-tabler" />
                        <span className="nav-link-title">{category.title}</span>
                      </Link>
                    ) : (
                      <>
                        <a 
                          className={`nav-link dropdown-toggle${activeTab.startsWith(category.id) ? ' active' : ''}`}
                          href="#"
                          onClick={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            toggleDropdown(category.id);
                          }}
                        >
                          <category.icon className="icon icon-tabler" />
                          <span className="nav-link-title">{category.title}</span>
                        </a>
                        {dropdownStates[category.id] && (
                          <div className="dropdown-menu show" onClick={(e) => e.stopPropagation()}>
                            <div className="dropdown-menu-columns">
                              <div className="dropdown-menu-column">
                                {category.items.map(item => (
                                  <Link
                                    key={item.id}
                                    to={item.path}
                                    className={`dropdown-item${activeTab === item.id ? ' active' : ''}`}
                                  >
                                    <item.icon className="icon icon-tabler" />
                                    {item.title}
                                  </Link>
                                ))}
                              </div>
                            </div>
                          </div>
                        )}
                      </>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          </div>
          
          {/* Правая часть навбара: язык, тема и действия */}
          <div className="navbar-nav flex-row order-md-last">
            {/* Язык */}
            <div className="nav-item dropdown me-1">
              <a 
                href="#" 
                className="nav-link px-2 dropdown-toggle" 
                data-bs-toggle="dropdown"
                onClick={(e) => e.preventDefault()}
              >
                <span className="badge">{lang.toUpperCase()}</span>
              </a>
              <div className="dropdown-menu dropdown-menu-end">
                <a 
                  href="#" 
                  className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`}
                  onClick={(e) => { e.preventDefault(); setLang('ru'); }}
                >
                  Русский
                </a>
                <a 
                  href="#" 
                  className={`dropdown-item ${lang === 'en' ? 'active' : ''}`}
                  onClick={(e) => { e.preventDefault(); setLang('en'); }}
                >
                  English
                </a>
              </div>
            </div>

            {/* Тема */}
            <div className="nav-item dropdown me-1">
              <a 
                href="#" 
                className="nav-link px-2 dropdown-toggle" 
                data-bs-toggle="dropdown"
                onClick={(e) => e.preventDefault()}
              >
                {theme === 'dark' ? '🌙' : '☀️'}
              </a>
              <div className="dropdown-menu dropdown-menu-end">
                <a 
                  href="#" 
                  className={`dropdown-item ${theme === 'light' ? 'active' : ''}`}
                  onClick={(e) => { e.preventDefault(); setTheme('light'); }}
                >
                  ☀️ {t('light')}
                </a>
                <a 
                  href="#" 
                  className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`}
                  onClick={(e) => { e.preventDefault(); setTheme('dark'); }}
                >
                  🌙 {t('dark')}
                </a>
              </div>
            </div>

            {/* Горячие клавиши */}
            <div className="nav-item me-1">
              <KeyboardShortcutsButton className="nav-link px-2" />
            </div>

            {/* Настройки */}
            <div className="nav-item">
              <a 
                href="#" 
                className="nav-link px-2" 
                onClick={(e) => { e.preventDefault(); setSettingsOpen(true); }}
                title="Настройки"
              >
                <IconSettings size={20} />
              </a>
            </div>
          </div>
        </div>
      </header>
      <main id="main-content" className="container-xl mt-4 flex-grow-1" tabIndex="-1">
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/domains" element={<DomainsNewManager />} />
          <Route path="/ip-ranges" element={<IPRangesManager />} />
          <Route path="/asns" element={<ASNsNewManager />} />
          <Route path="/communities" element={<CommunitiesManager />} />
          <Route path="/auto-urls" element={<AutoUrlManager />} />
          <Route path="/servers" element={<ServerManager />} />
          <Route path="/billing" element={<BillingManager />} />
          <Route path="/filters" element={<FilterManager />} />
          <Route path="/network-config" element={<NetworkConfigManager />} />
          <Route path="/easy-switch" element={<EasySwitchManager />} />
          <Route path="/mikrotik-backups" element={<MikrotikBackupsManager />} />
          <Route path="/" element={<Navigate to="/dashboard" replace />} />
        </Routes>
      </main>
      <footer className="footer mt-auto py-2">
        <div className="container-xl text-muted small">
          Версия UI: {import.meta?.env?.VITE_APP_VERSION || 'dev'}
        </div>
      </footer>
      <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
      <CommandPalette />
    </div>
  );
}



export default App;