'use client'

import { WebsiteContent, FeatureContent } from '@/lib/content-types'
import HeroEditor from './HeroEditor'

interface ContentEditorTabsProps {
  activeTab: string
  content: WebsiteContent
  isRTL: boolean
  t: (key: string) => string
  updateHero: (field: any, value: string) => void
  updateFeature: (index: number, field: keyof FeatureContent, value: string) => void
  updateFAQ: (index: number, field: 'question' | 'answer', value: string | string[]) => void
  addFAQ: () => void
  removeFAQ: (index: number) => void
  updatePricing: (index: number, field: string, value: string | number | boolean) => void
  updateTrust: (key: 'item1' | 'item2' | 'item3', field: 'value' | 'label', value: string) => void
  updateTestimonial: (field: 'quote' | 'author' | 'role', value: string) => void
}

export default function ContentEditorTabs(props: ContentEditorTabsProps) {
  const { activeTab, content, isRTL, t } = props
  const dir = isRTL ? 'rtl' : 'ltr'

  if (activeTab === 'hero') {
    return <HeroEditor content={content} isRTL={isRTL} t={t} updateHero={props.updateHero} />
  }

  if (activeTab === 'features') {
    return (
      <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) => props.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) => props.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={dir} />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
                <textarea value={feature.description} onChange={(e) => props.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={dir} />
              </div>
            </div>
          </div>
        ))}
      </div>
    )
  }

  if (activeTab === 'faq') {
    return (
      <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={props.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) => props.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={dir} />
                </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) => props.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={dir} />
                </div>
              </div>
              <button onClick={() => props.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>
    )
  }

  if (activeTab === 'pricing') {
    return (
      <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) => props.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={dir} />
                </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) => props.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) => props.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={dir} />
                </div>
                <div className="flex items-end">
                  <label className="flex items-center gap-2">
                    <input type="checkbox" checked={plan.popular || false} onChange={(e) => props.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) => props.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={dir} />
              </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) => props.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={dir} />
                </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) => props.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={dir} />
                </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) => props.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={dir} />
              </div>
            </div>
          </div>
        ))}
      </div>
    )
  }

  // 'other' tab
  return (
    <div className="space-y-8">
      <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) => props.updateTrust(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={dir} />
                </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) => props.updateTrust(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={dir} />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <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) => props.updateTestimonial('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={dir} />
          </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) => props.updateTestimonial('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={dir} />
            </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) => props.updateTestimonial('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={dir} />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}