'use client'

import React from 'react'
import { useSDK } from '@/lib/sdk'
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
import { useCookieBanner } from './_hooks/useCookieBanner'
import { BannerPreview } from './_components/BannerPreview'
import { CategoryCard } from './_components/CategoryCard'

export default function CookieBannerPage() {
  const { state } = useSDK()
  const {
    categories, config, bannerTexts, isSaving, exportToast,
    setConfig, setBannerTexts,
    handleCategoryToggle, handleExportCode, handleSaveConfig,
  } = useCookieBanner()

  const totalCookies = categories.reduce((sum, cat) => sum + cat.cookies.length, 0)
  const thirdPartyCookies = categories.reduce(
    (sum, cat) => sum + cat.cookies.filter(c => c.type === 'third-party').length,
    0
  )

  const stepInfo = STEP_EXPLANATIONS['cookie-banner']

  return (
    <div className="space-y-6">
      {/* Toast notification */}
      {exportToast && (
        <div className="fixed top-4 right-4 z-50 bg-gray-900 text-white px-4 py-2 rounded-lg shadow-lg text-sm">
          {exportToast}
        </div>
      )}

      {/* Step Header */}
      <StepHeader
        stepId="cookie-banner"
        title={stepInfo.title}
        description={stepInfo.description}
        explanation={stepInfo.explanation}
        tips={stepInfo.tips}
      >
        <div className="flex items-center gap-2">
          <button
            onClick={handleExportCode}
            className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
          >
            Code exportieren
          </button>
          <button
            onClick={handleSaveConfig}
            disabled={isSaving}
            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
          >
            {isSaving ? 'Speichern...' : 'Veroeffentlichen'}
          </button>
        </div>
      </StepHeader>

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <div className="text-sm text-gray-500">Kategorien</div>
          <div className="text-3xl font-bold text-gray-900">{categories.length}</div>
        </div>
        <div className="bg-white rounded-xl border border-blue-200 p-6">
          <div className="text-sm text-blue-600">Cookies gesamt</div>
          <div className="text-3xl font-bold text-blue-600">{totalCookies}</div>
        </div>
        <div className="bg-white rounded-xl border border-orange-200 p-6">
          <div className="text-sm text-orange-600">Third-Party</div>
          <div className="text-3xl font-bold text-orange-600">{thirdPartyCookies}</div>
        </div>
        <div className="bg-white rounded-xl border border-green-200 p-6">
          <div className="text-sm text-green-600">Aktive Kategorien</div>
          <div className="text-3xl font-bold text-green-600">
            {categories.filter(c => c.enabled).length}
          </div>
        </div>
      </div>

      {/* Preview */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="font-semibold text-gray-900 mb-4">Banner-Vorschau</h3>
        <BannerPreview config={config} categories={categories} bannerTexts={bannerTexts} />
      </div>

      {/* Configuration */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <h3 className="font-semibold text-gray-900 mb-4">Banner-Einstellungen</h3>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Position</label>
              <select
                value={config.position}
                onChange={(e) => setConfig({ ...config, position: e.target.value as any })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
              >
                <option value="bottom">Unten</option>
                <option value="top">Oben</option>
                <option value="center">Zentriert</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Stil</label>
              <select
                value={config.style}
                onChange={(e) => setConfig({ ...config, style: e.target.value as any })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
              >
                <option value="bar">Balken</option>
                <option value="popup">Popup</option>
                <option value="modal">Modal</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Primaerfarbe</label>
              <input
                type="color"
                value={config.primaryColor}
                onChange={(e) => setConfig({ ...config, primaryColor: e.target.value })}
                className="w-full h-10 rounded-lg cursor-pointer"
              />
            </div>
            <div className="space-y-2">
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={config.showDeclineAll}
                  onChange={(e) => setConfig({ ...config, showDeclineAll: e.target.checked })}
                  className="w-4 h-4 text-purple-600"
                />
                <span className="text-sm">"Alle ablehnen" anzeigen</span>
              </label>
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={config.showSettings}
                  onChange={(e) => setConfig({ ...config, showSettings: e.target.checked })}
                  className="w-4 h-4 text-purple-600"
                />
                <span className="text-sm">Einstellungen-Link anzeigen</span>
              </label>
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={config.blockScripts}
                  onChange={(e) => setConfig({ ...config, blockScripts: e.target.checked })}
                  className="w-4 h-4 text-purple-600"
                />
                <span className="text-sm">Skripte vor Einwilligung blockieren</span>
              </label>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <h3 className="font-semibold text-gray-900 mb-4">Texte anpassen</h3>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Ueberschrift</label>
              <input
                type="text"
                value={bannerTexts.title}
                onChange={(e) => setBannerTexts({ ...bannerTexts, title: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
              <textarea
                rows={3}
                value={bannerTexts.description}
                onChange={(e) => setBannerTexts({ ...bannerTexts, description: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Link zur Datenschutzerklaerung</label>
              <input
                type="text"
                value={bannerTexts.privacyLink}
                onChange={(e) => setBannerTexts({ ...bannerTexts, privacyLink: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
              />
            </div>
          </div>
        </div>
      </div>

      {/* Cookie Categories */}
      <div>
        <div className="flex items-center justify-between mb-4">
          <h3 className="font-semibold text-gray-900">Cookie-Kategorien</h3>
          <button className="text-sm text-purple-600 hover:text-purple-700">
            + Kategorie hinzufuegen
          </button>
        </div>
        <div className="space-y-4">
          {categories.map(category => (
            <CategoryCard
              key={category.id}
              category={category}
              onToggle={(enabled) => handleCategoryToggle(category.id, enabled)}
            />
          ))}
        </div>
      </div>
    </div>
  )
}