import React, { useState } from 'react';
import { useTranslation } from '../i18n';
import './CookieBanner.css';

function CookieBanner({ onConsent, onPrivacyClick }) {
  const { t } = useTranslation();
  const [categories, setCategories] = useState({
    analytics: false,
    preferences: false,
    health_data: false,
  });

  function toggleCategory(cat) {
    setCategories(prev => ({ ...prev, [cat]: !prev[cat] }));
  }

  function handleAcceptAll() {
    onConsent({ essential: true, analytics: true, preferences: true, health_data: true });
  }

  function handleRejectOptional() {
    onConsent({ essential: true, analytics: false, preferences: false, health_data: false });
  }

  function handleSave() {
    onConsent({ essential: true, ...categories });
  }

  return (
    <div className="cookie-banner-overlay">
      <div className="cookie-banner">
        <h2 className="cookie-banner-title">{t('cookie_banner.title')}</h2>
        <p className="cookie-banner-desc">{t('cookie_banner.description')}</p>
        <div className="cookie-categories">
          <div className="cookie-category">
            <div className="cookie-category-info">
              <span className="cookie-category-name">{t('cookie_banner.category.essential')}</span>
              <span className="cookie-category-desc">{t('cookie_banner.category.essential_desc')}</span>
            </div>
            <div className="cookie-toggle cookie-toggle--locked">
              <span className="cookie-toggle-track"><span className="cookie-toggle-thumb" /></span>
            </div>
          </div>
          {['analytics', 'preferences', 'health_data'].map(cat => (
            <div className="cookie-category" key={cat}>
              <div className="cookie-category-info">
                <span className="cookie-category-name">{t(`cookie_banner.category.${cat}`)}</span>
                <span className="cookie-category-desc">{t(`cookie_banner.category.${cat}_desc`)}</span>
              </div>
              <button type="button" className={`cookie-toggle ${categories[cat] ? 'cookie-toggle--on' : ''}`} onClick={() => toggleCategory(cat)} aria-pressed={categories[cat]}>
                <span className="cookie-toggle-track"><span className="cookie-toggle-thumb" /></span>
              </button>
            </div>
          ))}
        </div>
        <div className="cookie-banner-actions">
          <button type="button" className="cookie-btn cookie-btn--primary" onClick={handleAcceptAll}>{t('cookie_banner.accept_all')}</button>
          <button type="button" className="cookie-btn cookie-btn--secondary" onClick={handleRejectOptional}>{t('cookie_banner.reject_optional')}</button>
          <button type="button" className="cookie-btn cookie-btn--tertiary" onClick={handleSave}>{t('cookie_banner.save')}</button>
        </div>
        <button type="button" className="cookie-more-info" onClick={onPrivacyClick}>{t('cookie_banner.more_info')} →</button>
      </div>
    </div>
  );
}

export default CookieBanner;