import { useState, useEffect } from 'react';
import { type Language, t } from '../translations';
import { TbSwimming, TbSailboat } from 'react-icons/tb';

interface Props {
  language: Language;
  setLanguage: (lang: Language) => void;
}

export const DisclaimerModal = ({ language, setLanguage }: Props) => {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const isAccepted = localStorage.getItem('hladinator_disclaimer_accepted');
    if (!isAccepted) {
      setShow(true);
    }
  }, []);

  const handleAccept = () => {
    localStorage.setItem('hladinator_disclaimer_accepted', 'true');
    setShow(false);
  };

  if (!show) return null;

  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
      backgroundColor: 'rgba(0,0,0,0.8)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      zIndex: 999999, padding: '1.5rem', backdropFilter: 'blur(4px)'
    }}>
      <div style={{
        backgroundColor: 'var(--bg-card)',
        borderRadius: '12px',
        padding: '2rem',
        maxWidth: '550px',
        width: '100%',
        boxShadow: '0 10px 30px rgba(0,0,0,0.5)',
        display: 'flex', flexDirection: 'column', gap: '1.5rem',
        border: '1px solid var(--border-color)',
        color: 'var(--text-main)',
        maxHeight: '90vh',
        overflowY: 'auto'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
          <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', margin: 0, color: 'var(--color-cyan)' }}>
            {t[language].disclaimer.title}
          </h2>
          <div style={{ display: 'flex', gap: '0.25rem', backgroundColor: 'rgba(0,0,0,0.2)', padding: '4px', borderRadius: '8px' }}>
            <button 
              onClick={() => setLanguage('cs')}
              style={{ background: language === 'cs' ? 'var(--color-cyan)' : 'transparent', color: language === 'cs' ? '#fff' : 'var(--text-muted)', border: 'none', padding: '4px 8px', borderRadius: '4px', cursor: 'pointer', fontWeight: 'bold', transition: '0.2s' }}
            >
              CS
            </button>
            <button 
              onClick={() => setLanguage('en')}
              style={{ background: language === 'en' ? 'var(--color-cyan)' : 'transparent', color: language === 'en' ? '#fff' : 'var(--text-muted)', border: 'none', padding: '4px 8px', borderRadius: '4px', cursor: 'pointer', fontWeight: 'bold', transition: '0.2s' }}
            >
              EN
            </button>
          </div>
        </div>
        
        <p style={{ margin: 0, lineHeight: 1.5 }}>
          {t[language].disclaimer.text1}
        </p>
        <p style={{ margin: 0, lineHeight: 1.5, color: 'var(--text-muted)' }}>
          {t[language].disclaimer.text2}
        </p>

        <div style={{
          marginTop: '0.5rem', padding: '1rem',
          backgroundColor: 'rgba(255,255,255,0.03)',
          borderRadius: '8px', display: 'flex', flexDirection: 'column', gap: '1rem'
        }}>
          <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
            <div style={{ display: 'flex', gap: '0.25rem', marginTop: '0.25rem' }}>
              <TbSwimming size={24} color="var(--color-green)" />
              <TbSailboat size={24} color="var(--color-green)" />
            </div>
            <div style={{ fontSize: '0.9rem', color: 'var(--text-muted)', lineHeight: 1.4 }}>
              <div style={{ color: 'var(--text-main)', fontWeight: 'bold', marginBottom: '0.2rem' }}>{language === 'cs' ? 'Zelené ikony (Povoleno)' : 'Green icons (Allowed)'}</div>
              <ul style={{ margin: 0, paddingLeft: '1.2rem' }}>
                <li>{t[language].disclaimer.swimDesc}</li>
                <li>{t[language].disclaimer.sailDesc}</li>
              </ul>
            </div>
          </div>
          
          <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
            <div style={{ display: 'flex', gap: '0.25rem', marginTop: '0.25rem' }}>
              <TbSwimming size={24} color="var(--color-red)" />
              <TbSailboat size={24} color="var(--color-red)" />
            </div>
            <div style={{ fontSize: '0.9rem', color: 'var(--text-muted)', lineHeight: 1.4 }}>
              <div style={{ color: 'var(--text-main)', fontWeight: 'bold', marginBottom: '0.2rem' }}>{language === 'cs' ? 'Červené ikony (Zakázáno)' : 'Red icons (Forbidden)'}</div>
              {t[language].disclaimer.forbiddenDesc}
            </div>
          </div>
        </div>

        <button 
          onClick={handleAccept}
          style={{
            marginTop: '1rem',
            padding: '1rem',
            backgroundColor: 'var(--color-cyan)',
            color: '#fff',
            border: 'none',
            borderRadius: '8px',
            fontSize: '1.1rem',
            fontWeight: 'bold',
            cursor: 'pointer',
            transition: 'opacity 0.2s'
          }}
          onMouseOver={(e) => e.currentTarget.style.opacity = '0.9'}
          onMouseOut={(e) => e.currentTarget.style.opacity = '1'}
        >
          {t[language].disclaimer.button}
        </button>
      </div>
    </div>
  );
};