"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Slider } from "@/components/ui/slider"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Copy } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { DemoWebsiteContent } from "./demo-website-content"
import { PreviewWidget } from "./preview-widget"
import { iconSvgPaths } from "@/lib/icons"

type WidgetPosition = "bottom-right" | "bottom-left"
type WidgetIcon = "accessibility" | "eye" | "ear" | "type" | "messagesquare" | "volume2" | "mousepointer2"
type ContrastMode = "normal" | "dark" | "light"
type SaturationMode = "normal" | "low" | "high"

export function WidgetConfigurator() {
  const { toast } = useToast()

  // State for accessibility settings
  const [invertColors, setInvertColors] = useState(false)
  const [grayscale, setGrayscale] = useState(false)
  const [contrastMode, setContrastMode] = useState<ContrastMode>("normal")
  const [saturationMode, setSaturationMode] = useState<SaturationMode>("normal")
  const [highlightLinks, setHighlightLinks] = useState(false)
  const [highlightHeadings, setHighlightHeadings] = useState(false)
  // readingMode wurde entfernt
  const [contentScaling, setContentScaling] = useState<number[]>([100])
  const [fontSize, setFontSize] = useState<number[]>([100])
  // lineHeight wurde entfernt
  const [letterSpacing, setLetterSpacing] = useState<number[]>([0])

  // Existing features (kept)
  const [removeImages, setRemoveImages] = useState(false)
  // colorblindMode wurde entfernt
  const [disableAnimations, setDisableAnimations] = useState(false)
  const [largeCursor, setLargeCursor] = useState(false)
  const [dyslexiaFont, setDyslexiaFont] = useState(false)
  // New states
  const [blueFilter, setBlueFilter] = useState(false)
  const [muteSounds, setMuteSounds] = useState(false)

  // State for widget appearance settings
  const [widgetPosition, setWidgetPosition] = useState<WidgetPosition>("bottom-right")
  const [buttonColor, setButtonColor] = useState("#007bff")
  const [accentColor, setAccentColor] = useState("#007bff")
  const [widgetIcon, setWidgetIcon] = useState<WidgetIcon>("accessibility")

  // State for generated embed code
  const [embedCode, setEmbedCode] = useState("")

  // Calculate active features for the badge
  const activeFeaturesCount = [
    invertColors,
    grayscale,
    contrastMode !== "normal",
    saturationMode !== "normal",
    highlightLinks,
    highlightHeadings,
    removeImages,
    // colorblindMode wurde entfernt
    fontSize[0] !== 100,
    contentScaling[0] !== 100,
    // lineHeight[0] !== 100, // lineHeight wurde entfernt
    letterSpacing[0] !== 0,
    disableAnimations,
    largeCursor,
    dyslexiaFont,
    // New features
    blueFilter,
    muteSounds,
  ].filter(Boolean).length

  // Effect to regenerate embed code whenever settings change
  useEffect(() => {
    const generateEmbedCode = () => {
      const baseUrl = "https://v0-next-js-widget-configurator.vercel.app" // Replace with your actual deployed URL
      const selectedIconClass = iconSvgPaths[widgetIcon] || iconSvgPaths.accessibility
      const resetIconClass = iconSvgPaths.rotateRight
      const closeIconClass = iconSvgPaths.xmark

      const positionStyle =
        widgetPosition === "bottom-right"
          ? `bottom: 20px; right: 20px; left: auto;`
          : `bottom: 20px; left: 20px; right: auto;`

      const badgeHtml =
        activeFeaturesCount > 0
          ? `<span class="a11y-active-badge" style="background-color: ${accentColor};">${activeFeaturesCount}</span>`
          : ""

      const htmlContent = `
<div id="accessibility-widget-container"
  data-invert-colors="${invertColors}"
  data-grayscale="${grayscale}"
  data-contrast-mode="${contrastMode}"
  data-saturation-mode="${saturationMode}"
  data-highlight-links="${highlightLinks}"
  data-highlight-headings="${highlightHeadings}"
  data-content-scaling="${contentScaling[0]}"
  data-fontSize="${fontSize[0]}"
  data-letterSpacing="${letterSpacing[0]}"
  data-remove-images="${removeImages}"
  data-disable-animations="${disableAnimations}"
  data-large-cursor="${largeCursor}"
  data-dyslexia-font="${dyslexiaFont}"
  data-button-color="${buttonColor}"
  data-accent-color="${accentColor}"
  data-position="${widgetPosition}"
  data-blue-filter="${blueFilter}"
  data-mute-sounds="${muteSounds}"
  style="position: fixed; z-index: 9999; ${positionStyle}">
  <button id="accessibility-widget-toggle" class="a11y-widget-toggle">
    <i class="${selectedIconClass} fa-2x"></i>
    ${badgeHtml}
  </button>
  <div id="accessibility-widget-content" class="a11y-widget-content" style="display: none;">
    <div class="a11y-widget-header">
      <h3 class="a11y-widget-title">Barrierefreiheits-Menü</h3>
      <div class="a11y-header-actions">
        <button class="a11y-reset-button"><i class="${resetIconClass}"></i></button>
        <button class="a11y-close-button"><i class="${closeIconClass}"></i></button>
      </div>
    </div>
    <div class="a11y-scrollable-content">
      <div class="a11y-sliders-container">
        <div class="a11y-slider-row" data-setting="contentScaling">
          <span class="a11y-slider-label">Inhaltsskalierung</span>
          <div class="a11y-slider-control">
            <button class="a11y-slider-btn" data-action="decrease" data-setting="contentScaling" data-min="80" data-max="200" data-step="10">-</button>
            <span class="a11y-slider-value" data-setting="contentScaling">${contentScaling[0]}%</span>
            <button class="a11y-slider-btn" data-action="increase" data-setting="contentScaling" data-min="80" data-max="200" data-step="10">+</button>
          </div>
        </div>
        <div class="a11y-slider-row" data-setting="fontSize">
          <span class="a11y-slider-label">Schriftgröße</span>
          <div class="a11y-slider-control">
            <button class="a11y-slider-btn" data-action="decrease" data-setting="fontSize" data-min="80" data-max="200" data-step="10">-</button>
            <span class="a11y-slider-value" data-setting="fontSize">${fontSize[0]}%</span>
            <button class="a11y-slider-btn" data-action="increase" data-setting="fontSize" data-min="80" data-max="200" data-step="10">+</button>
          </div>
        </div>
        <div class="a11y-slider-row" data-setting="letterSpacing">
          <span class="a11y-slider-label">Buchstabenabstand</span>
          <div class="a11y-slider-control">
            <button class="a11y-slider-btn" data-action="decrease" data-setting="letterSpacing" data-min="-50" data-max="100" data-step="10">-</button>
            <span class="a11y-slider-value" data-setting="letterSpacing">${letterSpacing[0] / 100}em</span>
            <button class="a11y-slider-btn" data-action="increase" data-setting="letterSpacing" data-min="-50" data-max="100" data-step="10">+</button>
          </div>
        </div>
      </div>
      <div class="a11y-options-grid">
        <div class="a11y-option-tile" data-setting="removeImages">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.imageOff}"></i></div>
          <span class="a11y-option-label">Bilder aus</span>
        </div>
        <div class="a11y-option-tile" data-setting="invertColors">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.circleHalfStroke}"></i></div>
          <span class="a11y-option-label">Farben umkehren</span>
        </div>
        <div class="a11y-option-tile" data-setting="grayscale">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.circleDot}"></i></div>
          <span class="a11y-option-label">Monochrom</span>
        </div>
        <div class="a11y-option-tile" data-setting="blueFilter">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.blueFilter}"></i></div>
          <span class="a11y-option-label">Blaufilter</span>
        </div>
        <div class="a11y-option-tile" data-setting="darkContrast">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.moon}"></i></div>
          <span class="a11y-option-label">Dunkler Kontrast</span>
        </div>
        <div class="a11y-option-tile" data-setting="lightContrast">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.sun}"></i></div>
          <span class="a11y-option-label">Heller Kontrast</span>
        </div>
        <div class="a11y-option-tile" data-setting="lowSaturation">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.dropletSlash}"></i></div>
          <span class="a11y-option-label">Niedrige Sättigung</span>
        </div>
        <div class="a11y-option-tile" data-setting="highSaturation">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.droplet}"></i></div>
          <span class="a11y-option-label">Hohe Sättigung</span>
        </div>
        <div class="a11y-option-tile" data-setting="highlightLinks">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.link}"></i></div>
          <span class="a11y-option-label">Links hervorheben</span>
        </div>
        <div class="a11y-option-tile" data-setting="highlightHeadings">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.heading}"></i></div>
          <span class="a11y-option-label">Überschriften hervorheben</span>
        </div>

        <div class="a11y-option-tile" data-setting="disableAnimations">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.zapOff}"></i></div>
          <span class="a11y-option-label">Bewegung reduzieren</span>
        </div>
        <div class="a11y-option-tile" data-setting="largeCursor">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.mousepointer2}"></i></div>
          <span class="a11y-option-label">Großer Cursor</span>
        </div>
        <div class="a11y-option-tile" data-setting="dyslexiaFont">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.type}"></i></div>
          <span class="a11y-option-label">Dyslexie Schrift</span>
        </div>
        <div class="a11y-option-tile" data-setting="muteSounds">
          <div class="a11y-option-icon"><i class="${iconSvgPaths.muteSounds}"></i></div>
          <span class="a11y-option-label">Töne aus</span>
        </div>
      </div>
    </div>
  </div>
</div>
`
      const externalCssLink = `<link rel="stylesheet" href="${baseUrl}/widget.css"></link>`
      const externalJsScript = `<script src="${baseUrl}/widget.js"></script>`

      setEmbedCode(`${htmlContent}\n${externalCssLink}\n${externalJsScript}`)
    }

    generateEmbedCode()
  }, [
    invertColors,
    grayscale,
    contrastMode,
    saturationMode,
    highlightLinks,
    highlightHeadings,
    contentScaling,
    fontSize,
    letterSpacing,
    removeImages,
    disableAnimations,
    largeCursor,
    dyslexiaFont,
    widgetPosition,
    buttonColor,
    accentColor,
    widgetIcon,
    activeFeaturesCount,
    // New dependencies
    blueFilter,
    muteSounds,
  ])

  const copyToClipboard = () => {
    navigator.clipboard.writeText(embedCode)
    toast({
      title: "Code kopiert!",
      description: "Der Einbettungscode wurde in die Zwischenablage kopiert.",
    })
  }

  return (
    <div className="space-y-10">
      <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
        <Card className="shadow-xl border-none rounded-xl">
          <CardHeader className="pb-4">
            <CardTitle className="text-2xl font-bold text-gray-800">Widget-Einstellungen</CardTitle>
          </CardHeader>
          <CardContent className="space-y-8">
            <div className="space-y-5">
              <h3 className="text-xl font-semibold text-gray-700 border-b pb-2 mb-4">
                Text- und Skalierungsanpassungen
              </h3>
              <div className="space-y-3">
                <Label htmlFor="content-scaling-slider" className="text-base font-medium">
                  Inhaltsskalierung ({contentScaling[0]}%)
                </Label>
                <Slider
                  id="content-scaling-slider"
                  min={80}
                  max={200}
                  step={10}
                  value={contentScaling}
                  onValueChange={setContentScaling}
                  className="w-full"
                />
              </div>
              <div className="space-y-3">
                <Label htmlFor="font-size-slider" className="text-base font-medium">
                  Schriftgröße ({fontSize[0]}%)
                </Label>
                <Slider
                  id="font-size-slider"
                  min={80}
                  max={200}
                  step={10}
                  value={fontSize}
                  onValueChange={setFontSize}
                  className="w-full"
                />
              </div>
              <div className="space-y-3">
                <Label htmlFor="letter-spacing-slider" className="text-base font-medium">
                  Buchstabenabstand ({letterSpacing[0] / 100}em)
                </Label>
                <Slider
                  id="letter-spacing-slider"
                  min={-50}
                  max={100}
                  step={10}
                  value={letterSpacing}
                  onValueChange={setLetterSpacing}
                  className="w-full"
                />
              </div>
            </div>

            <div className="space-y-5 pt-6 border-t border-gray-200">
              <h3 className="text-xl font-semibold text-gray-700 border-b pb-2 mb-4">Visuelle Anpassungen</h3>
              <div className="flex items-center justify-between">
                <Label htmlFor="remove-images" className="text-base font-medium">
                  Bilder entfernen
                </Label>
                <Switch id="remove-images" checked={removeImages} onCheckedChange={setRemoveImages} />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="invert-colors" className="text-base font-medium">
                  Farben umkehren
                </Label>
                <Switch id="invert-colors" checked={invertColors} onCheckedChange={setInvertColors} />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="grayscale" className="text-base font-medium">
                  Monochrom (Graustufen)
                </Label>
                <Switch id="grayscale" checked={grayscale} onCheckedChange={setGrayscale} />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="blue-filter" className="text-base font-medium">
                  Blaufilter aktivieren
                </Label>
                <Switch id="blue-filter" checked={blueFilter} onCheckedChange={setBlueFilter} />
              </div>
              <div className="space-y-3">
                <Label className="text-base font-medium">Kontrastmodus</Label>
                <RadioGroup
                  value={contrastMode}
                  onValueChange={(value: ContrastMode) => setContrastMode(value)}
                  className="flex space-x-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="normal" id="contrast-normal" />
                    <Label htmlFor="contrast-normal">Normal</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="dark" id="contrast-dark" />
                    <Label htmlFor="contrast-dark">Dunkel</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="light" id="contrast-light" />
                    <Label htmlFor="contrast-light">Hell</Label>
                  </div>
                </RadioGroup>
              </div>
              <div className="space-y-3">
                <Label className="text-base font-medium">Sättigungsmodus</Label>
                <RadioGroup
                  value={saturationMode}
                  onValueChange={(value: SaturationMode) => setSaturationMode(value)}
                  className="flex space-x-4"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="normal" id="saturation-normal" />
                    <Label htmlFor="saturation-normal">Normal</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="low" id="saturation-low" />
                    <Label htmlFor="saturation-low">Niedrig</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="high" id="saturation-high" />
                    <Label htmlFor="saturation-high">Hoch</Label>
                  </div>
                </RadioGroup>
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="highlight-links" className="text-base font-medium">
                  Links hervorheben
                </Label>
                <Switch id="highlight-links" checked={highlightLinks} onCheckedChange={setHighlightLinks} />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="highlight-headings" className="text-base font-medium">
                  Überschriften hervorheben
                </Label>
                <Switch id="highlight-headings" checked={highlightHeadings} onCheckedChange={setHighlightHeadings} />
              </div>
            </div>

            <div className="space-y-5 pt-6 border-t border-gray-200">
              <h3 className="text-xl font-semibold text-gray-700 border-b pb-2 mb-4">Interaktions-Anpassungen</h3>
              <div className="flex items-center justify-between">
                <Label htmlFor="disable-animations" className="text-base font-medium">
                  Bewegung reduzieren
                </Label>
                <Switch id="disable-animations" checked={disableAnimations} onCheckedChange={setDisableAnimations} />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="large-cursor" className="text-base font-medium">
                  Großer Cursor
                </Label>
                <Switch id="large-cursor" checked={largeCursor} onCheckedChange={setLargeCursor} />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="dyslexia-font" className="text-base font-medium">
                  Dyslexie Schrift
                </Label>
                <Switch id="dyslexia-font" checked={dyslexiaFont} onCheckedChange={setDyslexiaFont} />
              </div>
              <div className="flex items-center justify-between">
                <Label htmlFor="mute-sounds" className="text-base font-medium">
                  Töne ausschalten
                </Label>
                <Switch id="mute-sounds" checked={muteSounds} onCheckedChange={setMuteSounds} />
              </div>
            </div>

            <div className="space-y-5 pt-6 border-t border-gray-200">
              <h3 className="text-xl font-semibold text-gray-700 border-b pb-2 mb-4">Widget-Darstellung</h3>
              <div className="space-y-3">
                <Label className="text-base font-medium">Widget-Position</Label>
                <RadioGroup
                  value={widgetPosition}
                  onValueChange={(value: WidgetPosition) => setWidgetPosition(value)}
                  className="flex space-x-8"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="bottom-right" id="pos-bottom-right" />
                    <Label htmlFor="pos-bottom-right">Unten Rechts</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="bottom-left" id="pos-bottom-left" />
                    <Label htmlFor="pos-bottom-left">Unten Links</Label>
                  </div>
                </RadioGroup>
              </div>
              <div className="space-y-3">
                <Label htmlFor="button-color" className="text-base font-medium">
                  Farbe des Kreises
                </Label>
                <Input
                  id="button-color"
                  type="color"
                  value={buttonColor}
                  onChange={(e) => setButtonColor(e.target.value)}
                  className="w-full h-10 p-1 border-gray-300 rounded-md"
                />
              </div>
              <div className="space-y-3">
                <Label htmlFor="accent-color" className="text-base font-medium">
                  Akzentfarbe im Widget
                </Label>
                <Input
                  id="accent-color"
                  type="color"
                  value={accentColor}
                  onChange={(e) => setAccentColor(e.target.value)}
                  className="w-full h-10 p-1 border-gray-300 rounded-md"
                />
              </div>
              <div className="space-y-3">
                <Label className="text-base font-medium">Widget-Icon</Label>
                <RadioGroup
                  value={widgetIcon}
                  onValueChange={(value: WidgetIcon) => setWidgetIcon(value)}
                  className="grid grid-cols-3 gap-4"
                >
                  <div className="flex flex-col items-center space-y-2">
                    <RadioGroupItem value="accessibility" id="icon-accessibility" className="peer sr-only" />
                    <Label
                      htmlFor="icon-accessibility"
                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
                    >
                      <i className={`${iconSvgPaths.accessibility} mb-2 text-2xl`}></i>
                      <span>Barrierefreiheit</span>
                    </Label>
                  </div>
                  <div className="flex flex-col items-center space-y-2">
                    <RadioGroupItem value="eye" id="icon-eye" className="peer sr-only" />
                    <Label
                      htmlFor="icon-eye"
                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
                    >
                      <i className={`${iconSvgPaths.eye} mb-2 text-2xl`}></i>
                      <span>Sehen</span>
                    </Label>
                  </div>
                  <div className="flex flex-col items-center space-y-2">
                    <RadioGroupItem value="ear" id="icon-ear" className="peer sr-only" />
                    <Label
                      htmlFor="icon-ear"
                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
                    >
                      <i className={`${iconSvgPaths.ear} mb-2 text-2xl`}></i>
                      <span>Hören</span>
                    </Label>
                  </div>
                  <div className="flex flex-col items-center space-y-2">
                    <RadioGroupItem value="type" id="icon-type" className="peer sr-only" />
                    <Label
                      htmlFor="icon-type"
                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
                    >
                      <i className={`${iconSvgPaths.type} mb-2 text-2xl`}></i>
                      <span>Text</span>
                    </Label>
                  </div>
                  <div className="flex flex-col items-center space-y-2">
                    <RadioGroupItem value="messagesquare" id="icon-messagesquare" className="peer sr-only" />
                    <Label
                      htmlFor="icon-messagesquare"
                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
                    >
                      <i className={`${iconSvgPaths.messagesquare} mb-2 text-2xl`}></i>
                      <span>Sprache</span>
                    </Label>
                  </div>
                  <div className="flex flex-col items-center space-y-2">
                    <RadioGroupItem value="volume2" id="icon-volume2" className="peer sr-only" />
                    <Label
                      htmlFor="icon-volume2"
                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
                    >
                      <i className={`${iconSvgPaths.volume2} mb-2 text-2xl`}></i>
                      <span>Vorlesen</span>
                    </Label>
                  </div>
                  <div className="flex flex-col items-center space-y-2">
                    <RadioGroupItem value="mousepointer2" id="icon-mousepointer2" className="peer sr-only" />
                    <Label
                      htmlFor="icon-mousepointer2"
                      className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
                    >
                      <i className={`${iconSvgPaths.mousepointer2} mb-2 text-2xl`}></i>
                      <span>Cursor</span>
                    </Label>
                  </div>
                </RadioGroup>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="shadow-xl border-none rounded-xl">
          <CardHeader className="pb-4">
            <CardTitle className="text-2xl font-bold text-gray-800">Vorschau & Einbettung</CardTitle>
          </CardHeader>
          <CardContent className="space-y-8">
            <div className="space-y-4">
              <h3 className="text-xl font-semibold text-gray-700 border-b pb-2 mb-4">Live-Vorschau</h3>
              <Dialog>
                <DialogTrigger asChild>
                  <Button className="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 text-lg rounded-lg shadow-md transition-all duration-200">
                    <i className="fas fa-eye mr-2"></i> Vorschau anzeigen
                  </Button>
                </DialogTrigger>
                <DialogContent className="max-w-4xl h-[90vh] p-0 overflow-hidden flex flex-col">
                  <DialogHeader className="p-4 border-b">
                    <DialogTitle className="text-xl font-bold">Barrierefreiheits-Menü Live-Vorschau</DialogTitle>
                  </DialogHeader>
                  <div className="relative flex-grow overflow-auto">
                    {/* Demo Website Content */}
                    <DemoWebsiteContent
                      removeImages={removeImages}
                      grayscale={grayscale}
                      fontSize={fontSize[0]}
                      disableAnimations={disableAnimations}
                      dyslexiaFont={dyslexiaFont}
                      highlightLinks={highlightLinks}
                      invertColors={invertColors}
                      highlightHeadings={highlightHeadings}
                      contrastMode={contrastMode}
                      saturationMode={saturationMode}
                      contentScaling={contentScaling[0]}
                      letterSpacing={letterSpacing[0]}
                      // New props
                      blueFilter={blueFilter}
                      muteSounds={muteSounds}
                    />

                    {/* Widget Preview - Use the new PreviewWidget component */}
                    <PreviewWidget
                      removeImages={removeImages}
                      grayscale={grayscale}
                      fontSize={fontSize[0]}
                      disableAnimations={disableAnimations}
                      largeCursor={largeCursor}
                      dyslexiaFont={dyslexiaFont}
                      highlightLinks={highlightLinks}
                      invertColors={invertColors}
                      highlightHeadings={highlightHeadings}
                      contrastMode={contrastMode}
                      saturationMode={saturationMode}
                      contentScaling={contentScaling[0]}
                      letterSpacing={letterSpacing[0]}
                      widgetPosition={widgetPosition}
                      buttonColor={buttonColor}
                      accentColor={accentColor}
                      widgetIcon={widgetIcon}
                      // New props
                      blueFilter={blueFilter}
                      muteSounds={muteSounds}
                    />
                  </div>
                </DialogContent>
              </Dialog>
              <p className="text-sm text-gray-600 text-center">
                Klicken Sie auf "Vorschau anzeigen", um das Widget in Aktion auf einer Demo-Website zu sehen.
              </p>
            </div>

            <div className="space-y-4 pt-6 border-t border-gray-200">
              <h3 className="text-xl font-semibold text-gray-700 border-b pb-2 mb-4">Einbettungscode für Webflow</h3>
              <Textarea
                value={embedCode}
                readOnly
                rows={10}
                className="font-mono text-sm bg-gray-50 p-4 rounded-md border border-gray-300"
              />
              <Button
                onClick={copyToClipboard}
                className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 text-lg rounded-lg shadow-md transition-all duration-200"
              >
                <Copy className="mr-2 h-5 w-5" /> Code kopieren
              </Button>
              <p className="text-sm text-gray-600">
                Fügen Sie den &lt;link&gt;-Tag für <code>widget.css</code> **im &lt;head&gt;-Bereich** Ihrer
                Webflow-Seite ein.
                <br />
                Fügen Sie den HTML-Inhalt des Widgets und den &lt;script&gt;-Tag für <code>widget.js</code> **direkt vor
                dem schließenden &lt;/body&gt;-Tag** ein.
                <br />
                **Wichtig:** Sie müssen die Dateien <code>widget.css</code> und <code>widget.js</code> (siehe unten) auf
                Ihrem eigenen Server hosten und die Pfade im generierten Code entsprechend anpassen, z.B.
                <code>https://ihre-domain.com/widget.css</code>.
                <br />
                Für diese Vercel-Bereitstellung lauten die URLs:
                <code>https://v0-next-js-widget-configurator.vercel.app/widget.css</code> und
                <code>https://v0-next-js-widget-configurator.vercel.app/widget.js</code>.
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}