import React from 'react';
import { useTheme, THEMES, THEME_LABELS } from '../contexts/ThemeContext';

const THEME_PREVIEWS = {
  [THEMES.LIGHT]: { bg: '#ffffff', sidebar: '#f2f3f5', tertiary: '#e3e5e8', text: '#313338' },
  [THEMES.DARK]: { bg: '#313338', sidebar: '#2b2d31', tertiary: '#1e1f22', text: '#f2f3f5' },
  [THEMES.ASH]: { bg: '#202225', sidebar: '#1a1b1e', tertiary: '#111214', text: '#f0f1f3' },
  [THEMES.ONYX]: { bg: '#0c0c14', sidebar: '#080810', tertiary: '#000000', text: '#e0def0' },
};

const ThemeSelector = ({ onClose }) => {
  const { theme, setTheme } = useTheme();

  return (
    <div className="theme-selector-overlay" onClick={onClose}>
      <div className="theme-selector-modal" onClick={(e) => e.stopPropagation()}>
        <div className="theme-selector-header">
          <h2>Appearance</h2>
          <button className="theme-selector-close" onClick={onClose}>✕</button>
        </div>
        <div className="theme-selector-grid">
          {Object.values(THEMES).map((themeKey) => {
            const preview = THEME_PREVIEWS[themeKey];
            const isActive = theme === themeKey;
            return (
              <div
                key={themeKey}
                className={`theme-card ${isActive ? 'active' : ''}`}
                onClick={() => setTheme(themeKey)}
              >
                <div className="theme-preview" style={{ backgroundColor: preview.bg }}>
                  <div className="theme-preview-sidebar" style={{ backgroundColor: preview.sidebar }}>
                    <div className="theme-preview-channel" style={{ backgroundColor: preview.tertiary }} />
                    <div className="theme-preview-channel" style={{ backgroundColor: preview.tertiary, width: '60%' }} />
                  </div>
                  <div className="theme-preview-chat">
                    <div className="theme-preview-message" style={{ backgroundColor: preview.sidebar, opacity: 0.6 }} />
                    <div className="theme-preview-message" style={{ backgroundColor: preview.sidebar, opacity: 0.4, width: '70%' }} />
                  </div>
                </div>
                <div className="theme-card-label">
                  <div className={`theme-radio ${isActive ? 'active' : ''}`}>
                    {isActive && <div className="theme-radio-dot" />}
                  </div>
                  <span>{THEME_LABELS[themeKey]}</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default ThemeSelector;
