'use client'

/**
 * Admin Panel fuer Website-Content
 *
 * Erlaubt das Bearbeiten aller Website-Texte:
 * - Hero Section
 * - Features
 * - FAQ
 * - Pricing
 * - Trust Indicators
 * - Testimonial
 *
 * NEU: Live-Preview der Website zeigt Kontext beim Bearbeiten
 */

import { useState, useEffect, useRef, useCallback } from 'react'
import { WebsiteContent, HeroContent, FeatureContent, FAQItem, PricingPlan } from '@/lib/content-types'
import { useLanguage } from '@/lib/LanguageContext'
import LanguageSelector from '@/components/LanguageSelector'
import AdminLayout from '@/components/admin/AdminLayout'

// Admin Key (in Produktion via Login)
const ADMIN_KEY = 'breakpilot-admin-2024'

// Mapping von Tabs zu Website-Sektionen (CSS Selektoren und Scroll-Positionen)
const SECTION_MAP: Record<string, { selector: string; scrollTo: string }> = {
  hero: { selector: '#hero', scrollTo: 'hero' },
  features: { selector: '#features', scrollTo: 'features' },
  faq: { selector: '#faq', scrollTo: 'faq' },
  pricing: { selector: '#pricing', scrollTo: 'pricing' },
  other: { selector: '#trust', scrollTo: 'trust' },
}

export default function AdminPage() {
  const { language, setLanguage, t, isRTL } = useLanguage()
  const [content, setContent] = useState<WebsiteContent | null>(null)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
  const [activeTab, setActiveTab] = useState<'hero' | 'features' | 'faq' | 'pricing' | 'other'>('hero')
  const [showPreview, setShowPreview] = useState(true)
  const iframeRef = useRef<HTMLIFrameElement>(null)

  // Scrollt die Preview zur entsprechenden Sektion
  const scrollToSection = useCallback((tab: string) => {
    if (!iframeRef.current?.contentWindow) return
    const section = SECTION_MAP[tab]
    if (section) {
      try {
        iframeRef.current.contentWindow.postMessage(
          { type: 'scrollTo', section: section.scrollTo },
          '*'
        )
      } catch {
        // Same-origin policy - fallback
      }
    }
  }, [])

  // Bei Tab-Wechsel zur Sektion scrollen
  useEffect(() => {
    scrollToSection(activeTab)
  }, [activeTab, scrollToSection])

  // Content laden
  useEffect(() => {
    loadContent()
  }, [])

  async function loadContent() {
    try {
      const res = await fetch('/api/content')
      if (res.ok) {
        const data = await res.json()
        setContent(data)
      } else {
        setMessage({ type: 'error', text: t('admin_error') })
      }
    } catch (error) {
      setMessage({ type: 'error', text: t('admin_error') })
    } finally {
      setLoading(false)
    }
  }

  async function saveChanges() {
    if (!content) return

    setSaving(true)
    setMessage(null)

    try {
      const res = await fetch('/api/content', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-admin-key': ADMIN_KEY,
        },
        body: JSON.stringify(content),
      })

      if (res.ok) {
        setMessage({ type: 'success', text: t('admin_saved') })
      } else {
        const error = await res.json()
        setMessage({ type: 'error', text: error.error || t('admin_error') })
      }
    } catch (error) {
      setMessage({ type: 'error', text: t('admin_error') })
    } finally {
      setSaving(false)
    }
  }

  // Hero Section updaten
  function updateHero(field: keyof HeroContent, value: string) {
    if (!content) return
    setContent({
      ...content,
      hero: { ...content.hero, [field]: value },
    })
  }

  // Feature updaten
  function updateFeature(index: number, field: keyof FeatureContent, value: string) {
    if (!content) return
    const newFeatures = [...content.features]
    newFeatures[index] = { ...newFeatures[index], [field]: value }
    setContent({ ...content, features: newFeatures })
  }

  // FAQ updaten
  function updateFAQ(index: number, field: 'question' | 'answer', value: string | string[]) {
    if (!content) return
    const newFAQ = [...content.faq]
    if (field === 'answer' && typeof value === 'string') {
      // Split by newlines for array
      newFAQ[index] = { ...newFAQ[index], answer: value.split('\n') }
    } else if (field === 'question' && typeof value === 'string') {
      newFAQ[index] = { ...newFAQ[index], question: value }
    }
    setContent({ ...content, faq: newFAQ })
  }

  // FAQ hinzufuegen
  function addFAQ() {
    if (!content) return
    setContent({
      ...content,
      faq: [...content.faq, { question: 'Neue Frage?', answer: ['Antwort hier...'] }],
    })
  }

  // FAQ entfernen
  function removeFAQ(index: number) {
    if (!content) return
    const newFAQ = content.faq.filter((_, i) => i !== index)
    setContent({ ...content, faq: newFAQ })
  }

  // Pricing updaten
  function updatePricing(index: number, field: string, value: string | number | boolean) {
    if (!content) return
    const newPricing = [...content.pricing]
    if (field === 'price') {
      newPricing[index] = { ...newPricing[index], price: Number(value) }
    } else if (field === 'popular') {
      newPricing[index] = { ...newPricing[index], popular: Boolean(value) }
    } else if (field.startsWith('features.')) {
      const subField = field.replace('features.', '')
      if (subField === 'included' && typeof value === 'string') {
        newPricing[index] = {
          ...newPricing[index],
          features: {
            ...newPricing[index].features,
            included: value.split('\n'),
          },
        }
      } else {
        newPricing[index] = {
          ...newPricing[index],
          features: {
            ...newPricing[index].features,
            [subField]: value,
          },
        }
      }
    } else {
      newPricing[index] = { ...newPricing[index], [field]: value }
    }
    setContent({ ...content, pricing: newPricing })
  }

  if (loading) {
    return (
      <AdminLayout title="Übersetzungen" description="Website Content & Sprachen">
        <div className="flex items-center justify-center py-12">
          <div className="text-xl text-slate-600">{t('admin_loading')}</div>
        </div>
      </AdminLayout>
    )
  }

  if (!content) {
    return (
      <AdminLayout title="Übersetzungen" description="Website Content & Sprachen">
        <div className="flex items-center justify-center py-12">
          <div className="text-xl text-red-600">{t('admin_error')}</div>
        </div>
      </AdminLayout>
    )
  }

  return (
    <AdminLayout title="Übersetzungen" description="Website Content & Sprachen">
      <div className={isRTL ? 'rtl' : ''} dir={isRTL ? 'rtl' : 'ltr'}>
        {/* Toolbar */}
        <div className={`bg-white rounded-xl border border-slate-200 p-4 mb-6 flex items-center justify-between ${isRTL ? 'flex-row-reverse' : ''}`}>
          <div className="flex items-center gap-4">
            <LanguageSelector
              currentLanguage={language}
              onLanguageChange={setLanguage}
            />
            {/* Preview Toggle */}
            <button
              onClick={() => setShowPreview(!showPreview)}
              className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                showPreview
                  ? 'bg-blue-100 text-blue-700'
                  : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
              }`}
              title={showPreview ? 'Preview ausblenden' : 'Preview einblenden'}
            >
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
              </svg>
              Live-Preview
            </button>
          </div>
          <div className={`flex items-center gap-4 ${isRTL ? 'flex-row-reverse' : ''}`}>
            {message && (
              <span
                className={`px-3 py-1 rounded text-sm ${
                  message.type === 'success'
                    ? 'bg-green-100 text-green-800'
                    : 'bg-red-100 text-red-800'
                }`}
              >
                {message.text}
              </span>
            )}
            <button
              onClick={saveChanges}
              disabled={saving}
              className="bg-primary-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-primary-700 disabled:opacity-50 transition-colors"
            >
              {saving ? t('admin_saving') : t('admin_save')}
            </button>
          </div>
        </div>

        {/* Tabs */}
        <div className="mb-6">
          <div className={`flex gap-1 bg-slate-100 p-1 rounded-lg w-fit ${isRTL ? 'flex-row-reverse' : ''}`}>
            {(['hero', 'features', 'faq', 'pricing', 'other'] as const).map((tab) => (
              <button
                key={tab}
                onClick={() => setActiveTab(tab)}
                className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
                  activeTab === tab
                    ? 'bg-white text-slate-900 shadow-sm'
                    : 'text-slate-600 hover:text-slate-900'
                }`}
              >
                {tab === 'hero' && t('admin_tab_hero')}
                {tab === 'features' && t('admin_tab_features')}
                {tab === 'faq' && t('admin_tab_faq')}
                {tab === 'pricing' && t('admin_tab_pricing')}
                {tab === 'other' && t('admin_tab_other')}
              </button>
            ))}
          </div>
        </div>

        {/* Split Layout: Editor + Preview */}
        <div className={`grid gap-6 ${showPreview ? 'grid-cols-2' : 'grid-cols-1'}`}>
          {/* Editor Panel */}
          <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6 max-h-[calc(100vh-280px)] overflow-y-auto">
          {/* Hero Tab */}
          {activeTab === 'hero' && (
            <div className="space-y-6">
              <h2 className="text-xl font-semibold text-slate-900">{t('admin_tab_hero')} Section</h2>

              <div className="grid gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Badge</label>
                  <input
                    type="text"
                    value={content.hero.badge}
                    onChange={(e) => updateHero('badge', e.target.value)}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                    dir={isRTL ? 'rtl' : 'ltr'}
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Titel (vor Highlight)
                  </label>
                  <input
                    type="text"
                    value={content.hero.title}
                    onChange={(e) => updateHero('title', e.target.value)}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                    dir={isRTL ? 'rtl' : 'ltr'}
                  />
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">
                      Highlight 1
                    </label>
                    <input
                      type="text"
                      value={content.hero.titleHighlight1}
                      onChange={(e) => updateHero('titleHighlight1', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                      dir={isRTL ? 'rtl' : 'ltr'}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">
                      Highlight 2
                    </label>
                    <input
                      type="text"
                      value={content.hero.titleHighlight2}
                      onChange={(e) => updateHero('titleHighlight2', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                      dir={isRTL ? 'rtl' : 'ltr'}
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Untertitel</label>
                  <textarea
                    value={content.hero.subtitle}
                    onChange={(e) => updateHero('subtitle', e.target.value)}
                    rows={3}
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                    dir={isRTL ? 'rtl' : 'ltr'}
                  />
                </div>

                <div className="grid grid-cols-3 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">
                      CTA Primaer
                    </label>
                    <input
                      type="text"
                      value={content.hero.ctaPrimary}
                      onChange={(e) => updateHero('ctaPrimary', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                      dir={isRTL ? 'rtl' : 'ltr'}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">
                      CTA Sekundaer
                    </label>
                    <input
                      type="text"
                      value={content.hero.ctaSecondary}
                      onChange={(e) => updateHero('ctaSecondary', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                      dir={isRTL ? 'rtl' : 'ltr'}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">CTA Hinweis</label>
                    <input
                      type="text"
                      value={content.hero.ctaHint}
                      onChange={(e) => updateHero('ctaHint', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                      dir={isRTL ? 'rtl' : 'ltr'}
                    />
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Features Tab */}
          {activeTab === 'features' && (
            <div className="space-y-6">
              <h2 className="text-xl font-semibold text-slate-900">{t('admin_tab_features')}</h2>

              {content.features.map((feature, index) => (
                <div key={feature.id} className="border border-slate-200 rounded-lg p-4">
                  <div className="grid gap-4">
                    <div className="grid grid-cols-3 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">Icon</label>
                        <input
                          type="text"
                          value={feature.icon}
                          onChange={(e) => updateFeature(index, 'icon', e.target.value)}
                          className="w-full px-3 py-2 border border-slate-300 rounded-lg text-2xl text-center"
                        />
                      </div>
                      <div className="col-span-2">
                        <label className="block text-sm font-medium text-slate-700 mb-1">Titel</label>
                        <input
                          type="text"
                          value={feature.title}
                          onChange={(e) => updateFeature(index, 'title', e.target.value)}
                          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                          dir={isRTL ? 'rtl' : 'ltr'}
                        />
                      </div>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1">
                        Beschreibung
                      </label>
                      <textarea
                        value={feature.description}
                        onChange={(e) => updateFeature(index, 'description', e.target.value)}
                        rows={2}
                        className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                        dir={isRTL ? 'rtl' : 'ltr'}
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* FAQ Tab */}
          {activeTab === 'faq' && (
            <div className="space-y-6">
              <div className={`flex items-center justify-between ${isRTL ? 'flex-row-reverse' : ''}`}>
                <h2 className="text-xl font-semibold text-slate-900">{t('admin_tab_faq')}</h2>
                <button
                  onClick={addFAQ}
                  className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
                >
                  {t('admin_add_faq')}
                </button>
              </div>

              {content.faq.map((item, index) => (
                <div key={index} className="border border-slate-200 rounded-lg p-4">
                  <div className={`flex items-start justify-between gap-4 ${isRTL ? 'flex-row-reverse' : ''}`}>
                    <div className="flex-1 space-y-4">
                      <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">
                          {t('admin_question')} {index + 1}
                        </label>
                        <input
                          type="text"
                          value={item.question}
                          onChange={(e) => updateFAQ(index, 'question', e.target.value)}
                          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                          dir={isRTL ? 'rtl' : 'ltr'}
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">
                          {t('admin_answer')}
                        </label>
                        <textarea
                          value={item.answer.join('\n')}
                          onChange={(e) => updateFAQ(index, 'answer', e.target.value)}
                          rows={4}
                          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono text-sm"
                          dir={isRTL ? 'rtl' : 'ltr'}
                        />
                      </div>
                    </div>
                    <button
                      onClick={() => removeFAQ(index)}
                      className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                      title="Frage entfernen"
                    >
                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Pricing Tab */}
          {activeTab === 'pricing' && (
            <div className="space-y-6">
              <h2 className="text-xl font-semibold text-slate-900">{t('admin_tab_pricing')}</h2>

              {content.pricing.map((plan, index) => (
                <div key={plan.id} className="border border-slate-200 rounded-lg p-4">
                  <div className="grid gap-4">
                    <div className="grid grid-cols-4 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
                        <input
                          type="text"
                          value={plan.name}
                          onChange={(e) => updatePricing(index, 'name', e.target.value)}
                          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                          dir={isRTL ? 'rtl' : 'ltr'}
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">
                          Preis (EUR)
                        </label>
                        <input
                          type="number"
                          step="0.01"
                          value={plan.price}
                          onChange={(e) => updatePricing(index, 'price', e.target.value)}
                          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">
                          Intervall
                        </label>
                        <input
                          type="text"
                          value={plan.interval}
                          onChange={(e) => updatePricing(index, 'interval', e.target.value)}
                          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                          dir={isRTL ? 'rtl' : 'ltr'}
                        />
                      </div>
                      <div className="flex items-end">
                        <label className="flex items-center gap-2">
                          <input
                            type="checkbox"
                            checked={plan.popular || false}
                            onChange={(e) => updatePricing(index, 'popular', e.target.checked)}
                            className="w-4 h-4 text-primary-600 rounded"
                          />
                          <span className="text-sm text-slate-700">{t('pricing_popular')}</span>
                        </label>
                      </div>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1">
                        Beschreibung
                      </label>
                      <input
                        type="text"
                        value={plan.description}
                        onChange={(e) => updatePricing(index, 'description', e.target.value)}
                        className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                        dir={isRTL ? 'rtl' : 'ltr'}
                      />
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">
                          {t('pricing_tasks')}
                        </label>
                        <input
                          type="text"
                          value={plan.features.tasks}
                          onChange={(e) => updatePricing(index, 'features.tasks', e.target.value)}
                          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                          dir={isRTL ? 'rtl' : 'ltr'}
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">
                          Aufgaben-Beschreibung
                        </label>
                        <input
                          type="text"
                          value={plan.features.taskDescription}
                          onChange={(e) =>
                            updatePricing(index, 'features.taskDescription', e.target.value)
                          }
                          className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                          dir={isRTL ? 'rtl' : 'ltr'}
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1">
                        Features (eine pro Zeile)
                      </label>
                      <textarea
                        value={plan.features.included.join('\n')}
                        onChange={(e) => updatePricing(index, 'features.included', e.target.value)}
                        rows={4}
                        className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono text-sm"
                        dir={isRTL ? 'rtl' : 'ltr'}
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Other Tab */}
          {activeTab === 'other' && (
            <div className="space-y-8">
              {/* Trust Indicators */}
              <div>
                <h2 className="text-xl font-semibold text-slate-900 mb-4">Trust Indicators</h2>
                <div className="grid grid-cols-3 gap-4">
                  {(['item1', 'item2', 'item3'] as const).map((key, index) => (
                    <div key={key} className="border border-slate-200 rounded-lg p-4">
                      <div className="space-y-4">
                        <div>
                          <label className="block text-sm font-medium text-slate-700 mb-1">
                            Wert {index + 1}
                          </label>
                          <input
                            type="text"
                            value={content.trust[key].value}
                            onChange={(e) =>
                              setContent({
                                ...content,
                                trust: {
                                  ...content.trust,
                                  [key]: { ...content.trust[key], value: e.target.value },
                                },
                              })
                            }
                            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                            dir={isRTL ? 'rtl' : 'ltr'}
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-slate-700 mb-1">
                            Label {index + 1}
                          </label>
                          <input
                            type="text"
                            value={content.trust[key].label}
                            onChange={(e) =>
                              setContent({
                                ...content,
                                trust: {
                                  ...content.trust,
                                  [key]: { ...content.trust[key], label: e.target.value },
                                },
                              })
                            }
                            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                            dir={isRTL ? 'rtl' : 'ltr'}
                          />
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Testimonial */}
              <div>
                <h2 className="text-xl font-semibold text-slate-900 mb-4">Testimonial</h2>
                <div className="border border-slate-200 rounded-lg p-4 space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Zitat</label>
                    <textarea
                      value={content.testimonial.quote}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          testimonial: { ...content.testimonial, quote: e.target.value },
                        })
                      }
                      rows={3}
                      className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                      dir={isRTL ? 'rtl' : 'ltr'}
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1">Autor</label>
                      <input
                        type="text"
                        value={content.testimonial.author}
                        onChange={(e) =>
                          setContent({
                            ...content,
                            testimonial: { ...content.testimonial, author: e.target.value },
                          })
                        }
                        className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                        dir={isRTL ? 'rtl' : 'ltr'}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1">Rolle</label>
                      <input
                        type="text"
                        value={content.testimonial.role}
                        onChange={(e) =>
                          setContent({
                            ...content,
                            testimonial: { ...content.testimonial, role: e.target.value },
                          })
                        }
                        className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                        dir={isRTL ? 'rtl' : 'ltr'}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
          </div>

          {/* Live Preview Panel */}
          {showPreview && (
            <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
              {/* Preview Header */}
              <div className="bg-slate-50 border-b border-slate-200 px-4 py-3 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="flex gap-1.5">
                    <div className="w-3 h-3 rounded-full bg-red-400"></div>
                    <div className="w-3 h-3 rounded-full bg-yellow-400"></div>
                    <div className="w-3 h-3 rounded-full bg-green-400"></div>
                  </div>
                  <span className="text-xs text-slate-500 ml-2">localhost:3000</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-xs font-medium text-slate-600 bg-slate-200 px-2 py-1 rounded">
                    {activeTab === 'hero' && 'Hero Section'}
                    {activeTab === 'features' && 'Features'}
                    {activeTab === 'faq' && 'FAQ'}
                    {activeTab === 'pricing' && 'Pricing'}
                    {activeTab === 'other' && 'Trust & Testimonial'}
                  </span>
                  <button
                    onClick={() => iframeRef.current?.contentWindow?.location.reload()}
                    className="p-1.5 text-slate-500 hover:text-slate-700 hover:bg-slate-200 rounded transition-colors"
                    title="Preview neu laden"
                  >
                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                  </button>
                </div>
              </div>
              {/* Preview Frame */}
              <div className="relative h-[calc(100vh-340px)] bg-slate-100">
                <iframe
                  ref={iframeRef}
                  src={`/?preview=true&section=${activeTab}#${activeTab}`}
                  className="w-full h-full border-0 scale-75 origin-top-left"
                  style={{
                    width: '133.33%',
                    height: '133.33%',
                    transform: 'scale(0.75)',
                    transformOrigin: 'top left',
                  }}
                  title="Website Preview"
                  sandbox="allow-same-origin allow-scripts"
                />
                {/* Sektion-Indikator */}
                <div className="absolute bottom-4 left-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center gap-2 text-sm">
                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <span>
                    Du bearbeitest: <strong>
                      {activeTab === 'hero' && 'Hero Section (Startbereich)'}
                      {activeTab === 'features' && 'Features (Funktionen)'}
                      {activeTab === 'faq' && 'FAQ (Häufige Fragen)'}
                      {activeTab === 'pricing' && 'Pricing (Preise)'}
                      {activeTab === 'other' && 'Trust & Testimonial'}
                    </strong>
                  </span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </AdminLayout>
  )
}