import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from '../Button';
import { X, Cookie, Settings } from 'lucide-react';
import { clsx } from 'clsx';
import { CookiePreferences, getCookieConsent, saveCookieConsent } from './cookieUtils';

interface CookieBannerProps {
  onPreferencesClick?: () => void;
}

export const CookieBanner: React.FC<CookieBannerProps> = ({ onPreferencesClick }) => {
  const { t } = useTranslation();
  const [isVisible, setIsVisible] = useState(false);
  const [isMinimized, setIsMinimized] = useState(false);

  useEffect(() => {
    const consent = getCookieConsent();
    if (!consent) {
      setIsVisible(true);
    }
  }, []);

  const handleAcceptAll = () => {
    const preferences: CookiePreferences = {
      essential: true,
      analytics: true,
      marketing: true,
      preferences: true,
      timestamp: new Date().toISOString(),
      version: '1.0'
    };
    saveCookieConsent(preferences);
    setIsVisible(false);
  };

  const handleAcceptEssential = () => {
    const preferences: CookiePreferences = {
      essential: true,
      analytics: false,
      marketing: false,
      preferences: false,
      timestamp: new Date().toISOString(),
      version: '1.0'
    };
    saveCookieConsent(preferences);
    setIsVisible(false);
  };

  const handleCustomize = () => {
    if (onPreferencesClick) {
      onPreferencesClick();
    }
    setIsVisible(false);
  };

  if (!isVisible) return null;

  return (
    <div
      className={clsx(
        'fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg transition-all duration-300',
        isMinimized ? 'h-16' : 'h-auto'
      )}
      role="dialog"
      aria-label={t('common:cookie.banner_title', 'Cookie Consent')}
    >
      <div className="max-w-7xl mx-auto px-4 py-4">
        {isMinimized ? (
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Cookie className="w-5 h-5 text-amber-600" />
              <p className="text-sm text-gray-700 dark:text-gray-300">
                {t('common:cookie.minimized_message', 'We use cookies to enhance your experience.')}
              </p>
            </div>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsMinimized(false)}
            >
              {t('common:cookie.show_details', 'Show Details')}
            </Button>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="flex items-start justify-between gap-4">
              <div className="flex items-start gap-3 flex-1">
                <Cookie className="w-6 h-6 text-amber-600 mt-1 flex-shrink-0" />
                <div className="flex-1">
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                    {t('common:cookie.banner_title', 'We Value Your Privacy')}
                  </h3>
                  <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
                    {t(
                      'common:cookie.banner_description',
                      'We use cookies and similar technologies to provide, protect, and improve our services. Some cookies are essential for the site to function, while others help us understand how you use our services and provide personalized features.'
                    )}
                  </p>
                  <p className="text-sm text-gray-600 dark:text-gray-400 mt-2">
                    {t(
                      'common:cookie.banner_description_2',
                      'By clicking "Accept All", you consent to our use of all cookies. You can customize your preferences or accept only essential cookies.'
                    )}
                  </p>
                  <div className="mt-3">
                    <a
                      href="/cookies"
                      className="text-sm text-primary-600 hover:text-primary-700 underline"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {t('common:cookie.learn_more', 'Learn more about cookies')}
                    </a>
                    {' | '}
                    <a
                      href="/privacy"
                      className="text-sm text-primary-600 hover:text-primary-700 underline"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {t('common:cookie.privacy_policy', 'Privacy Policy')}
                    </a>
                  </div>
                </div>
              </div>
              <button
                onClick={() => setIsMinimized(true)}
                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                aria-label={t('common:cookie.minimize', 'Minimize')}
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="flex flex-col sm:flex-row gap-3 pt-2">
              <Button
                onClick={handleAcceptAll}
                variant="primary"
                className="flex-1 sm:flex-none"
              >
                {t('common:cookie.accept_all', 'Accept All')}
              </Button>
              <Button
                onClick={handleAcceptEssential}
                variant="outline"
                className="flex-1 sm:flex-none"
              >
                {t('common:cookie.accept_essential', 'Essential Only')}
              </Button>
              <Button
                onClick={handleCustomize}
                variant="ghost"
                className="flex-1 sm:flex-none"
              >
                <Settings className="w-4 h-4 mr-2" />
                {t('common:cookie.customize', 'Customize')}
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default CookieBanner;
