breakpilot-lehrer/admin-lehrer/app/(admin)/website/uebersetzungen/page.tsx

'use client'

/**
 * Uebersetzungen - Website Content Editor
 *
 * Allows editing all website texts:
 * - Hero Section
 * - Features
 * - FAQ
 * - Pricing
 * - Trust Indicators
 * - Testimonial
 *
 * Includes Live-Preview of website
 */

import { useState, useEffect, useRef, useCallback } from 'react'
import { WebsiteContent, HeroContent, FeatureContent } from '@/lib/content-types'
import { HeroEditor } from './_components/HeroEditor'
import { FeaturesEditor, FAQEditor, PricingEditor, OtherEditor } from './_components/ContentEditors'
import { PreviewPanel } from './_components/PreviewPanel'

// Admin Key (in production via login)
const ADMIN_KEY = 'breakpilot-admin-2024'

// Mapping tabs to website sections
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 UebersetzungenPage() {
  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)

  // Scroll preview to section
  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
      }
    }
  }, [])

  useEffect(() => { scrollToSection(activeTab) }, [activeTab, scrollToSection])
  useEffect(() => { loadContent() }, [])

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

  async function saveChanges() {
    if (!content) return
    setSaving(true)
    setMessage(null)
    try {
      const res = await fetch('/api/website/content', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'x-admin-key': ADMIN_KEY },
        body: JSON.stringify(content),
      })
      if (res.ok) {
        setMessage({ type: 'success', text: 'Gespeichert!' })
      } else {
        const error = await res.json()
        setMessage({ type: 'error', text: error.error || 'Fehler beim Speichern' })
      }
    } catch {
      setMessage({ type: 'error', text: 'Fehler beim Speichern' })
    } finally {
      setSaving(false)
    }
  }

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

  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 })
  }

  function updateFAQ(index: number, field: 'question' | 'answer', value: string | string[]) {
    if (!content) return
    const newFAQ = [...content.faq]
    if (field === 'answer' && typeof value === 'string') {
      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 })
  }

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

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

  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 (
      <div className="flex items-center justify-center py-12">
        <div className="text-xl text-slate-600">Laden...</div>
      </div>
    )
  }

  if (!content) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="text-xl text-red-600">Fehler beim Laden</div>
      </div>
    )
  }

  return (
    <div>
      {/* Toolbar */}
      <div className="bg-white rounded-xl border border-slate-200 p-4 mb-6 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <h1 className="text-lg font-semibold text-slate-900">Uebersetzungen</h1>
          <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">
          {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-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors"
          >
            {saving ? 'Speichern...' : 'Speichern'}
          </button>
        </div>
      </div>

      {/* Tabs */}
      <div className="mb-6">
        <div className="flex gap-1 bg-slate-100 p-1 rounded-lg w-fit">
          {(['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' && 'Hero'}
              {tab === 'features' && 'Features'}
              {tab === 'faq' && 'FAQ'}
              {tab === 'pricing' && 'Preise'}
              {tab === 'other' && 'Sonstige'}
            </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">
          {activeTab === 'hero' && <HeroEditor content={content} updateHero={updateHero} />}
          {activeTab === 'features' && <FeaturesEditor content={content} updateFeature={updateFeature} />}
          {activeTab === 'faq' && <FAQEditor content={content} updateFAQ={updateFAQ} addFAQ={addFAQ} removeFAQ={removeFAQ} />}
          {activeTab === 'pricing' && <PricingEditor content={content} updatePricing={updatePricing} />}
          {activeTab === 'other' && <OtherEditor content={content} setContent={setContent} />}
        </div>

        {/* Live Preview Panel */}
        {showPreview && <PreviewPanel activeTab={activeTab} iframeRef={iframeRef} />}
      </div>
    </div>
  )
}