/**
 * DXFilterManager Component
 * Filter modal with tabs for Zones, Bands, Modes, Watchlist, Exclude, Settings
 */
import React, { useState } from 'react';

export const DXFilterManager = ({ filters, onFilterChange, isOpen, onClose }) => {
  const [activeTab, setActiveTab] = useState('zones');
  const [newWatchlistCall, setNewWatchlistCall] = useState('');
  const [newExcludeCall, setNewExcludeCall] = useState('');

  if (!isOpen) return null;

  const continents = [
    { code: 'NA', name: 'North America' },
    { code: 'SA', name: 'South America' },
    { code: 'EU', name: 'Europe' },
    { code: 'AF', name: 'Africa' },
    { code: 'AS', name: 'Asia' },
    { code: 'OC', name: 'Oceania' },
    { code: 'AN', name: 'Antarctica' }
  ];

  const bands = ['160m', '80m', '60m', '40m', '30m', '20m', '17m', '15m', '12m', '11m', '10m', '6m', '2m', '70cm'];
  const modes = ['CW', 'SSB', 'FT8', 'FT4', 'RTTY', 'PSK', 'JT65', 'JS8', 'SSTV', 'AM', 'FM'];

  const toggleArrayItem = (key, item) => {
    const current = filters[key] || [];
    const newArray = current.includes(item)
      ? current.filter(x => x !== item)
      : [...current, item];
    onFilterChange({ ...filters, [key]: newArray.length ? newArray : undefined });
  };

  const selectAll = (key, items) => {
    onFilterChange({ ...filters, [key]: [...items] });
  };

  const clearFilter = (key) => {
    const newFilters = { ...filters };
    delete newFilters[key];
    onFilterChange(newFilters);
  };

  const clearAllFilters = () => {
    onFilterChange({});
  };

  const getActiveFilterCount = () => {
    let count = 0;
    if (filters?.continents?.length) count += filters.continents.length;
    if (filters?.cqZones?.length) count += filters.cqZones.length;
    if (filters?.ituZones?.length) count += filters.ituZones.length;
    if (filters?.bands?.length) count += filters.bands.length;
    if (filters?.modes?.length) count += filters.modes.length;
    if (filters?.watchlist?.length) count += filters.watchlist.length;
    if (filters?.excludeList?.length) count += filters.excludeList.length;
    return count;
  };

  const tabStyle = (active) => ({
    padding: '8px 16px',
    background: active ? 'var(--bg-tertiary)' : 'transparent',
    border: 'none',
    borderBottom: active ? '2px solid var(--accent-cyan)' : '2px solid transparent',
    color: active ? 'var(--accent-cyan)' : 'var(--text-muted)',
    fontSize: '13px',
    cursor: 'pointer',
    fontFamily: 'inherit'
  });

  const chipStyle = (selected) => ({
    padding: '6px 12px',
    background: selected ? 'rgba(0, 221, 255, 0.2)' : 'var(--bg-tertiary)',
    border: `1px solid ${selected ? 'var(--accent-cyan)' : 'var(--border-color)'}`,
    borderRadius: '4px',
    color: selected ? 'var(--accent-cyan)' : 'var(--text-secondary)',
    fontSize: '12px',
    cursor: 'pointer',
    fontFamily: 'JetBrains Mono, monospace'
  });

  const zoneButtonStyle = (selected) => ({
    width: '36px',
    height: '32px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    background: selected ? 'rgba(0, 221, 255, 0.2)' : 'var(--bg-tertiary)',
    border: `1px solid ${selected ? 'var(--accent-cyan)' : 'var(--border-color)'}`,
    borderRadius: '4px',
    color: selected ? 'var(--accent-cyan)' : 'var(--text-secondary)',
    fontSize: '12px',
    cursor: 'pointer',
    fontFamily: 'JetBrains Mono, monospace'
  });

  const addToWatchlist = () => {
    if (newWatchlistCall.trim()) {
      const current = filters?.watchlist || [];
      if (!current.includes(newWatchlistCall.toUpperCase())) {
        onFilterChange({ ...filters, watchlist: [...current, newWatchlistCall.toUpperCase()] });
      }
      setNewWatchlistCall('');
    }
  };

  const addToExclude = () => {
    if (newExcludeCall.trim()) {
      const current = filters?.excludeList || [];
      if (!current.includes(newExcludeCall.toUpperCase())) {
        onFilterChange({ ...filters, excludeList: [...current, newExcludeCall.toUpperCase()] });
      }
      setNewExcludeCall('');
    }
  };

  const renderZonesTab = () => (
    <div>
      {/* Continents */}
      <div style={{ marginBottom: '20px' }}>
        <div style={{ fontSize: '13px', fontWeight: '600', color: 'var(--text-primary)', marginBottom: '10px' }}>
          Continents
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
          {continents.map(c => (
            <button
              key={c.code}
              onClick={() => toggleArrayItem('continents', c.code)}
              style={chipStyle(filters?.continents?.includes(c.code))}
            >
              {c.code} - {c.name}
            </button>
          ))}
        </div>
      </div>

      {/* CQ Zones */}
      <div style={{ marginBottom: '20px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
          <span style={{ fontSize: '13px', fontWeight: '600', color: 'var(--text-primary)' }}>CQ Zones</span>
          <div style={{ display: 'flex', gap: '12px' }}>
            <button onClick={() => selectAll('cqZones', Array.from({length: 40}, (_, i) => i + 1))} style={{ background: 'none', border: 'none', color: 'var(--accent-cyan)', fontSize: '12px', cursor: 'pointer' }}>Select All</button>
            <button onClick={() => clearFilter('cqZones')} style={{ background: 'none', border: 'none', color: 'var(--accent-red)', fontSize: '12px', cursor: 'pointer' }}>Clear</button>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(15, 1fr)', gap: '4px' }}>
          {Array.from({ length: 40 }, (_, i) => i + 1).map(zone => (
            <button
              key={zone}
              onClick={() => toggleArrayItem('cqZones', zone)}
              style={zoneButtonStyle(filters?.cqZones?.includes(zone))}
            >
              {zone}
            </button>
          ))}
        </div>
      </div>

      {/* ITU Zones */}
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
          <span style={{ fontSize: '13px', fontWeight: '600', color: 'var(--text-primary)' }}>ITU Zones</span>
          <div style={{ display: 'flex', gap: '12px' }}>
            <button onClick={() => selectAll('ituZones', Array.from({length: 90}, (_, i) => i + 1))} style={{ background: 'none', border: 'none', color: 'var(--accent-cyan)', fontSize: '12px', cursor: 'pointer' }}>Select All</button>
            <button onClick={() => clearFilter('ituZones')} style={{ background: 'none', border: 'none', color: 'var(--accent-red)', fontSize: '12px', cursor: 'pointer' }}>Clear</button>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(15, 1fr)', gap: '4px' }}>
          {Array.from({ length: 90 }, (_, i) => i + 1).map(zone => (
            <button
              key={zone}
              onClick={() => toggleArrayItem('ituZones', zone)}
              style={zoneButtonStyle(filters?.ituZones?.includes(zone))}
            >
              {zone}
            </button>
          ))}
        </div>
      </div>
    </div>
  );

  const renderBandsTab = () => (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
        <span style={{ fontSize: '13px', fontWeight: '600', color: 'var(--text-primary)' }}>HF/VHF/UHF Bands</span>
        <div style={{ display: 'flex', gap: '12px' }}>
          <button onClick={() => selectAll('bands', bands)} style={{ background: 'none', border: 'none', color: 'var(--accent-cyan)', fontSize: '12px', cursor: 'pointer' }}>Select All</button>
          <button onClick={() => clearFilter('bands')} style={{ background: 'none', border: 'none', color: 'var(--accent-red)', fontSize: '12px', cursor: 'pointer' }}>Clear</button>
        </div>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
        {bands.map(band => (
          <button
            key={band}
            onClick={() => toggleArrayItem('bands', band)}
            style={chipStyle(filters?.bands?.includes(band))}
          >
            {band}
          </button>
        ))}
      </div>
    </div>
  );

  const renderModesTab = () => (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
        <span style={{ fontSize: '13px', fontWeight: '600', color: 'var(--text-primary)' }}>Operating Modes</span>
        <div style={{ display: 'flex', gap: '12px' }}>
          <button onClick={() => selectAll('modes', modes)} style={{ background: 'none', border: 'none', color: 'var(--accent-cyan)', fontSize: '12px', cursor: 'pointer' }}>Select All</button>
          <button onClick={() => clearFilter('modes')} style={{ background: 'none', border: 'none', color: 'var(--accent-red)', fontSize: '12px', cursor: 'pointer' }}>Clear</button>
        </div>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
        {modes.map(mode => (
          <button
            key={mode}
            onClick={() => toggleArrayItem('modes', mode)}
            style={chipStyle(filters?.modes?.includes(mode))}
          >
            {mode}
          </button>
        ))}
      </div>
    </div>
  );

  const renderWatchlistTab = () => (
    <div>
      <div style={{ marginBottom: '16px' }}>
        <div style={{ fontSize: '13px', fontWeight: '600', color: 'var(--text-primary)', marginBottom: '8px' }}>
          Watchlist - Highlight these callsigns
        </div>
        <div style={{ display: 'flex', gap: '8px' }}>
          <input
            type="text"
            value={newWatchlistCall}
            onChange={(e) => setNewWatchlistCall(e.target.value.toUpperCase())}
            onKeyPress={(e) => e.key === 'Enter' && addToWatchlist()}
            placeholder="Enter callsign..."
            style={{
              flex: 1,
              padding: '8px 12px',
              background: 'var(--bg-tertiary)',
              border: '1px solid var(--border-color)',
              borderRadius: '4px',
              color: 'var(--text-primary)',
              fontSize: '13px',
              fontFamily: 'JetBrains Mono'
            }}
          />
          <button onClick={addToWatchlist} style={{ padding: '8px 16px', background: 'var(--accent-cyan)', border: 'none', borderRadius: '4px', color: '#000', fontWeight: '600', cursor: 'pointer' }}>Add</button>
        </div>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
        {(filters?.watchlist || []).map(call => (
          <div key={call} style={{ ...chipStyle(true), display: 'flex', alignItems: 'center', gap: '8px' }}>
            {call}
            <button onClick={() => toggleArrayItem('watchlist', call)} style={{ background: 'none', border: 'none', color: 'var(--accent-red)', cursor: 'pointer', padding: 0, fontSize: '14px' }}>×</button>
          </div>
        ))}
      </div>
      <div style={{ marginTop: '16px' }}>
        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--text-secondary)', fontSize: '12px', cursor: 'pointer' }}>
          <input
            type="checkbox"
            checked={filters?.watchlistOnly || false}
            onChange={(e) => onFilterChange({ ...filters, watchlistOnly: e.target.checked || undefined })}
          />
          Show only watchlist callsigns
        </label>
      </div>
    </div>
  );

  const renderExcludeTab = () => (
    <div>
      <div style={{ marginBottom: '16px' }}>
        <div style={{ fontSize: '13px', fontWeight: '600', color: 'var(--text-primary)', marginBottom: '8px' }}>
          Exclude List - Hide DX callsigns beginning with:
        </div>
        <div style={{ display: 'flex', gap: '8px' }}>
          <input
            type="text"
            value={newExcludeCall}
            onChange={(e) => setNewExcludeCall(e.target.value.toUpperCase())}
            onKeyPress={(e) => e.key === 'Enter' && addToExclude()}
            placeholder="Enter callsign..."
            style={{
              flex: 1,
              padding: '8px 12px',
              background: 'var(--bg-tertiary)',
              border: '1px solid var(--border-color)',
              borderRadius: '4px',
              color: 'var(--text-primary)',
              fontSize: '13px',
              fontFamily: 'JetBrains Mono'
            }}
          />
          <button onClick={addToExclude} style={{ padding: '8px 16px', background: 'var(--accent-red)', border: 'none', borderRadius: '4px', color: '#fff', fontWeight: '600', cursor: 'pointer' }}>Add</button>
        </div>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
        {(filters?.excludeList || []).map(call => (
          <div key={call} style={{ ...chipStyle(false), background: 'rgba(255, 68, 68, 0.2)', borderColor: 'var(--accent-red)', color: 'var(--accent-red)', display: 'flex', alignItems: 'center', gap: '8px' }}>
            {call}
            <button onClick={() => toggleArrayItem('excludeList', call)} style={{ background: 'none', border: 'none', color: 'var(--accent-red)', cursor: 'pointer', padding: 0, fontSize: '14px' }}>×</button>
          </div>
        ))}
      </div>
    </div>
  );

  const renderSettingsTab = () => {
    const retentionMinutes = filters?.spotRetentionMinutes || 30;
    
    return (
      <div>
        <div style={{ marginBottom: '24px' }}>
          <div style={{ fontSize: '13px', fontWeight: '600', color: 'var(--text-primary)', marginBottom: '12px' }}>
            Spot Retention Time
          </div>
          <div style={{ fontSize: '12px', color: 'var(--text-muted)', marginBottom: '12px' }}>
            How long to keep DX spots on the map before they expire. Shorter times show only the most recent activity.
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
            <input
              type="range"
              min="5"
              max="30"
              step="5"
              value={retentionMinutes}
              onChange={(e) => onFilterChange({ ...filters, spotRetentionMinutes: parseInt(e.target.value) })}
              style={{ flex: 1, cursor: 'pointer' }}
            />
            <div style={{ 
              minWidth: '80px', 
              textAlign: 'center',
              padding: '8px 12px',
              background: 'var(--bg-tertiary)',
              borderRadius: '4px',
              fontFamily: 'JetBrains Mono',
              fontSize: '14px',
              fontWeight: '600',
              color: 'var(--accent-cyan)'
            }}>
              {retentionMinutes} min
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '8px', fontSize: '11px', color: 'var(--text-muted)' }}>
            <span>5 min (freshest)</span>
            <span>30 min (default)</span>
          </div>
        </div>

        <div style={{ marginBottom: '24px' }}>
          <div style={{ fontSize: '13px', fontWeight: '600', color: 'var(--text-primary)', marginBottom: '12px' }}>
            Quick Presets
          </div>
          <div style={{ display: 'flex', gap: '8px' }}>
            {[5, 10, 15, 20, 30].map(mins => (
              <button
                key={mins}
                onClick={() => onFilterChange({ ...filters, spotRetentionMinutes: mins })}
                style={{
                  padding: '8px 16px',
                  background: retentionMinutes === mins ? 'rgba(0, 221, 255, 0.2)' : 'var(--bg-tertiary)',
                  border: `1px solid ${retentionMinutes === mins ? 'var(--accent-cyan)' : 'var(--border-color)'}`,
                  borderRadius: '4px',
                  color: retentionMinutes === mins ? 'var(--accent-cyan)' : 'var(--text-secondary)',
                  fontSize: '13px',
                  cursor: 'pointer',
                  fontFamily: 'JetBrains Mono'
                }}
              >
                {mins} min
              </button>
            ))}
          </div>
        </div>
      </div>
    );
  };

  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      background: 'rgba(0, 0, 0, 0.8)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 10000
    }}>
      <div style={{
        background: 'var(--bg-secondary)',
        border: '1px solid var(--border-color)',
        borderRadius: '12px',
        width: '700px',
        maxHeight: '85vh',
        display: 'flex',
        flexDirection: 'column'
      }}>
        {/* Header */}
        <div style={{ 
          display: 'flex', 
          justifyContent: 'space-between', 
          alignItems: 'center',
          padding: '16px 20px',
          borderBottom: '1px solid var(--border-color)'
        }}>
          <div>
            <div style={{ fontSize: '18px', fontWeight: '700', color: 'var(--accent-cyan)' }}>
              ⊘ DX Cluster Filters
            </div>
            <div style={{ fontSize: '12px', color: 'var(--text-muted)', marginTop: '2px' }}>
              {getActiveFilterCount()} filters active
            </div>
          </div>
          <div style={{ display: 'flex', gap: '8px' }}>
            <button
              onClick={clearAllFilters}
              style={{
                padding: '8px 16px',
                background: 'rgba(255, 68, 102, 0.2)',
                border: '1px solid var(--accent-red)',
                borderRadius: '6px',
                color: 'var(--accent-red)',
                fontSize: '13px',
                cursor: 'pointer'
              }}
            >
              Clear All
            </button>
            <button
              onClick={onClose}
              style={{
                padding: '8px 20px',
                background: 'var(--bg-tertiary)',
                border: '1px solid var(--border-color)',
                borderRadius: '6px',
                color: 'var(--text-primary)',
                fontSize: '13px',
                fontWeight: '600',
                cursor: 'pointer'
              }}
            >
              Done
            </button>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', borderBottom: '1px solid var(--border-color)' }}>
          <button onClick={() => setActiveTab('zones')} style={tabStyle(activeTab === 'zones')}>Zones</button>
          <button onClick={() => setActiveTab('bands')} style={tabStyle(activeTab === 'bands')}>Bands</button>
          <button onClick={() => setActiveTab('modes')} style={tabStyle(activeTab === 'modes')}>Modes</button>
          <button onClick={() => setActiveTab('watchlist')} style={tabStyle(activeTab === 'watchlist')}>Watchlist</button>
          <button onClick={() => setActiveTab('exclude')} style={tabStyle(activeTab === 'exclude')}>Exclude</button>
          <button onClick={() => setActiveTab('settings')} style={tabStyle(activeTab === 'settings')}>⊙ Settings</button>
        </div>

        {/* Tab Content */}
        <div style={{ padding: '20px', overflowY: 'auto', flex: 1 }}>
          {activeTab === 'zones' && renderZonesTab()}
          {activeTab === 'bands' && renderBandsTab()}
          {activeTab === 'modes' && renderModesTab()}
          {activeTab === 'watchlist' && renderWatchlistTab()}
          {activeTab === 'exclude' && renderExcludeTab()}
          {activeTab === 'settings' && renderSettingsTab()}
        </div>
      </div>
    </div>
  );
};

export default DXFilterManager;