import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';

const Footer = ({ variant = 'full', className = '' }) => {
  const { t } = useTranslation();
  const [showPrivacyModal, setShowPrivacyModal] = useState(false);
  const [showTermsModal, setShowTermsModal] = useState(false);
  const currentYear = new Date().getFullYear();

  // Variante compacta para páginas de login/registro
  if (variant === 'compact') {
    return (
      <footer className={`footer-compact ${className}`}>
        <div className="footer-compact-content">
          <p className="mb-1">© {currentYear} WebMoney - ConneXiFly</p>
          <div className="footer-links-compact">
            <button 
              type="button"
              className="footer-link-btn" 
              onClick={() => setShowPrivacyModal(true)}
            >
              {t('footer.privacy')}
            </button>
            <span className="footer-separator">|</span>
            <button 
              type="button"
              className="footer-link-btn" 
              onClick={() => setShowTermsModal(true)}
            >
              {t('footer.terms')}
            </button>
          </div>
        </div>

        {/* Modais */}
        <PrivacyModal show={showPrivacyModal} onClose={() => setShowPrivacyModal(false)} />
        <TermsModal show={showTermsModal} onClose={() => setShowTermsModal(false)} />
      </footer>
    );
  }

  // Variante full para o layout principal
  return (
    <footer className={`app-footer ${className}`}>
      <div className="footer-content">
        <div className="footer-left">
          <span className="footer-copyright">
            © {currentYear} WebMoney - ConneXiFly
          </span>
          <span className="footer-separator d-none d-md-inline">|</span>
          <span className="footer-tagline d-none d-md-inline">
            {t('footer.tagline')}
          </span>
        </div>
        
        <div className="footer-right">
          <button 
            type="button"
            className="footer-link-btn" 
            onClick={() => setShowPrivacyModal(true)}
          >
            <i className="bi bi-shield-check me-1"></i>
            {t('footer.privacy')}
          </button>
          <button 
            type="button"
            className="footer-link-btn" 
            onClick={() => setShowTermsModal(true)}
          >
            <i className="bi bi-file-text me-1"></i>
            {t('footer.terms')}
          </button>
        </div>
      </div>

      {/* Modais */}
      <PrivacyModal show={showPrivacyModal} onClose={() => setShowPrivacyModal(false)} />
      <TermsModal show={showTermsModal} onClose={() => setShowTermsModal(false)} />
    </footer>
  );
};

// Modal de Política de Privacidade (LGPD/GDPR)
const PrivacyModal = ({ show, onClose }) => {
  const { t } = useTranslation();
  
  if (!show) return null;

  return (
    <div className="modal fade show d-block" tabIndex="-1" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
      <div className="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
        <div className="modal-content bg-dark text-light">
          <div className="modal-header border-secondary">
            <h5 className="modal-title">
              <i className="bi bi-shield-check me-2 text-success"></i>
              {t('footer.privacyTitle')}
            </h5>
            <button type="button" className="btn-close btn-close-white" onClick={onClose}></button>
          </div>
          <div className="modal-body privacy-content">
            <div className="alert alert-info bg-info bg-opacity-10 border-info mb-4">
              <i className="bi bi-info-circle me-2"></i>
              <strong>{t('footer.lastUpdate')}:</strong> 10/12/2025
            </div>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-1-circle me-2"></i>
                {t('privacy.introduction.title')}
              </h6>
              <p>{t('privacy.introduction.text')}</p>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-2-circle me-2"></i>
                {t('privacy.dataCollected.title')}
              </h6>
              <p>{t('privacy.dataCollected.intro')}</p>
              <ul className="list-unstyled ms-3">
                <li><i className="bi bi-check-circle text-success me-2"></i>{t('privacy.dataCollected.item1')}</li>
                <li><i className="bi bi-check-circle text-success me-2"></i>{t('privacy.dataCollected.item2')}</li>
                <li><i className="bi bi-check-circle text-success me-2"></i>{t('privacy.dataCollected.item3')}</li>
                <li><i className="bi bi-check-circle text-success me-2"></i>{t('privacy.dataCollected.item4')}</li>
              </ul>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-3-circle me-2"></i>
                {t('privacy.purpose.title')}
              </h6>
              <ul className="list-unstyled ms-3">
                <li><i className="bi bi-arrow-right text-primary me-2"></i>{t('privacy.purpose.item1')}</li>
                <li><i className="bi bi-arrow-right text-primary me-2"></i>{t('privacy.purpose.item2')}</li>
                <li><i className="bi bi-arrow-right text-primary me-2"></i>{t('privacy.purpose.item3')}</li>
              </ul>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-4-circle me-2"></i>
                {t('privacy.legalBasis.title')}
              </h6>
              <p>{t('privacy.legalBasis.text')}</p>
              <div className="row g-2 mt-2">
                <div className="col-md-6">
                  <div className="card bg-secondary bg-opacity-25 border-0">
                    <div className="card-body py-2">
                      <small><strong>LGPD:</strong> {t('privacy.legalBasis.lgpd')}</small>
                    </div>
                  </div>
                </div>
                <div className="col-md-6">
                  <div className="card bg-secondary bg-opacity-25 border-0">
                    <div className="card-body py-2">
                      <small><strong>GDPR:</strong> {t('privacy.legalBasis.gdpr')}</small>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-5-circle me-2"></i>
                {t('privacy.rights.title')}
              </h6>
              <p>{t('privacy.rights.intro')}</p>
              <div className="row g-2">
                <div className="col-sm-6">
                  <div className="d-flex align-items-center p-2 rounded bg-secondary bg-opacity-10">
                    <i className="bi bi-eye text-info me-2"></i>
                    <small>{t('privacy.rights.access')}</small>
                  </div>
                </div>
                <div className="col-sm-6">
                  <div className="d-flex align-items-center p-2 rounded bg-secondary bg-opacity-10">
                    <i className="bi bi-pencil text-warning me-2"></i>
                    <small>{t('privacy.rights.correction')}</small>
                  </div>
                </div>
                <div className="col-sm-6">
                  <div className="d-flex align-items-center p-2 rounded bg-secondary bg-opacity-10">
                    <i className="bi bi-trash text-danger me-2"></i>
                    <small>{t('privacy.rights.deletion')}</small>
                  </div>
                </div>
                <div className="col-sm-6">
                  <div className="d-flex align-items-center p-2 rounded bg-secondary bg-opacity-10">
                    <i className="bi bi-download text-success me-2"></i>
                    <small>{t('privacy.rights.portability')}</small>
                  </div>
                </div>
              </div>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-6-circle me-2"></i>
                {t('privacy.security.title')}
              </h6>
              <p>{t('privacy.security.text')}</p>
              <ul className="list-unstyled ms-3">
                <li><i className="bi bi-lock text-success me-2"></i>{t('privacy.security.item1')}</li>
                <li><i className="bi bi-server text-success me-2"></i>{t('privacy.security.item2')}</li>
                <li><i className="bi bi-key text-success me-2"></i>{t('privacy.security.item3')}</li>
              </ul>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-7-circle me-2"></i>
                {t('privacy.cookies.title')}
              </h6>
              <p>{t('privacy.cookies.text')}</p>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-8-circle me-2"></i>
                {t('privacy.contact.title')}
              </h6>
              <p>{t('privacy.contact.text')}</p>
              <div className="card bg-primary bg-opacity-10 border-primary">
                <div className="card-body py-2">
                  <i className="bi bi-envelope me-2"></i>
                  <a href="mailto:privacidade@webmoney.cnxifly.com" className="text-primary">
                    privacidade@webmoney.cnxifly.com
                  </a>
                </div>
              </div>
            </section>
          </div>
          <div className="modal-footer border-secondary">
            <button type="button" className="btn btn-primary" onClick={onClose}>
              {t('common.close')}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

// Modal de Termos de Uso
const TermsModal = ({ show, onClose }) => {
  const { t } = useTranslation();
  
  if (!show) return null;

  return (
    <div className="modal fade show d-block" tabIndex="-1" style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}>
      <div className="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
        <div className="modal-content bg-dark text-light">
          <div className="modal-header border-secondary">
            <h5 className="modal-title">
              <i className="bi bi-file-text me-2 text-primary"></i>
              {t('footer.termsTitle')}
            </h5>
            <button type="button" className="btn-close btn-close-white" onClick={onClose}></button>
          </div>
          <div className="modal-body terms-content">
            <div className="alert alert-info bg-info bg-opacity-10 border-info mb-4">
              <i className="bi bi-info-circle me-2"></i>
              <strong>{t('footer.lastUpdate')}:</strong> 10/12/2025
            </div>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-1-circle me-2"></i>
                {t('terms.acceptance.title')}
              </h6>
              <p>{t('terms.acceptance.text')}</p>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-2-circle me-2"></i>
                {t('terms.service.title')}
              </h6>
              <p>{t('terms.service.text')}</p>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-3-circle me-2"></i>
                {t('terms.account.title')}
              </h6>
              <ul className="list-unstyled ms-3">
                <li><i className="bi bi-check text-success me-2"></i>{t('terms.account.item1')}</li>
                <li><i className="bi bi-check text-success me-2"></i>{t('terms.account.item2')}</li>
                <li><i className="bi bi-check text-success me-2"></i>{t('terms.account.item3')}</li>
              </ul>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-4-circle me-2"></i>
                {t('terms.prohibited.title')}
              </h6>
              <ul className="list-unstyled ms-3">
                <li><i className="bi bi-x-circle text-danger me-2"></i>{t('terms.prohibited.item1')}</li>
                <li><i className="bi bi-x-circle text-danger me-2"></i>{t('terms.prohibited.item2')}</li>
                <li><i className="bi bi-x-circle text-danger me-2"></i>{t('terms.prohibited.item3')}</li>
              </ul>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-5-circle me-2"></i>
                {t('terms.intellectual.title')}
              </h6>
              <p>{t('terms.intellectual.text')}</p>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-6-circle me-2"></i>
                {t('terms.limitation.title')}
              </h6>
              <p>{t('terms.limitation.text')}</p>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-7-circle me-2"></i>
                {t('terms.termination.title')}
              </h6>
              <p>{t('terms.termination.text')}</p>
            </section>

            <section className="mb-4">
              <h6 className="text-primary fw-bold">
                <i className="bi bi-8-circle me-2"></i>
                {t('terms.jurisdiction.title')}
              </h6>
              <p>{t('terms.jurisdiction.text')}</p>
            </section>
          </div>
          <div className="modal-footer border-secondary">
            <button type="button" className="btn btn-primary" onClick={onClose}>
              {t('common.close')}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Footer;
