import { FiX, FiMoon, FiSun, FiCoffee, FiWind } from 'react-icons/fi';
import { type Language, t } from '../translations';

interface Props {
  language: Language;
  setLanguage: (lang: Language) => void;
  theme: 'dark' | 'light';
  setTheme: (theme: 'dark' | 'light') => void;
  windUnit: 'kmh' | 'ms';
  setWindUnit: (unit: 'kmh' | 'ms') => void;
  onClose: () => void;
}

const SettingsModal = ({ language, setLanguage, theme, setTheme, windUnit, setWindUnit, onClose }: Props) => {
  const dict = t[language].settings;

  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.75)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      zIndex: 1000,
      backdropFilter: 'blur(4px)'
    }}>
      <div style={{
        backgroundColor: 'var(--bg-card)',
        border: '1px solid var(--border-color)',
        borderRadius: '1rem',
        padding: '2rem',
        width: '90%',
        maxWidth: '400px',
        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
      }}>
        {/* Header */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
          <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', margin: 0 }}>{dict.title}</h2>
          <button 
            onClick={onClose}
            style={{
              background: 'transparent', border: 'none', color: 'var(--text-muted)',
              cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: '0.5rem', borderRadius: '50%'
            }}
          >
            <FiX size={24} />
          </button>
        </div>

        {/* Theme Setting */}
        <div style={{ marginBottom: '1.5rem' }}>
          <label style={{ display: 'block', marginBottom: '0.75rem', color: 'var(--text-muted)', fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '1px' }}>
            {dict.theme}
          </label>
          <div style={{ display: 'flex', gap: '1rem' }}>
            <button
              onClick={() => setTheme('dark')}
              style={{
                flex: 1, padding: '0.75rem', borderRadius: '0.5rem',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
                border: theme === 'dark' ? '1px solid var(--color-cyan)' : '1px solid var(--border-color)',
                backgroundColor: theme === 'dark' ? 'rgba(6, 182, 212, 0.1)' : 'transparent',
                color: theme === 'dark' ? 'var(--color-cyan)' : 'var(--text-main)',
                cursor: 'pointer', transition: 'all 0.2s'
              }}
            >
              <FiMoon /> {dict.dark}
            </button>
            <button
              onClick={() => setTheme('light')}
              style={{
                flex: 1, padding: '0.75rem', borderRadius: '0.5rem',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
                border: theme === 'light' ? '1px solid var(--color-cyan)' : '1px solid var(--border-color)',
                backgroundColor: theme === 'light' ? 'rgba(6, 182, 212, 0.1)' : 'transparent',
                color: theme === 'light' ? 'var(--color-cyan)' : 'var(--text-main)',
                cursor: 'pointer', transition: 'all 0.2s'
              }}
            >
              <FiSun /> {dict.light}
            </button>
          </div>
        </div>

        {/* Language Setting */}
        <div style={{ marginBottom: '2rem' }}>
          <label style={{ display: 'block', marginBottom: '0.75rem', color: 'var(--text-muted)', fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '1px' }}>
            {dict.language}
          </label>
          <div style={{ display: 'flex', gap: '1rem' }}>
            <button
              onClick={() => setLanguage('en')}
              style={{
                flex: 1, padding: '0.75rem', borderRadius: '0.5rem',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
                border: language === 'en' ? '1px solid var(--color-cyan)' : '1px solid var(--border-color)',
                backgroundColor: language === 'en' ? 'rgba(6, 182, 212, 0.1)' : 'transparent',
                color: language === 'en' ? 'var(--color-cyan)' : 'var(--text-main)',
                cursor: 'pointer', transition: 'all 0.2s'
              }}
            >
              <span style={{ fontSize: '1.2rem', lineHeight: 1 }}>🇬🇧</span> {dict.english}
            </button>
            <button
              onClick={() => setLanguage('cs')}
              style={{
                flex: 1, padding: '0.75rem', borderRadius: '0.5rem',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
                border: language === 'cs' ? '1px solid var(--color-cyan)' : '1px solid var(--border-color)',
                backgroundColor: language === 'cs' ? 'rgba(6, 182, 212, 0.1)' : 'transparent',
                color: language === 'cs' ? 'var(--color-cyan)' : 'var(--text-main)',
                cursor: 'pointer', transition: 'all 0.2s'
              }}
            >
              <span style={{ fontSize: '1.2rem', lineHeight: 1 }}>🇨🇿</span> {dict.czech}
            </button>
          </div>
        </div>

        {/* Wind Units Setting */}
        <div style={{ marginBottom: '2rem' }}>
          <label style={{ display: 'block', marginBottom: '0.75rem', color: 'var(--text-muted)', fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '1px' }}>
            {dict.windUnits}
          </label>
          <div style={{ display: 'flex', gap: '1rem' }}>
            <button
              onClick={() => setWindUnit('kmh')}
              style={{
                flex: 1, padding: '0.75rem', borderRadius: '0.5rem',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
                border: windUnit === 'kmh' ? '1px solid var(--color-cyan)' : '1px solid var(--border-color)',
                backgroundColor: windUnit === 'kmh' ? 'rgba(6, 182, 212, 0.1)' : 'transparent',
                color: windUnit === 'kmh' ? 'var(--color-cyan)' : 'var(--text-main)',
                cursor: 'pointer', transition: 'all 0.2s'
              }}
            >
              <FiWind /> {dict.windUnitKmh}
            </button>
            <button
              onClick={() => setWindUnit('ms')}
              style={{
                flex: 1, padding: '0.75rem', borderRadius: '0.5rem',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
                border: windUnit === 'ms' ? '1px solid var(--color-cyan)' : '1px solid var(--border-color)',
                backgroundColor: windUnit === 'ms' ? 'rgba(6, 182, 212, 0.1)' : 'transparent',
                color: windUnit === 'ms' ? 'var(--color-cyan)' : 'var(--text-main)',
                cursor: 'pointer', transition: 'all 0.2s'
              }}
            >
              <FiWind /> {dict.windUnitMs}
            </button>
          </div>
        </div>

        {/* Contact */}
        <div style={{ marginBottom: '2rem' }}>
          <label style={{ display: 'block', marginBottom: '0.75rem', color: 'var(--text-muted)', fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '1px' }}>
            {dict.contact}
          </label>
          <a
            href="mailto:info@hladinator.cz"
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: '0.5rem',
              color: 'var(--color-cyan)',
              fontSize: '0.95rem',
              textDecoration: 'none',
              fontWeight: 500,
              opacity: 0.9,
              transition: 'opacity 0.2s'
            }}
            onMouseOver={(e) => e.currentTarget.style.opacity = '1'}
            onMouseOut={(e) => e.currentTarget.style.opacity = '0.9'}
          >
            ✉ info@hladinator.cz
          </a>
        </div>

        {/* Buy me a coffee */}
        <div style={{ borderTop: '1px solid var(--border-color)', paddingTop: '1.5rem', textAlign: 'center' }}>
          <a
            href="https://buymeacoffee.com/"
            target="_blank"
            rel="noreferrer"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: '0.5rem',
              padding: '0.75rem 1.5rem', borderRadius: '2rem',
              backgroundColor: '#FFDD00', color: '#000000', fontWeight: 'bold',
              textDecoration: 'none', transition: 'transform 0.2s'
            }}
            onMouseOver={(e) => e.currentTarget.style.transform = 'scale(1.05)'}
            onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}
          >
            <FiCoffee size={20} />
            {dict.buyCoffee}
          </a>
        </div>

      </div>
    </div>
  );
};

export default SettingsModal;