import { useState, useMemo } from 'react';
import {
  IconServer,
  IconWorld,
  IconBuildingSkyscraper,
  IconNetwork,
  IconChevronDown,
  IconChevronRight,
  IconX,
  IconSearch,
  IconFilter,
  IconDatabase
} from '@tabler/icons-react';

// Преобразование кода страны в emoji-флаг
function countryToFlag(isoCode) {
  if (!isoCode) return '';
  const codeMap = {
    'SWE': 'SE',
    'RUS': 'RU', 
    'USA': 'US',
    'GER': 'DE',
    'FIN': 'FI',
    'NLD': 'NL'
  };
  const code = codeMap[isoCode?.toUpperCase()] || isoCode?.toUpperCase();
  if (!code || code.length !== 2) return isoCode;
  return code
    .replace(/./g, char =>
      String.fromCodePoint(127397 + char.charCodeAt())
    );
}

export default function ServerSidebar({
  servers = [],
  filters = {},
  onFiltersChange,
  onSearch,
  searchTerm = '',
  onReset
}) {
  const [expandedSections, setExpandedSections] = useState({
    country: true,
    provider: true,
    type: true,
    tunnel: false
  });

  // Подсчёт серверов по категориям
  const stats = useMemo(() => {
    const byCountry = {};
    const byProvider = {};
    const byType = {};
    const byTunnel = {};

    servers.forEach(srv => {
      byCountry[srv.country] = (byCountry[srv.country] || 0) + 1;
      byProvider[srv.provider] = (byProvider[srv.provider] || 0) + 1;
      byType[srv.type] = (byType[srv.type] || 0) + 1;
      byTunnel[srv.tunnel] = (byTunnel[srv.tunnel] || 0) + 1;
    });

    return { byCountry, byProvider, byType, byTunnel };
  }, [servers]);

  const toggleSection = (section) => {
    setExpandedSections(prev => ({
      ...prev,
      [section]: !prev[section]
    }));
  };

  const handleFilterClick = (category, value) => {
    const currentValue = filters[category];
    const newValue = currentValue === value ? '' : value;
    onFiltersChange({ ...filters, [category]: newValue });
  };

  const activeFiltersCount = Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0);

  const typeLabels = {
    'jumphost': 'Jumphost',
    'exit': 'Выходная нода'
  };

  return (
    <div 
      className="server-sidebar d-flex flex-column"
      style={{
        width: '260px',
        minWidth: '260px',
        background: '#fff',
        borderRadius: '12px',
        boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
        height: 'fit-content',
        maxHeight: 'calc(100vh - 200px)',
        overflow: 'hidden'
      }}
    >
      {/* Заголовок */}
      <div 
        className="d-flex align-items-center justify-content-between px-3 py-3"
        style={{ borderBottom: '1px solid rgba(0,0,0,0.06)' }}
      >
        <div className="d-flex align-items-center">
          <IconFilter size={18} className="text-primary me-2" />
          <span className="fw-semibold">Фильтры</span>
          {activeFiltersCount > 0 && (
            <span 
              className="badge bg-primary ms-2"
              style={{ fontSize: '0.7rem', padding: '3px 6px' }}
            >
              {activeFiltersCount}
            </span>
          )}
        </div>
        {activeFiltersCount > 0 && (
          <button
            className="btn btn-ghost-secondary btn-icon btn-sm"
            onClick={onReset}
            title="Сбросить"
            style={{ width: 28, height: 28 }}
          >
            <IconX size={14} />
          </button>
        )}
      </div>

      {/* Поиск */}
      <div className="px-3 py-2" style={{ borderBottom: '1px solid rgba(0,0,0,0.06)' }}>
        <div className="input-icon">
          <span className="input-icon-addon">
            <IconSearch size={14} className="text-muted" />
          </span>
          <input
            type="text"
            className="form-control form-control-sm"
            placeholder="Поиск..."
            value={searchTerm}
            onChange={(e) => onSearch(e.target.value)}
            style={{ 
              background: 'rgba(0,0,0,0.02)',
              border: '1px solid rgba(0,0,0,0.06)',
              borderRadius: '8px',
              fontSize: '0.85rem'
            }}
          />
        </div>
      </div>

      {/* Скроллируемый контент */}
      <div style={{ overflowY: 'auto', flex: 1 }}>
        {/* Секция: Страны */}
        <div className="filter-section">
          <div
            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
            onClick={() => toggleSection('country')}
            style={{ 
              background: 'rgba(0,0,0,0.02)',
              borderBottom: '1px solid rgba(0,0,0,0.04)'
            }}
          >
            <div className="d-flex align-items-center">
              <IconWorld size={15} className="me-2" style={{ color: '#3b82f6' }} />
              <span className="fw-medium small">Страны</span>
            </div>
            {expandedSections.country ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
          </div>
          {expandedSections.country && (
            <div className="p-2">
              {Object.entries(stats.byCountry)
                .sort((a, b) => b[1] - a[1])
                .map(([country, count]) => (
                  <button
                    key={country}
                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
                      filters.country === country ? 'btn-primary' : ''
                    }`}
                    onClick={() => handleFilterClick('country', country)}
                    style={{
                      background: filters.country === country ? undefined : 'transparent',
                      border: 'none',
                      borderRadius: '8px',
                      padding: '8px 10px',
                      transition: 'background 0.15s'
                    }}
                    onMouseEnter={(e) => {
                      if (filters.country !== country) {
                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
                      }
                    }}
                    onMouseLeave={(e) => {
                      if (filters.country !== country) {
                        e.currentTarget.style.background = 'transparent';
                      }
                    }}
                  >
                    <span className="d-flex align-items-center">
                      <span className="me-2" style={{ fontSize: '1.1rem' }}>{countryToFlag(country)}</span>
                      <span className={filters.country === country ? 'text-white' : ''}>{country}</span>
                    </span>
                    <span 
                      className={`badge ${filters.country === country ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
                    >
                      {count}
                    </span>
                  </button>
                ))}
            </div>
          )}
        </div>

        {/* Секция: Провайдеры */}
        <div className="filter-section">
          <div
            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
            onClick={() => toggleSection('provider')}
            style={{ 
              background: 'rgba(0,0,0,0.02)',
              borderBottom: '1px solid rgba(0,0,0,0.04)'
            }}
          >
            <div className="d-flex align-items-center">
              <IconBuildingSkyscraper size={15} className="me-2" style={{ color: '#8b5cf6' }} />
              <span className="fw-medium small">Провайдеры</span>
            </div>
            {expandedSections.provider ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
          </div>
          {expandedSections.provider && (
            <div className="p-2">
              {Object.entries(stats.byProvider)
                .sort((a, b) => b[1] - a[1])
                .map(([provider, count]) => (
                  <button
                    key={provider}
                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
                      filters.provider === provider ? 'btn-primary' : ''
                    }`}
                    onClick={() => handleFilterClick('provider', provider)}
                    style={{
                      background: filters.provider === provider ? undefined : 'transparent',
                      border: 'none',
                      borderRadius: '8px',
                      padding: '8px 10px'
                    }}
                    onMouseEnter={(e) => {
                      if (filters.provider !== provider) {
                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
                      }
                    }}
                    onMouseLeave={(e) => {
                      if (filters.provider !== provider) {
                        e.currentTarget.style.background = 'transparent';
                      }
                    }}
                  >
                    <span className={filters.provider === provider ? 'text-white' : ''}>{provider}</span>
                    <span 
                      className={`badge ${filters.provider === provider ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
                    >
                      {count}
                    </span>
                  </button>
                ))}
            </div>
          )}
        </div>

        {/* Секция: Типы */}
        <div className="filter-section">
          <div
            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
            onClick={() => toggleSection('type')}
            style={{ 
              background: 'rgba(0,0,0,0.02)',
              borderBottom: '1px solid rgba(0,0,0,0.04)'
            }}
          >
            <div className="d-flex align-items-center">
              <IconServer size={15} className="me-2" style={{ color: '#10b981' }} />
              <span className="fw-medium small">Тип сервера</span>
            </div>
            {expandedSections.type ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
          </div>
          {expandedSections.type && (
            <div className="p-2">
              {Object.entries(stats.byType)
                .sort((a, b) => b[1] - a[1])
                .map(([type, count]) => (
                  <button
                    key={type}
                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
                      filters.type === type ? 'btn-primary' : ''
                    }`}
                    onClick={() => handleFilterClick('type', type)}
                    style={{
                      background: filters.type === type ? undefined : 'transparent',
                      border: 'none',
                      borderRadius: '8px',
                      padding: '8px 10px'
                    }}
                    onMouseEnter={(e) => {
                      if (filters.type !== type) {
                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
                      }
                    }}
                    onMouseLeave={(e) => {
                      if (filters.type !== type) {
                        e.currentTarget.style.background = 'transparent';
                      }
                    }}
                  >
                    <span className="d-flex align-items-center">
                      <span 
                        className="rounded-circle me-2"
                        style={{ 
                          width: 8, 
                          height: 8, 
                          background: type === 'exit' ? '#ef4444' : '#3b82f6'
                        }}
                      />
                      <span className={filters.type === type ? 'text-white' : ''}>
                        {typeLabels[type] || type}
                      </span>
                    </span>
                    <span 
                      className={`badge ${filters.type === type ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
                    >
                      {count}
                    </span>
                  </button>
                ))}
            </div>
          )}
        </div>

        {/* Секция: Туннели */}
        <div className="filter-section">
          <div
            className="d-flex align-items-center justify-content-between px-3 py-2 cursor-pointer"
            onClick={() => toggleSection('tunnel')}
            style={{ 
              background: 'rgba(0,0,0,0.02)',
              borderBottom: '1px solid rgba(0,0,0,0.04)'
            }}
          >
            <div className="d-flex align-items-center">
              <IconNetwork size={15} className="me-2" style={{ color: '#f59e0b' }} />
              <span className="fw-medium small">Туннель</span>
            </div>
            {expandedSections.tunnel ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
          </div>
          {expandedSections.tunnel && (
            <div className="p-2">
              {Object.entries(stats.byTunnel)
                .sort((a, b) => b[1] - a[1])
                .map(([tunnel, count]) => (
                  <button
                    key={tunnel}
                    className={`btn btn-sm w-100 text-start mb-1 d-flex align-items-center justify-content-between ${
                      filters.tunnel === tunnel ? 'btn-primary' : ''
                    }`}
                    onClick={() => handleFilterClick('tunnel', tunnel)}
                    style={{
                      background: filters.tunnel === tunnel ? undefined : 'transparent',
                      border: 'none',
                      borderRadius: '8px',
                      padding: '8px 10px'
                    }}
                    onMouseEnter={(e) => {
                      if (filters.tunnel !== tunnel) {
                        e.currentTarget.style.background = 'rgba(0,0,0,0.04)';
                      }
                    }}
                    onMouseLeave={(e) => {
                      if (filters.tunnel !== tunnel) {
                        e.currentTarget.style.background = 'transparent';
                      }
                    }}
                  >
                    <span className={filters.tunnel === tunnel ? 'text-white' : ''}>{tunnel}</span>
                    <span 
                      className={`badge ${filters.tunnel === tunnel ? 'bg-white text-primary' : 'bg-secondary-lt text-secondary'}`}
                      style={{ fontSize: '0.7rem', padding: '3px 7px' }}
                    >
                      {count}
                    </span>
                  </button>
                ))}
            </div>
          )}
        </div>
      </div>

      {/* Статистика внизу */}
      <div 
        className="px-3 py-3"
        style={{ 
          borderTop: '1px solid rgba(0,0,0,0.06)',
          background: 'rgba(0,0,0,0.01)'
        }}
      >
        <div className="d-flex align-items-center mb-2">
          <IconDatabase size={14} className="text-muted me-2" />
          <span className="text-muted small">Статистика</span>
        </div>
        <div className="d-flex justify-content-between mb-1">
          <span className="small text-muted">Всего серверов</span>
          <span className="small fw-bold">{servers.length}</span>
        </div>
        <div className="d-flex justify-content-between mb-1">
          <span className="small text-muted">Выходных нод</span>
          <span className="small fw-bold" style={{ color: '#ef4444' }}>{stats.byType['exit'] || 0}</span>
        </div>
        <div className="d-flex justify-content-between">
          <span className="small text-muted">Jumphosts</span>
          <span className="small fw-bold" style={{ color: '#3b82f6' }}>{stats.byType['jumphost'] || 0}</span>
        </div>
      </div>
    </div>
  );
}