import { useState, useEffect } from 'react';
import { Container } from 'react-bootstrap';
import {
  IconBrandTabler,
  IconWorld,
  IconNetwork,
  IconSettings,
  IconHome,
  IconFileText,
  IconCloud,
  IconShield,
  IconActivity,
  IconBell,
  IconChevronDown,
  IconUser,
  IconDatabase,
  IconAlertTriangle,
  IconAlertCircle,
  IconServer,
  IconFilter,
  IconDownload,
  IconCreditCard,
  IconMoon,
  IconHeart,
  IconCode
} from '@tabler/icons-react';
import DataManager from './DataManager';
import ServerManager from './ServerManager';
import FilterManager from './FilterManager';
import DomainsNewManager from './DomainsNewManager';
import IPRangesManager from './IPRangesManager';
import ASNsNewManager from './ASNsNewManager';
import AutoUrlManager from './AutoUrlManager';
import BillingManager from './BillingManager';
import './App.css';
import axios from 'axios';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  useLocation,
  Navigate
} from 'react-router-dom';

function App() {
  return (
    <Router>
      <MainLayout />
    </Router>
  );
}

function MainLayout() {
  const location = useLocation();
  const [notifications] = useState([
    { id: 1, title: 'Новый домен добавлен', message: 'example.com был добавлен в список', time: '2 мин назад' },
    { id: 2, title: 'Изменения сохранены', message: 'Список AS обновлен в S3', time: '5 мин назад' }
  ]);

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

  const toggleDropdown = (dropdown) => {
    setDropdownStates(prev => ({
      ...prev,
      [dropdown]: !prev[dropdown]
    }));
  };

  const navCategories = [
    {
      id: 'home',
      title: 'Главная',
      icon: IconHome,
      path: '/',
      single: true
    },
    {
      id: 'data',
      title: 'Данные',
      icon: IconDatabase,
      items: [
        { id: 'domains', title: 'Домены', path: '/domains', icon: IconWorld },
        { id: 'domains-new', title: 'Домены New', path: '/domains-new', icon: IconWorld },
        { id: 'ip-ranges', title: 'IP-диапазоны', path: '/ip-ranges', icon: IconNetwork },
        { id: 'asns', title: 'AS', path: '/asns', icon: IconNetwork }
      ]
    },
    {
      id: 'management',
      title: 'Управление',
      icon: IconServer,
      items: [
        { id: 'servers', title: 'Серверы', path: '/servers', icon: IconServer },
        { id: 'filters', title: 'Фильтры', path: '/filters', icon: IconFilter },
        { id: 'billing', title: 'Биллинг', path: '/billing', icon: IconCreditCard }
      ]
    },
    {
      id: 'tools',
      title: 'Инструменты',
      icon: IconSettings,
      items: [
        { id: 'auto-urls', title: 'Авто URL', path: '/auto-urls', icon: IconDownload },
        { id: 'files', title: 'Файлы', path: '/files', icon: IconFileText },
        { id: 'cloud', title: 'Облако', path: '/cloud', icon: IconCloud },
        { id: 'security', title: 'Безопасность', path: '/security', icon: IconShield },
        { id: 'activity', title: 'Активность', path: '/activity', icon: IconActivity }
      ]
    },
    {
      id: 'settings',
      title: 'Настройки',
      icon: IconSettings,
      path: '/settings',
      single: true
    }
  ];

  // Определяем активную вкладку по адресу
  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">
      {/* Верхнее меню 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>
          
          {/* Основное меню */}
          <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();
                            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">
                            <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">
              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Source code">
                <IconCode className="icon icon-tabler" />
              </a>
            </div>
            <div className="nav-item dropdown">
              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Sponsor">
                <IconHeart className="icon icon-tabler" />
              </a>
            </div>
            <div className="nav-item dropdown">
              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Dark mode">
                <IconMoon className="icon icon-tabler" />
              </a>
            </div>
            <div className="nav-item dropdown">
              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Notifications">
                <IconBell className="icon icon-tabler" />
              </a>
            </div>
            <div className="nav-item dropdown">
              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Apps">
                <IconActivity className="icon icon-tabler" />
              </a>
            </div>
            <div className="nav-item dropdown">
              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="Theme settings">
                <IconSettings className="icon icon-tabler" />
                <span className="badge bg-red"></span>
              </a>
            </div>
            
            {/* Пользователь */}
            <div className="nav-item dropdown">
              <a href="#" className="nav-link d-flex lh-1 text-reset p-0 ms-3" aria-label="User menu">
                <span className="avatar avatar-sm" style={{backgroundImage: 'url(./static/avatars/000m.jpg)'}}></span>
                <div className="d-none d-xl-block ps-2">
                  <div>Admin User</div>
                  <div className="mt-1 small text-muted">Administrator</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </header>
      <div className="container-xl mt-4">
        <Routes>
          <Route path="/domains" element={
            <DataManager
              entityName="домен"
              entityKey="domains"
              placeholder="example.com"
            />
          } />
          <Route path="/domains-new" element={<DomainsNewManager />} />
          <Route path="/ip-ranges" element={<IPRangesManager />} />
          <Route path="/asns" element={<ASNsNewManager />} />
          <Route path="/auto-urls" element={<AutoUrlManager />} />
          <Route path="/servers" element={<ServerManager />} />
          <Route path="/billing" element={<BillingManager />} />
          <Route path="/filters" element={<FilterManager />} />
          <Route path="/" element={<Navigate to="/domains" replace />} />
        </Routes>
      </div>
    </div>
  );
}

function StatCard({ icon: Icon, color, value, title, subtitle }) {
  return (
    <div className="card h-100">
      <div className="card-body d-flex align-items-center">
        <span className={`avatar avatar-lg me-3 bg-${color}-lt text-${color} border-0`}>
          <Icon size={32} />
        </span>
        <div>
          <div className="h3 mb-0 fw-bold">{value} <span className="fs-5 fw-normal">{title}</span></div>
          <div className="text-muted lh-1">{subtitle}</div>
        </div>
      </div>
    </div>
  );
}

function Dashboard() {
  const [stats, setStats] = useState({ domainsCount: null, asnsCount: null, serversCount: null, lastModified: null });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchStats() {
      setLoading(true);
      try {
        const [domainsRes, asnsRes, serversRes, s3Res] = await Promise.all([
          axios.get('/api/domains'),
          axios.get('/api/asns'),
          axios.get('/api/servers'),
          axios.get('/api/s3/last-modified')
        ]);
        setStats({
          domainsCount: domainsRes.data.length,
          asnsCount: asnsRes.data.length,
          serversCount: serversRes.data.length,
          lastModified: s3Res.data.domainsLastModified
        });
      } catch (e) {
        setStats({ domainsCount: null, asnsCount: null, serversCount: null, lastModified: null });
      } finally {
        setLoading(false);
      }
    }
    fetchStats();
  }, []);

  return (
    <div>
      <div className="row g-3 mb-4">
        <div className="col-md-3">
          <StatCard
            icon={IconWorld}
            color="blue"
            value={loading ? '...' : stats.domainsCount ?? '—'}
            title="Доменов"
            subtitle="Всего доменов"
          />
        </div>
        <div className="col-md-3">
          <StatCard
            icon={IconNetwork}
            color="green"
            value={loading ? '...' : stats.asnsCount ?? '—'}
            title="AS"
            subtitle="Всего AS"
          />
        </div>
        <div className="col-md-3">
          <StatCard
            icon={IconServer}
            color="purple"
            value={loading ? '...' : stats.serversCount ?? '—'}
            title="Серверов"
            subtitle="Всего серверов"
          />
        </div>
        <div className="col-md-3">
          <StatCard
            icon={IconDatabase}
            color="orange"
            value={loading ? '...' : (stats.lastModified ? new Date(stats.lastModified).toLocaleString() : '—')}
            title="Обновление"
            subtitle="Последнее изменение S3"
          />
        </div>
      </div>
      <div className="page-header d-print-none mb-4">
        <div className="row align-items-center">
          <div className="col">
            <h2 className="page-title">Dashboard</h2>
            <div className="page-pretitle">Главная / Dashboard</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;