import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

import { TemplateGrid, Template } from "@/components/ui/template-grid"
import { LivePreview, LivePreviewContent } from "@/components/ui/live-preview"
import { GlobalColorPicker } from "@/components/ui/global-color-picker"
import { GlobalTypographyPicker } from "@/components/ui/global-typography-picker"
import {
  Palette, LayoutTemplate, RotateCcw,
  MapPin, ChevronDown, Sliders, Type, Layers, MousePointerClick, Settings,
  Minus, Plus,
} from "lucide-react"
import {
  AppearanceSettings, BehaviorSettings, ContentSettings, CookieCategory,
  templatePresets, fontSizeOptions, titleFontSizeOptions,
} from "../../types"
import { usePro } from "@/contexts/pro-context"
import { ProIndicator } from "@/components/pro/pro-indicator"
import { CookieConsentPreview } from "../cookie-consent-preview"

/** Compact number input with +/- buttons — replaces Slider */
function NumberStepper({
  label,
  value,
  onChange,
  min,
  max,
  step = 1,
  unit = 'px',
}: {
  label: string
  value: number
  onChange: (v: number) => void
  min: number
  max: number
  step?: number
  unit?: string
}) {
  const clamp = (v: number) => Math.min(max, Math.max(min, v))
  return (
    <div className="flex items-center justify-between gap-2">
      <Label className="text-sm whitespace-nowrap">{label}</Label>
      <div className="inline-flex items-center rounded-md border bg-background">
        <button
          type="button"
          onClick={() => onChange(clamp(value - step))}
          disabled={value <= min}
          className="flex items-center justify-center h-8 w-8 text-muted-foreground hover:text-foreground disabled:opacity-30 transition-colors cursor-pointer"
        >
          <Minus className="h-3 w-3" />
        </button>
        <input
          type="text"
          value={`${value}${unit}`}
          onChange={(e) => {
            const parsed = parseInt(e.target.value, 10)
            if (!isNaN(parsed)) onChange(clamp(parsed))
          }}
          className="h-8 w-14 text-center text-sm border-x bg-transparent outline-none"
        />
        <button
          type="button"
          onClick={() => onChange(clamp(value + step))}
          disabled={value >= max}
          className="flex items-center justify-center h-8 w-8 text-muted-foreground hover:text-foreground disabled:opacity-30 transition-colors cursor-pointer"
        >
          <Plus className="h-3 w-3" />
        </button>
      </div>
    </div>
  )
}

interface AppearanceTabProps {
  settings: AppearanceSettings
  updateSettings: <K extends keyof AppearanceSettings>(key: K, value: AppearanceSettings[K]) => void
  behaviorSettings: BehaviorSettings
  updateBehaviorSettings: <K extends keyof BehaviorSettings>(key: K, value: BehaviorSettings[K]) => void
  contentSettings: ContentSettings
  categories: CookieCategory[]
}

export function AppearanceTab({
  settings,
  updateSettings,
  behaviorSettings,
  updateBehaviorSettings,
  contentSettings,
  categories,
}: AppearanceTabProps) {
  const { isPro } = usePro()

  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
    colors: false,
    position: false,
    typography: false,
    overlay: false,
    buttons: false,
    style: false,
    reopen: false,
  })

  const toggleSection = (section: string) => {
    setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }))
  }

  const handleTemplateSelect = (templateId: string) => {
    const template = templatePresets.find(t => t.id === templateId)
    if (!template) return

    // Apply template settings
    Object.entries(template.settings).forEach(([key, value]) => {
      updateSettings(key as keyof AppearanceSettings, value as AppearanceSettings[keyof AppearanceSettings])
    })

    // Reset colors to design system defaults when switching templates
    updateSettings('primaryColor', '')
    updateSettings('backgroundColor', '')
    updateSettings('textColor', '')
  }

  // Convert templatePresets to Template format for TemplateGrid
  const templates: Template[] = templatePresets.map(t => ({
    id: t.id,
    name: t.name,
    description: t.description,
    preview: t.preview,
    isPro: t.isPro,
    alwaysVisible: t.alwaysVisible,
  }));

  return (
    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
      {/* Left Column - Settings */}
      <div className="space-y-6">
        {/* Templates */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <LayoutTemplate className="h-5 w-5" />
              Templates
            </CardTitle>
            <CardDescription>
              Choose a pre-designed template for your cookie popup
            </CardDescription>
          </CardHeader>
          <CardContent>
            <TemplateGrid
              templates={templates}
              selectedId={settings.template}
              onSelect={handleTemplateSelect}
              isPro={isPro}
              columns={3}
              size="md"
            />
          </CardContent>
        </Card>

        {/* Customize Design - Accordion sections (always shown, Pro sections gated) */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Settings className="h-5 w-5" />
              Customize Design
            </CardTitle>
            <CardDescription>
              {isPro
                ? 'Fine-tune every aspect of your cookie popup appearance'
                : 'Customize the colors of your cookie popup'}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-0">

              {/* ─── Colors — Free ─── */}
              <Collapsible open={expandedSections.colors} onOpenChange={() => toggleSection('colors')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <div className="flex items-center gap-2">
                    <Palette className="h-4 w-4" />
                    Colors
                  </div>
                  <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.colors ? 'rotate-180' : ''}`} />
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-4 pt-2 pb-4">
                  <div className="space-y-2">
                    <Label>Theme</Label>
                    <Select
                      value={settings.theme}
                      onValueChange={(value) => updateSettings('theme', value as AppearanceSettings['theme'])}
                    >
                      <SelectTrigger className="w-full h-9 text-sm">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="light">Light</SelectItem>
                        <SelectItem value="dark">Dark</SelectItem>
                        <SelectItem value="auto">Auto (System)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="grid gap-3">
                    <GlobalColorPicker
                      label="Primary Color"
                      value={settings.primaryColor}
                      onChange={(v) => updateSettings('primaryColor', v)}
                      globalTokenId="primary"
                      featureDefault=""
                    />

                    <GlobalColorPicker
                      label="Background Color"
                      value={settings.backgroundColor}
                      onChange={(v) => updateSettings('backgroundColor', v)}
                      globalTokenId="background"
                      featureDefault=""
                    />

                    <GlobalColorPicker
                      label="Text Color"
                      value={settings.textColor}
                      onChange={(v) => updateSettings('textColor', v)}
                      globalTokenId="text"
                      featureDefault=""
                    />
                  </div>
                </CollapsibleContent>
              </Collapsible>

              {/* Upgrade nudge for Free users */}
              {!isPro && (
                <p className="text-sm text-muted-foreground py-4 border-t">
                  For full customization control including position, typography, button styling,
                  overlay effects, and more, upgrade to Swift Commerce Pro.
                </p>
              )}

              {/* ─── Position & Animation — Pro ─── */}
              {isPro && (
              <Collapsible open={expandedSections.position} onOpenChange={() => toggleSection('position')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <div className="flex items-center gap-2">
                    <MapPin className="h-4 w-4" />
                    Position & Animation
                  </div>
                  <div className="flex items-center gap-2">
                    <ProIndicator size="sm" />
                    <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.position ? 'rotate-180' : ''}`} />
                  </div>
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-4 pt-2 pb-4">
                  <div className="grid gap-4 grid-cols-2">
                    <div className="space-y-2">
                      <Label>Popup Position</Label>
                      <Select
                        value={settings.position}
                        onValueChange={(value) => updateSettings('position', value as AppearanceSettings['position'])}
                      >
                        <SelectTrigger className="h-9 text-sm">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="bottom">Bottom</SelectItem>
                          <SelectItem value="top">Top</SelectItem>
                          <SelectItem value="bottom-left">Bottom Left</SelectItem>
                          <SelectItem value="bottom-right">Bottom Right</SelectItem>
                          <SelectItem value="center">Center (Modal)</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    {(settings.position === 'bottom' || settings.position === 'top') && (
                      <div className="space-y-2">
                        <Label>Layout</Label>
                        <Select
                          value={settings.layout || 'full'}
                          onValueChange={(value) => updateSettings('layout', value as AppearanceSettings['layout'])}
                        >
                          <SelectTrigger className="h-9 text-sm">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="full">Full Width</SelectItem>
                            <SelectItem value="boxed">Boxed</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    )}
                  </div>

                  {settings.layout === 'boxed' && (settings.position === 'bottom' || settings.position === 'top') && (
                    <NumberStepper
                      label="Banner Width"
                      value={settings.boxedWidth ?? 80}
                      onChange={(v) => updateSettings('boxedWidth', v)}
                      min={30}
                      max={95}
                      step={5}
                      unit="%"
                    />
                  )}

                  <div className="space-y-2">
                    <Label>Animation</Label>
                    <Select
                      value={settings.animation}
                      onValueChange={(value) => updateSettings('animation', value as AppearanceSettings['animation'])}
                    >
                      <SelectTrigger className="h-9 text-sm">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="slide">Slide</SelectItem>
                        <SelectItem value="fade">Fade</SelectItem>
                        <SelectItem value="none">None</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </CollapsibleContent>
              </Collapsible>
              )}

              {/* ─── Typography — Pro ─── */}
              {isPro && (
              <Collapsible open={expandedSections.typography} onOpenChange={() => toggleSection('typography')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <div className="flex items-center gap-2">
                    <Type className="h-4 w-4" />
                    Typography
                  </div>
                  <div className="flex items-center gap-2">
                    <ProIndicator size="sm" />
                    <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.typography ? 'rotate-180' : ''}`} />
                  </div>
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-4 pt-2 pb-4">
                  <GlobalTypographyPicker
                    label="Font Family"
                    value={settings.fontFamily || 'inherit'}
                    onChange={(v) => updateSettings('fontFamily', v)}
                    globalTokenId="body"
                    featureDefault="inherit"
                  />

                  <div className="grid gap-4 grid-cols-2">
                    <div className="space-y-2">
                      <Label>Title Font Size</Label>
                      <Select
                        value={settings.titleFontSize || '16'}
                        onValueChange={(value) => updateSettings('titleFontSize', value)}
                      >
                        <SelectTrigger className="h-9 text-sm">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {titleFontSizeOptions.map((option) => (
                            <SelectItem key={option.value} value={option.value}>
                              {option.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="space-y-2">
                      <Label>Body Font Size</Label>
                      <Select
                        value={settings.bodyFontSize || '14'}
                        onValueChange={(value) => updateSettings('bodyFontSize', value)}
                      >
                        <SelectTrigger className="h-9 text-sm">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {fontSizeOptions.map((option) => (
                            <SelectItem key={option.value} value={option.value}>
                              {option.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label>Font Weight</Label>
                    <Select
                      value={settings.fontWeight || '400'}
                      onValueChange={(value) => updateSettings('fontWeight', value)}
                    >
                      <SelectTrigger className="h-9 text-sm">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="300">Light (300)</SelectItem>
                        <SelectItem value="400">Regular (400)</SelectItem>
                        <SelectItem value="500">Medium (500)</SelectItem>
                        <SelectItem value="600">Semi-Bold (600)</SelectItem>
                        <SelectItem value="700">Bold (700)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </CollapsibleContent>
              </Collapsible>
              )}

              {/* ─── Button Styling — Pro ─── */}
              {isPro && (
              <Collapsible open={expandedSections.buttons} onOpenChange={() => toggleSection('buttons')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <div className="flex items-center gap-2">
                    <MousePointerClick className="h-4 w-4" />
                    Button Styling
                  </div>
                  <div className="flex items-center gap-2">
                    <ProIndicator size="sm" />
                    <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.buttons ? 'rotate-180' : ''}`} />
                  </div>
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-4 pt-2 pb-4">
                  <div className="grid gap-4 grid-cols-2">
                    <div className="space-y-2">
                      <Label>Button Shape</Label>
                      <Select
                        value={settings.buttonStyle || 'filled'}
                        onValueChange={(value) => updateSettings('buttonStyle', value as AppearanceSettings['buttonStyle'])}
                      >
                        <SelectTrigger className="h-9 text-sm">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="filled">Filled</SelectItem>
                          <SelectItem value="outlined">Outlined</SelectItem>
                          <SelectItem value="pill">Pill</SelectItem>
                          <SelectItem value="rounded">Rounded</SelectItem>
                          <SelectItem value="square">Square</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div className="space-y-2">
                      <Label>Button Size</Label>
                      <Select
                        value={settings.buttonSize || 'md'}
                        onValueChange={(value) => updateSettings('buttonSize', value as AppearanceSettings['buttonSize'])}
                      >
                        <SelectTrigger className="h-9 text-sm">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="sm">Small</SelectItem>
                          <SelectItem value="md">Medium</SelectItem>
                          <SelectItem value="lg">Large</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  {/* Accept Button */}
                  <div className="space-y-3 pt-2">
                    <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Accept Button</Label>
                    <div className="grid gap-3 grid-cols-2">
                      <GlobalColorPicker
                        label="Background"
                        value={settings.acceptButtonColor}
                        onChange={(v) => updateSettings('acceptButtonColor', v)}
                        globalTokenId="primary"
                        featureDefault=""
                      />
                      <GlobalColorPicker
                        label="Text Color"
                        value={settings.acceptButtonTextColor}
                        onChange={(v) => updateSettings('acceptButtonTextColor', v)}
                        featureDefault="#ffffff"
                      />
                    </div>
                  </div>

                  {/* Decline Button */}
                  <div className="space-y-3 pt-2">
                    <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Decline Button</Label>
                    <div className="grid gap-3 grid-cols-2">
                      <div className="space-y-2">
                        <Label className="text-xs">Style</Label>
                        <Select
                          value={settings.declineButtonStyle || 'outlined'}
                          onValueChange={(value) => updateSettings('declineButtonStyle', value as AppearanceSettings['declineButtonStyle'])}
                        >
                          <SelectTrigger className="h-9 text-sm">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="filled">Filled</SelectItem>
                            <SelectItem value="outlined">Outlined</SelectItem>
                            <SelectItem value="ghost">Ghost</SelectItem>
                            <SelectItem value="link">Link</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <GlobalColorPicker
                        label="Color"
                        value={settings.declineButtonColor}
                        onChange={(v) => updateSettings('declineButtonColor', v)}
                        globalTokenId="text"
                        featureDefault=""
                      />
                    </div>
                  </div>

                  {/* Settings Button */}
                  <div className="space-y-3 pt-2">
                    <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Settings Button</Label>
                    <div className="space-y-2">
                      <Label className="text-xs">Style</Label>
                      <Select
                        value={settings.settingsButtonStyle || 'link'}
                        onValueChange={(value) => updateSettings('settingsButtonStyle', value as AppearanceSettings['settingsButtonStyle'])}
                      >
                        <SelectTrigger className="h-9 text-sm">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="outlined">Outlined</SelectItem>
                          <SelectItem value="ghost">Ghost</SelectItem>
                          <SelectItem value="link">Link / Underline</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                </CollapsibleContent>
              </Collapsible>
              )}

              {/* ─── Overlay — Pro ─── */}
              {isPro && (
              <Collapsible open={expandedSections.overlay} onOpenChange={() => toggleSection('overlay')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <div className="flex items-center gap-2">
                    <Layers className="h-4 w-4" />
                    Overlay
                  </div>
                  <div className="flex items-center gap-2">
                    <ProIndicator size="sm" />
                    <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.overlay ? 'rotate-180' : ''}`} />
                  </div>
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-4 pt-2 pb-4">
                  <div className="flex items-center gap-3">
                    <Switch
                      id="overlay"
                      checked={settings.overlay}
                      onCheckedChange={(checked) => updateSettings('overlay', checked)}
                    />
                    <Label htmlFor="overlay" className="cursor-pointer text-sm">
                      Show Overlay Behind Popup
                    </Label>
                  </div>

                  {settings.overlay && (
                    <>
                      <GlobalColorPicker
                        label="Overlay Color"
                        value={settings.overlayColor || '#000000'}
                        onChange={(v) => updateSettings('overlayColor', v)}
                        featureDefault="#000000"
                      />

                      <NumberStepper
                        label="Overlay Opacity"
                        value={settings.overlayOpacity || 30}
                        onChange={(v) => updateSettings('overlayOpacity', v)}
                        min={10}
                        max={90}
                        step={5}
                        unit="%"
                      />

                      <div className="flex items-center gap-3">
                        <Switch
                          id="overlayBlur"
                          checked={settings.overlayBlur || false}
                          onCheckedChange={(checked) => updateSettings('overlayBlur', checked)}
                        />
                        <Label htmlFor="overlayBlur" className="cursor-pointer text-sm">
                          Blur Background Content
                        </Label>
                      </div>
                    </>
                  )}
                </CollapsibleContent>
              </Collapsible>
              )}

              {/* ─── Style Options — Pro ─── */}
              {isPro && (
              <Collapsible open={expandedSections.style} onOpenChange={() => toggleSection('style')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <div className="flex items-center gap-2">
                    <Sliders className="h-4 w-4" />
                    Style Options
                  </div>
                  <div className="flex items-center gap-2">
                    <ProIndicator size="sm" />
                    <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.style ? 'rotate-180' : ''}`} />
                  </div>
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-4 pt-2 pb-4">
                  <NumberStepper
                    label="Border Radius"
                    value={settings.borderRadius}
                    onChange={(v) => updateSettings('borderRadius', v)}
                    min={0}
                    max={24}
                    step={1}
                  />

                  <div className="grid grid-cols-2 gap-3 pt-2">
                    <div className="flex items-center gap-2">
                      <Switch
                        id="showIcon"
                        checked={settings.showIcon}
                        onCheckedChange={(checked) => updateSettings('showIcon', checked)}
                      />
                      <Label htmlFor="showIcon" className="cursor-pointer text-sm">
                        Show Icon
                      </Label>
                    </div>

                    <div className="flex items-center gap-2">
                      <Switch
                        id="blur"
                        checked={settings.blur}
                        onCheckedChange={(checked) => updateSettings('blur', checked)}
                      />
                      <Label htmlFor="blur" className="cursor-pointer text-sm">
                        Blur Background
                      </Label>
                    </div>
                  </div>
                </CollapsibleContent>
              </Collapsible>
              )}

              {/* ─── Reopen Button — Pro ─── */}
              {isPro && (
              <Collapsible open={expandedSections.reopen} onOpenChange={() => toggleSection('reopen')}>
                <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-sm font-medium hover:text-primary border-t">
                  <div className="flex items-center gap-2">
                    <RotateCcw className="h-4 w-4" />
                    Reopen Button
                  </div>
                  <div className="flex items-center gap-2">
                    <ProIndicator size="sm" />
                    <ChevronDown className={`h-4 w-4 transition-transform ${expandedSections.reopen ? 'rotate-180' : ''}`} />
                  </div>
                </CollapsibleTrigger>
                <CollapsibleContent className="space-y-4 pt-2 pb-4">
                  <p className="text-xs text-muted-foreground">
                    How users can change their consent preferences after dismissing the popup.
                  </p>
                  <div className="grid gap-4 grid-cols-2">
                    <div className="space-y-2">
                      <Label>Reopen Method</Label>
                      <Select
                        value={behaviorSettings.reopenMethod}
                        onValueChange={(value) => updateBehaviorSettings('reopenMethod', value as BehaviorSettings['reopenMethod'])}
                      >
                        <SelectTrigger className="h-9 text-sm">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="floating-button">Floating Button</SelectItem>
                          <SelectItem value="footer-link">Footer Link</SelectItem>
                          <SelectItem value="none">None</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    {behaviorSettings.reopenMethod === 'floating-button' && (
                      <div className="space-y-2">
                        <Label>Button Position</Label>
                        <Select
                          value={behaviorSettings.floatingButtonPosition}
                          onValueChange={(value) => updateBehaviorSettings('floatingButtonPosition', value as BehaviorSettings['floatingButtonPosition'])}
                        >
                          <SelectTrigger className="h-9 text-sm">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="bottom-left">Bottom Left</SelectItem>
                            <SelectItem value="bottom-right">Bottom Right</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    )}
                  </div>
                </CollapsibleContent>
              </Collapsible>
              )}

            </CardContent>
          </Card>

      </div>

      {/* Right Column - Sticky Preview */}
      <LivePreview
        title="Live Preview"
        description="See how your cookie popup will look"
        stickyTop={100}
        minHeight={400}
        showOverlay={settings.overlay || settings.blur}
        overlayOpacity={settings.overlay ? (settings.overlayOpacity || 30) / 100 : 0}
        showPattern={!settings.overlay && !settings.blur}
      >
        <LivePreviewContent position="full" className="overflow-hidden">
          <CookieConsentPreview
            settings={settings}
            behaviorSettings={behaviorSettings}
            contentSettings={contentSettings}
            categories={categories}
          />
        </LivePreviewContent>
      </LivePreview>
    </div>
  )
}