breakpilot-compliance/admin-compliance/app/sdk/einwilligungen/cookie-banner/_components/CookieBannerContent.tsx

'use client'

import { useState, useMemo } from 'react'
import { useSDK } from '@/lib/sdk'
import { useEinwilligungen } from '@/lib/sdk/einwilligungen/context'
import {
  generateCookieBannerConfig,
  DEFAULT_COOKIE_BANNER_TEXTS,
  DEFAULT_COOKIE_BANNER_STYLING,
} from '@/lib/sdk/einwilligungen/generator/cookie-banner'
import {
  CookieBannerStyling,
  CookieBannerTexts,
  SupportedLanguage,
} from '@/lib/sdk/einwilligungen/types'
import { Cookie, Settings, Palette, Code, Monitor, Smartphone, Tablet } from 'lucide-react'
import Link from 'next/link'
import { ArrowLeft } from 'lucide-react'
import { StylingForm } from './StylingForm'
import { TextsForm } from './TextsForm'
import { BannerPreview } from './BannerPreview'
import { EmbedCodeViewer } from './EmbedCodeViewer'
import { CategoryList } from './CategoryList'

export function CookieBannerContent() {
  const { state } = useSDK()
  const { allDataPoints } = useEinwilligungen()

  const [styling, setStyling] = useState<CookieBannerStyling>(DEFAULT_COOKIE_BANNER_STYLING)
  const [texts, setTexts] = useState<CookieBannerTexts>(DEFAULT_COOKIE_BANNER_TEXTS)
  const [language, setLanguage] = useState<SupportedLanguage>('de')
  const [activeTab, setActiveTab] = useState<'styling' | 'texts' | 'embed' | 'categories'>('styling')
  const [device, setDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop')

  const config = useMemo(() => {
    return generateCookieBannerConfig(state.tenantId || 'demo', allDataPoints, texts, styling)
  }, [state.tenantId, allDataPoints, texts, styling])

  const cookieDataPoints = useMemo(
    () => allDataPoints.filter((dp) => dp.cookieCategory !== null),
    [allDataPoints]
  )

  return (
    <div className="space-y-6">
      <Link
        href="/sdk/einwilligungen/catalog"
        className="inline-flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900"
      >
        <ArrowLeft className="w-4 h-4" />
        Zurueck zum Katalog
      </Link>

      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Cookie-Banner Konfiguration</h1>
          <p className="text-slate-600 mt-1">Konfigurieren Sie Ihren DSGVO-konformen Cookie-Banner.</p>
        </div>
        <div className="flex items-center gap-2">
          <select
            value={language}
            onChange={(e) => setLanguage(e.target.value as SupportedLanguage)}
            className="px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
          >
            <option value="de">Deutsch</option>
            <option value="en">English</option>
          </select>
        </div>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-sm text-slate-500">Kategorien</div>
          <div className="text-2xl font-bold text-slate-900">{config?.categories.length || 0}</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-sm text-slate-500">Cookie-Datenpunkte</div>
          <div className="text-2xl font-bold text-indigo-600">{cookieDataPoints.length}</div>
        </div>
        <div className="bg-white rounded-xl border border-green-200 p-4">
          <div className="text-sm text-green-600">Erforderlich</div>
          <div className="text-2xl font-bold text-green-600">
            {config?.categories.filter((c) => c.isRequired).length || 0}
          </div>
        </div>
        <div className="bg-white rounded-xl border border-amber-200 p-4">
          <div className="text-sm text-amber-600">Optional</div>
          <div className="text-2xl font-bold text-amber-600">
            {config?.categories.filter((c) => !c.isRequired).length || 0}
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="space-y-4">
          <div className="flex border-b border-slate-200">
            {[
              { id: 'styling', label: 'Design', icon: Palette },
              { id: 'texts', label: 'Texte', icon: Settings },
              { id: 'categories', label: 'Kategorien', icon: Cookie },
              { id: 'embed', label: 'Embed-Code', icon: Code },
            ].map(({ id, label, icon: Icon }) => (
              <button
                key={id}
                onClick={() => setActiveTab(id as typeof activeTab)}
                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
                  activeTab === id
                    ? 'text-indigo-600 border-indigo-600'
                    : 'text-slate-600 border-transparent hover:text-slate-900'
                }`}
              >
                <Icon className="w-4 h-4" />
                {label}
              </button>
            ))}
          </div>

          <div className="bg-white rounded-xl border border-slate-200 p-6">
            {activeTab === 'styling' && <StylingForm styling={styling} onChange={setStyling} />}
            {activeTab === 'texts' && <TextsForm texts={texts} language={language} onChange={setTexts} />}
            {activeTab === 'categories' && <CategoryList config={config} language={language} />}
            {activeTab === 'embed' && <EmbedCodeViewer config={config} />}
          </div>
        </div>

        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="font-semibold text-slate-900">Vorschau</h3>
            <div className="flex items-center border border-slate-200 rounded-lg overflow-hidden">
              {[
                { id: 'desktop', icon: Monitor },
                { id: 'tablet', icon: Tablet },
                { id: 'mobile', icon: Smartphone },
              ].map(({ id, icon: Icon }) => (
                <button
                  key={id}
                  onClick={() => setDevice(id as typeof device)}
                  className={`p-2 ${
                    device === id ? 'bg-indigo-50 text-indigo-600' : 'text-slate-400 hover:text-slate-600'
                  }`}
                >
                  <Icon className="w-5 h-5" />
                </button>
              ))}
            </div>
          </div>
          <BannerPreview config={config} language={language} device={device} />
        </div>
      </div>
    </div>
  )
}