'use client'

import { useState, useEffect, useRef, useCallback } from 'react'
import { WebsiteContent, HeroContent, FeatureContent } from '@/lib/content-types'
import { useLanguage } from '@/lib/LanguageContext'
import { ADMIN_KEY, SECTION_MAP, ContentTab } from './types'

export function useContentEditor() {
  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<ContentTab>('hero')
  const [showPreview, setShowPreview] = useState(true)
  const iframeRef = useRef<HTMLIFrameElement>(null)

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

  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
    const newFAQ = content.faq.filter((_, i) => i !== index)
    setContent({ ...content, faq: newFAQ })
  }

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

  function updateTrust(key: 'item1' | 'item2' | 'item3', field: 'value' | 'label', value: string) {
    if (!content) return
    setContent({
      ...content,
      trust: { ...content.trust, [key]: { ...content.trust[key], [field]: value } },
    })
  }

  function updateTestimonial(field: 'quote' | 'author' | 'role', value: string) {
    if (!content) return
    setContent({
      ...content,
      testimonial: { ...content.testimonial, [field]: value },
    })
  }

  return {
    language, setLanguage, t, isRTL,
    content, loading, saving, message,
    activeTab, setActiveTab,
    showPreview, setShowPreview,
    iframeRef,
    saveChanges,
    updateHero, updateFeature, updateFAQ,
    addFAQ, removeFAQ, updatePricing,
    updateTrust, updateTestimonial,
  }
}