'use client';

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useCookieConsent, CookiePreferences } from './CookieConsentContext';

// Cookie type definitions
interface CookieType {
  id: keyof CookiePreferences;
  name: string;
  description: string;
  required: boolean;
  icon: string;
}

const cookieTypes: CookieType[] = [
  {
    id: 'necessary',
    name: 'Necessary Cookies',
    description: 'Essential cookies required for the website to function properly. These cannot be disabled.',
    required: true,
    icon: 'fas fa-shield-alt',
  },
  {
    id: 'functional',
    name: 'Functional Cookies',
    description: 'These cookies enable enhanced functionality and personalization, such as remembering your preferences.',
    required: false,
    icon: 'fas fa-cogs',
  },
];

// Main Cookie Consent Banner Component
export const CookieConsentBanner: React.FC = () => {
  const { state, config, acceptAll, acceptNecessary, showSettings } = useCookieConsent();
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (state.showBanner) {
      // Small delay to ensure smooth animation
      const timer = setTimeout(() => setIsVisible(true), 100);
      return () => clearTimeout(timer);
    } else {
      setIsVisible(false);
    }
  }, [state.showBanner]);

  if (!state.showBanner || !isVisible) return null;

  return (
    <AnimatePresence>
      {/* Fullscreen overlay to center the banner */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.2 }}
        style={{
          position: 'fixed',
          inset: 0,
          zIndex: 10000,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: 'rgba(17, 24, 39, 0.45)',
          backdropFilter: 'blur(4px)',
        }}
      >
        {/* Centered enterprise-style card */}
        <motion.div
          initial={{ opacity: 0, scale: 0.96, y: 8 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.98, y: 8 }}
          transition={{ duration: 0.25, ease: 'easeOut' }}
          className="cookie-consent-banner"
          style={{
            width: 'min(680px, 92vw)',
            background: '#0b1220',
            color: '#e5e7eb',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 16,
            boxShadow: '0 25px 70px rgba(0,0,0,0.45)',
            padding: 24,
          }}
        >
          <div className="cookie-consent-banner__container" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="cookie-consent-banner__content" style={{ display: 'flex', gap: 16 }}>
              <div
                className="cookie-consent-banner__icon"
                style={{
                  width: 48,
                  height: 48,
                  borderRadius: 12,
                  display: 'grid',
                  placeItems: 'center',
                  background: 'linear-gradient(135deg, rgba(199, 213, 236, 0.39), rgba(147,197,253,0.08))',
                  color: '#93c5fd',
                  flex: '0 0 auto',
                }}
              >
                <i className="fas fa-cookie-bite"></i>
              </div>
              <div className="cookie-consent-banner__text" style={{ display: 'grid', gap: 6 }}>
                <h3 style={{ margin: 0, fontSize: 20, fontWeight: 700 }}>Cookie Preferences</h3>
                <p style={{ margin: 0, lineHeight: 1.6, color: '#ffffff' }}>
                  We use only essential functional cookies to ensure our website works properly. We do not collect
                  personal data or use tracking cookies. Your privacy is important to us.
                </p>
                {config.showPrivacyNotice && (
                  <div className="cookie-consent-banner__links" style={{ marginTop: 6 }}>
                    <a
                      href={config.privacyPolicyUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      style={{ color: '#93c5fd', textDecoration: 'underline' }}
                    >
                      Privacy Policy
                    </a>
                  </div>
                )}
              </div>
            </div>
            <div
              className="cookie-consent-banner__actions"
              style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, marginTop: 8 }}
            >
              <button
                type="button"
                className="cookie-consent-banner__btn cookie-consent-banner__btn--secondary"
                onClick={showSettings}
                style={{
                  padding: '10px 14px',
                  borderRadius: 10,
                  border: '1px solid rgba(255,255,255,0.12)',
                  background: 'transparent',
                  color: '#e5e7eb',
                  fontWeight: 600,
                }}
              >
                <i className="fas fa-cog" style={{ marginRight: 8 }}></i>
                Settings
              </button>
              <button
                type="button"
                className="cookie-consent-banner__btn cookie-consent-banner__btn--primary"
                onClick={acceptNecessary}
                style={{
                  padding: '10px 14px',
                  borderRadius: 10,
                  border: '1px solid rgba(59,130,246,0.35)',
                  background: 'linear-gradient(135deg, rgba(59,130,246,0.25), rgba(37,99,235,0.35))',
                  color: '#ffffff',
                  fontWeight: 700,
                }}
              >
                <i className="fas fa-check" style={{ marginRight: 8 }}></i>
                Accept Functional Only
              </button>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
};

// Cookie Settings Modal Component
export const CookieSettingsModal: React.FC = () => {
  const { state, config, hideSettings, acceptSelected, updatePreferences, withdrawConsent, exportConsentData } = useCookieConsent();
  const [tempPreferences, setTempPreferences] = useState<CookiePreferences>(state.preferences);

  useEffect(() => {
    setTempPreferences(state.preferences);
  }, [state.preferences]);

  const handlePreferenceChange = (type: keyof CookiePreferences, value: boolean) => {
    if (type === 'necessary') return; // Cannot change necessary cookies
    
    setTempPreferences(prev => ({
      ...prev,
      [type]: value,
    }));
  };

  const handleSavePreferences = () => {
    acceptSelected(tempPreferences);
  };

  const handleAcceptAll = () => {
    const allAccepted: CookiePreferences = {
      necessary: true,
      functional: true,
    };
    acceptSelected(allAccepted);
  };

  if (!state.showSettings) return null;

  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.2 }}
        className="cookie-settings-overlay"
        onClick={hideSettings}
      >
        <motion.div
          initial={{ scale: 0.9, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          exit={{ scale: 0.9, opacity: 0 }}
          transition={{ duration: 0.2 }}
          className="cookie-settings-modal"
          onClick={(e) => e.stopPropagation()}
        >
          <div className="cookie-settings-modal__header">
            <div className="cookie-settings-modal__header-content">
              <h2>Cookie Preferences</h2>
              <p className="cookie-settings-modal__version">v{config.version}</p>
            </div>
            <button
              type="button"
              className="cookie-settings-modal__close"
              onClick={hideSettings}
              aria-label="Close settings"
            >
              <i className="fas fa-times"></i>
            </button>
          </div>

          <div className="cookie-settings-modal__content">
            <div className="cookie-settings-modal__description">
              <p>
                We respect your privacy and only use essential functional cookies. 
                You can choose which types of cookies to allow below.
              </p>
            </div>

            <div className="cookie-settings-modal__types">
              {cookieTypes.map((cookieType) => (
                <div
                  key={cookieType.id}
                  className={`cookie-settings-modal__type ${
                    cookieType.required ? 'cookie-settings-modal__type--required' : ''
                  }`}
                >
                  <div className="cookie-settings-modal__type-header">
                    <div className="cookie-settings-modal__type-info">
                      <i className={cookieType.icon}></i>
                      <div>
                        <h4>{cookieType.name}</h4>
                        <p>{cookieType.description}</p>
                      </div>
                    </div>
                    <div className="cookie-settings-modal__type-toggle">
                      <label className="cookie-toggle">
                        <input
                          type="checkbox"
                          checked={tempPreferences[cookieType.id]}
                          onChange={(e) => handlePreferenceChange(cookieType.id, e.target.checked)}
                          disabled={cookieType.required}
                        />
                        <span className="cookie-toggle__slider"></span>
                      </label>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="cookie-settings-modal__privacy">
              <h4>Privacy Information</h4>
              <ul>
                <li>We do not collect personal data without your explicit consent</li>
                <li>Functional cookies are used only to maintain website functionality</li>
                <li>We do not use tracking, analytics, or marketing cookies</li>
                <li>You can change your preferences at any time</li>
                <li>Data retention period: {config.retentionPeriod} days</li>
                <li>Contact: <a href={`mailto:${config.dataControllerEmail}`}>{config.dataControllerEmail}</a></li>
              </ul>
            </div>

            {config.enableDetailedSettings && (
              <div className="cookie-settings-modal__enterprise">
                <h4>Enterprise Features</h4>
                <div className="cookie-settings-modal__enterprise-actions">
                  <button
                    type="button"
                    className="cookie-settings-modal__btn cookie-settings-modal__btn--outline"
                    onClick={() => {
                      const data = exportConsentData();
                      const blob = new Blob([data], { type: 'application/json' });
                      const url = URL.createObjectURL(blob);
                      const a = document.createElement('a');
                      a.href = url;
                      a.download = `cookie-consent-data-${new Date().toISOString().split('T')[0]}.json`;
                      a.click();
                      URL.revokeObjectURL(url);
                    }}
                  >
                    <i className="fas fa-download"></i>
                    Export Data
                  </button>
                  <button
                    type="button"
                    className="cookie-settings-modal__btn cookie-settings-modal__btn--danger"
                    onClick={() => {
                      if (confirm('Are you sure you want to withdraw your consent? This will reset all preferences.')) {
                        withdrawConsent();
                      }
                    }}
                  >
                    <i className="fas fa-user-times"></i>
                    Withdraw Consent
                  </button>
                </div>
              </div>
            )}
          </div>

          <div className="cookie-settings-modal__footer">
            <button
              type="button"
              className="cookie-settings-modal__btn cookie-settings-modal__btn--secondary"
              onClick={hideSettings}
            >
              Cancel
            </button>
            <button
              type="button"
              className="cookie-settings-modal__btn cookie-settings-modal__btn--primary"
              onClick={handleSavePreferences}
            >
              Save Preferences
            </button>
          </div>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
};

// Main Cookie Consent Component that combines both banner and modal
export const CookieConsent: React.FC = () => {
  return (
    <>
      <CookieConsentBanner />
      <CookieSettingsModal />
    </>
  );
};

// Cookie Preferences Display Component (for footer or privacy page)
export const CookiePreferencesDisplay: React.FC = () => {
  const { state, showSettings, resetConsent } = useCookieConsent();

  return (
    <div className="cookie-preferences-display">
      <h3>Cookie Preferences</h3>
      <div className="cookie-preferences-display__status">
        <p>
          <strong>Status:</strong> {state.hasConsented ? 'Consent Given' : 'No Consent'}
        </p>
        <p>
          <strong>Functional Cookies:</strong> {state.preferences.functional ? 'Enabled' : 'Disabled'}
        </p>
      </div>
      <div className="cookie-preferences-display__actions">
        <button
          type="button"
          className="cookie-preferences-display__btn"
          onClick={showSettings}
        >
          Update Preferences
        </button>
        <button
          type="button"
          className="cookie-preferences-display__btn cookie-preferences-display__btn--reset"
          onClick={resetConsent}
        >
          Reset Consent
        </button>
      </div>
    </div>
  );
};