import React, { useState, useEffect } from 'react';

const CookieBanner = () => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const consent = localStorage.getItem('ruuapi_cookie_consent');
    if (!consent) {
      setIsVisible(true);
    }
  }, []);

  const handleAccept = () => {
    localStorage.setItem('ruuapi_cookie_consent', 'accepted');
    setIsVisible(false);
    if (window.ruuapiAnalytics && typeof window.ruuapiAnalytics.init === 'function') {
      window.ruuapiAnalytics.init();
    }
  };

  const handleReject = () => {
    localStorage.setItem('ruuapi_cookie_consent', 'rejected');
    setIsVisible(false);
  };

  if (!isVisible) return null;

  const t = (key, fallback) => {
    if (window.i18n && typeof window.i18n.t === 'function') {
      const translation = window.i18n.t(key);
      if (translation && translation !== key) return translation;
    }
    return fallback;
  };

  // TODO: de/fr/es/pt/ar translations — currently EN fallback
  const messageEn = 'We use cookies for analytics to improve your experience.';
  const messageTr = 'Deneyiminizi geliştirmek için analitik amaçlı çerez kullanıyoruz.';
  const isTr = window.navigator?.language?.startsWith('tr');

  return (
    <div style={{
      position: 'fixed',
      bottom: 0,
      left: 0,
      width: '100%',
      backgroundColor: '#1a1a2e',
      padding: '16px',
      boxSizing: 'border-box',
      display: 'flex',
      justifyContent: 'center',
      zIndex: 9999,
      fontFamily: 'sans-serif',
    }}>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        flexWrap: 'wrap',
        maxWidth: '1200px',
        width: '100%',
        gap: '16px',
      }}>
        <p style={{ color: '#fff', margin: 0, fontSize: '14px', flex: '1 1 300px' }}>
          {t('cookie.banner.message', isTr ? messageTr : messageEn)}
        </p>
        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
          <button
            onClick={handleReject}
            style={{
              backgroundColor: 'transparent',
              color: '#fff',
              border: '1px solid #fff',
              padding: '8px 16px',
              borderRadius: '4px',
              cursor: 'pointer',
            }}
          >
            {t('cookie.banner.reject', isTr ? 'Reddet' : 'Reject')}
          </button>
          <button
            onClick={handleAccept}
            style={{
              backgroundColor: '#f97316',
              color: '#fff',
              border: 'none',
              padding: '8px 16px',
              borderRadius: '4px',
              fontWeight: 'bold',
              cursor: 'pointer',
            }}
          >
            {t('cookie.banner.accept', isTr ? 'Kabul Et' : 'Accept')}
          </button>
          <a
            href="https://ruuapi.com/privacy"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              color: '#f97316',
              textDecoration: 'none',
              display: 'flex',
              alignItems: 'center',
              padding: '0 8px',
            }}
          >
            {t('cookie.banner.details', isTr ? 'Detay' : 'Details')}
          </a>
        </div>
      </div>
    </div>
  );
};

export default CookieBanner;