breakpilot-compliance/admin-compliance/components/sdk/CookieBannerOverlay.tsx

'use client'

import { useState, useEffect, useCallback, useMemo } from 'react'
import {
  CATEGORY_VENDORS, countNonEWRVendors, isEWR, isOutsideEWR,
  type VendorInfo,
} from './cookie-banner-vendors'

/**
 * CookieBannerOverlay — Cookie consent banner with Drittland-Schutz.
 *
 * Unique feature: Users can accept a category (e.g. Marketing) but block
 * all vendors that transfer data to non-EU countries. This means:
 * - Marketing = ON, Drittland-Schutz = ON → LinkedIn (EU) loads, Facebook (USA) does NOT
 * - The consent state records both category consent AND blocked vendors
 *
 * No other CMP offers per-vendor country-based blocking within accepted categories.
 */

const STORAGE_KEY = 'bp-sdk-cookie-consent'

interface ConsentState {
  necessary: boolean
  statistics: boolean
  marketing: boolean
  functional: boolean
  ewrOnly: boolean
  blockedVendors: string[]
  timestamp: string
}



export function CookieBannerOverlay() {
  const [isOpen, setIsOpen] = useState(false)
  const [showSettings, setShowSettings] = useState(false)
  const [consent, setConsent] = useState<ConsentState>({
    necessary: true,
    statistics: false,
    marketing: false,
    functional: false,
    ewrOnly: false,
    blockedVendors: [],
    timestamp: '',
  })

  const nonEWRCount = useMemo(() => countNonEWRVendors(), [])

  // Compute which vendors are actually blocked
  const blockedVendors = useMemo(() => {
    if (!consent.ewrOnly) return []
    const blocked: string[] = []
    for (const [key, cat] of Object.entries(CATEGORY_VENDORS)) {
      const catEnabled = key === 'necessary' || consent[key as keyof ConsentState]
      if (!catEnabled) continue
      for (const v of cat.vendors) {
        if (isOutsideEWR(v.country)) {
          blocked.push(v.name)
        }
      }
    }
    return blocked
  }, [consent])

  useEffect(() => {
    const stored = getStoredConsent()
    if (!stored) {
      setIsOpen(true)
    } else {
      setConsent(stored)
    }
  }, [])

  useEffect(() => {
    const handler = () => {
      setIsOpen(true)
      setShowSettings(true)
    }
    window.addEventListener('openCookieBanner', handler)
    return () => window.removeEventListener('openCookieBanner', handler)
  }, [])

  const saveConsent = useCallback((state: ConsentState) => {
    // Compute blocked vendors before saving
    const blocked: string[] = []
    if (state.ewrOnly) {
      for (const [key, cat] of Object.entries(CATEGORY_VENDORS)) {
        const catEnabled = key === 'necessary' || state[key as keyof ConsentState]
        if (!catEnabled) continue
        for (const v of cat.vendors) {
          if (isOutsideEWR(v.country)) blocked.push(v.name)
        }
      }
    }
    const withMeta = { ...state, blockedVendors: blocked, timestamp: new Date().toISOString() }
    localStorage.setItem(STORAGE_KEY, JSON.stringify(withMeta))
    setConsent(withMeta)
    setIsOpen(false)
    setShowSettings(false)
    window.dispatchEvent(new CustomEvent('sdkCookieConsentUpdated', { detail: withMeta }))
  }, [])

  const handleAcceptAll = () => {
    saveConsent({ ...consent, necessary: true, statistics: true, marketing: true, functional: true })
  }

  const handleRejectAll = () => {
    saveConsent({ ...consent, necessary: true, statistics: false, marketing: false, functional: false })
  }

  const handleSaveSettings = () => {
    saveConsent(consent)
  }

  if (!isOpen) return null

  return (
    <>
      <div
        className="fixed inset-0 bg-black/40 z-[9998] transition-opacity duration-300"
        onClick={() => {}}
      />

      <div className="fixed bottom-0 left-0 right-0 z-[9999] animate-in slide-in-from-bottom duration-300">
        <div className="max-w-3xl mx-auto m-4 bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden">
          {/* Header */}
          <div className="px-6 pt-6 pb-4">
            <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
              <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
              Cookie-Einstellungen
            </h2>
            <p className="text-sm text-gray-600 mt-2 leading-relaxed">
              Wir verwenden Cookies und aehnliche Technologien, um Ihnen die bestmoegliche Erfahrung zu bieten.
              Sie koennen Ihre Praeferenzen jederzeit aendern.
            </p>
            <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
              <a href="/sdk/einwilligungen/cookie-banner" className="hover:text-purple-600 underline">
                Datenschutzerklaerung
              </a>
              <span>|</span>
              <a href="/sdk/einwilligungen" className="hover:text-purple-600 underline">
                Impressum
              </a>
            </div>
          </div>

          {/* Settings */}
          {showSettings && (
            <div className="border-t border-gray-100">
              {/* === DRITTLAND-SCHUTZ === */}
              <div className="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-blue-100">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex items-start gap-3">
                    <div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center shrink-0 mt-0.5">
                      <svg className="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    </div>
                    <div>
                      <div className="text-sm font-semibold text-blue-900">
                        Nur EU/EWR-Anbieter
                      </div>
                      <p className="text-xs text-blue-700 mt-0.5 leading-relaxed">
                        Erlaubt nur Anbieter mit Sitz im Europaeischen Wirtschaftsraum (EWR) oder
                        der Schweiz. Anbieter ausserhalb werden blockiert — auch wenn Sie einer
                        Kategorie zustimmen. {nonEWRCount} Anbieter betroffen.
                      </p>
                      {consent.ewrOnly && blockedVendors.length > 0 && (
                        <div className="mt-2 flex flex-wrap gap-1">
                          {blockedVendors.map(name => (
                            <span key={name} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-100 text-red-700 text-[10px] font-medium">
                              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                              </svg>
                              {name}
                            </span>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                  <button
                    onClick={() => setConsent(prev => ({ ...prev, ewrOnly: !prev.ewrOnly }))}
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors shrink-0 mt-1 ${
                      consent.ewrOnly ? 'bg-blue-600' : 'bg-gray-200'
                    } cursor-pointer`}
                  >
                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
                      consent.ewrOnly ? 'translate-x-6' : 'translate-x-1'
                    }`} />
                  </button>
                </div>
              </div>

              {/* Category Sections */}
              <div className="px-6 py-4 space-y-1 max-h-[40vh] overflow-y-auto">
                {Object.entries(CATEGORY_VENDORS).map(([key, cat]) => (
                  <CategorySection
                    key={key}
                    categoryKey={key}
                    label={cat.label}
                    description={cat.description}
                    vendors={cat.vendors}
                    checked={key === 'necessary' ? true : consent[key as keyof ConsentState] as boolean}
                    disabled={key === 'necessary'}
                    ewrOnly={consent.ewrOnly}
                    onChange={(v) => key !== 'necessary' && setConsent(prev => ({ ...prev, [key]: v }))}
                  />
                ))}
              </div>
            </div>
          )}

          {/* Buttons */}
          <div className="px-6 py-4 bg-gray-50 border-t border-gray-100 flex flex-wrap items-center gap-3">
            {!showSettings ? (
              <>
                <button
                  onClick={handleAcceptAll}
                  className="flex-1 min-w-[140px] px-4 py-2.5 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition-colors text-sm"
                >
                  Alle akzeptieren
                </button>
                <button
                  onClick={handleRejectAll}
                  className="flex-1 min-w-[140px] px-4 py-2.5 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors text-sm"
                >
                  Nur notwendige
                </button>
                <button
                  onClick={() => setShowSettings(true)}
                  className="flex-1 min-w-[140px] px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-100 transition-colors text-sm"
                >
                  Einstellungen
                </button>
              </>
            ) : (
              <>
                <button
                  onClick={handleSaveSettings}
                  className="flex-1 min-w-[140px] px-4 py-2.5 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition-colors text-sm"
                >
                  Auswahl speichern
                </button>
                <button
                  onClick={handleAcceptAll}
                  className="flex-1 min-w-[140px] px-4 py-2.5 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors text-sm"
                >
                  Alle akzeptieren
                </button>
                <button
                  onClick={() => setShowSettings(false)}
                  className="px-4 py-2.5 text-gray-500 hover:text-gray-700 text-sm"
                >
                  Zurueck
                </button>
              </>
            )}
          </div>
        </div>
      </div>
    </>
  )
}


export function CookieBannerFAB() {
  const [hasConsent, setHasConsent] = useState(false)

  useEffect(() => {
    setHasConsent(!!getStoredConsent())
    const handler = () => setHasConsent(true)
    window.addEventListener('sdkCookieConsentUpdated', handler)
    return () => window.removeEventListener('sdkCookieConsentUpdated', handler)
  }, [])

  if (!hasConsent) return null

  return (
    <button
      onClick={() => window.dispatchEvent(new Event('openCookieBanner'))}
      className="fixed bottom-6 right-[10rem] w-14 h-14 bg-gray-700 hover:bg-gray-800 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-110 z-50"
      aria-label="Cookie-Einstellungen oeffnen"
      title="Cookie-Einstellungen"
    >
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
      </svg>
    </button>
  )
}


function CategorySection({
  categoryKey,
  label,
  description,
  vendors,
  checked,
  disabled,
  ewrOnly,
  onChange,
}: {
  categoryKey: string
  label: string
  description: string
  vendors: VendorInfo[]
  checked: boolean
  disabled?: boolean
  ewrOnly: boolean
  onChange: (v: boolean) => void
}) {
  const [expanded, setExpanded] = useState(false)

  const euVendors = vendors.filter(v => isEWR(v.country))
  const nonEuVendors = vendors.filter(v => isOutsideEWR(v.country))
  const blockedCount = ewrOnly && checked ? nonEuVendors.length : 0
  const activeCount = checked ? vendors.length - blockedCount : 0

  return (
    <div className="border border-gray-100 rounded-lg overflow-hidden">
      <div className="flex items-center justify-between gap-3 px-4 py-3 bg-gray-50/50">
        <button
          onClick={() => setExpanded(!expanded)}
          className="flex items-center gap-2 flex-1 text-left"
        >
          <svg
            className={`w-4 h-4 text-gray-400 transition-transform ${expanded ? 'rotate-90' : ''}`}
            fill="none" stroke="currentColor" viewBox="0 0 24 24"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
          <div>
            <div className="text-sm font-medium text-gray-900">
              {label}
              <span className="ml-2 text-xs font-normal text-gray-400">
                {checked
                  ? blockedCount > 0
                    ? `${activeCount} aktiv, ${blockedCount} blockiert`
                    : `${vendors.length} Verarbeiter`
                  : `${vendors.length} Verarbeiter`
                }
              </span>
            </div>
            <div className="text-xs text-gray-500">{description}</div>
          </div>
        </button>
        <button
          onClick={() => !disabled && onChange(!checked)}
          disabled={disabled}
          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors shrink-0 ${
            checked
              ? disabled ? 'bg-gray-400' : 'bg-purple-600'
              : 'bg-gray-200'
          } ${disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
        >
          <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
            checked ? 'translate-x-6' : 'translate-x-1'
          }`} />
        </button>
      </div>

      {expanded && (
        <div className="px-4 pb-3">
          <table className="w-full text-xs">
            <thead>
              <tr className="text-gray-400 border-b border-gray-100">
                <th className="text-left py-1.5 font-medium w-5"></th>
                <th className="text-left py-1.5 font-medium">Verarbeiter</th>
                <th className="text-left py-1.5 font-medium">Cookies</th>
                <th className="text-left py-1.5 font-medium">Dauer</th>
                <th className="text-left py-1.5 font-medium">Land</th>
              </tr>
            </thead>
            <tbody>
              {vendors.map((v, i) => {
                const isBlocked = ewrOnly && checked && isOutsideEWR(v.country)
                const isActive = checked && !isBlocked
                return (
                  <tr key={i} className={`border-b border-gray-50 last:border-0 ${isBlocked ? 'opacity-40' : ''}`}>
                    <td className="py-1.5 w-5">
                      {isBlocked ? (
                        <svg className="w-3.5 h-3.5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                        </svg>
                      ) : isActive ? (
                        <svg className="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                      ) : (
                        <svg className="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
                        </svg>
                      )}
                    </td>
                    <td className={`py-1.5 font-medium ${isBlocked ? 'line-through text-gray-400' : 'text-gray-700'}`}>
                      {v.name}
                    </td>
                    <td className={`py-1.5 font-mono ${isBlocked ? 'line-through text-gray-300' : 'text-gray-500'}`}>
                      {v.cookies}
                    </td>
                    <td className="py-1.5 text-gray-500">{v.retention}</td>
                    <td className="py-1.5">
                      {isOutsideEWR(v.country) ? (
                        <span className={`inline-flex items-center gap-1 ${isBlocked ? 'text-red-400' : 'text-amber-600'}`}>
                          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
                          </svg>
                          {v.country}
                        </span>
                      ) : (
                        <span className="text-green-600 flex items-center gap-1">
                          <svg className="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <circle cx="12" cy="12" r="10" strokeWidth={2} />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4" />
                          </svg>
                          {v.country}
                        </span>
                      )}
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}