'use client'

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

// =============================================================================
// Features Editor
// =============================================================================

interface FeaturesEditorProps {
  content: WebsiteContent
  updateFeature: (index: number, field: keyof FeatureContent, value: string) => void
}

export function FeaturesEditor({ content, updateFeature }: FeaturesEditorProps) {
  return (
    <div className="space-y-6">
      <h2 className="text-xl font-semibold text-slate-900">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-blue-500 focus:border-blue-500"
                />
              </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-blue-500 focus:border-blue-500"
              />
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

// =============================================================================
// FAQ Editor
// =============================================================================

interface FAQEditorProps {
  content: WebsiteContent
  updateFAQ: (index: number, field: 'question' | 'answer', value: string | string[]) => void
  addFAQ: () => void
  removeFAQ: (index: number) => void
}

export function FAQEditor({ content, updateFAQ, addFAQ, removeFAQ }: FAQEditorProps) {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-slate-900">FAQ</h2>
        <button
          onClick={addFAQ}
          className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
        >
          + Frage hinzufuegen
        </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">
            <div className="flex-1 space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">
                  Frage {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-blue-500 focus:border-blue-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">
                  Antwort
                </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-blue-500 focus:border-blue-500 font-mono text-sm"
                />
              </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 Editor
// =============================================================================

interface PricingEditorProps {
  content: WebsiteContent
  updatePricing: (index: number, field: string, value: string | number | boolean) => void
}

export function PricingEditor({ content, updatePricing }: PricingEditorProps) {
  return (
    <div className="space-y-6">
      <h2 className="text-xl font-semibold text-slate-900">Preise</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-blue-500 focus:border-blue-500"
                />
              </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-blue-500 focus:border-blue-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-blue-500 focus:border-blue-500"
                />
              </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-blue-600 rounded"
                  />
                  <span className="text-sm text-slate-700">Beliebt</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-blue-500 focus:border-blue-500"
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">
                  Aufgaben
                </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-blue-500 focus:border-blue-500"
                />
              </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-blue-500 focus:border-blue-500"
                />
              </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-blue-500 focus:border-blue-500 font-mono text-sm"
              />
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

// =============================================================================
// Other Section Editor (Trust + Testimonial)
// =============================================================================

interface OtherEditorProps {
  content: WebsiteContent
  setContent: (content: WebsiteContent) => void
}

export function OtherEditor({ content, setContent }: OtherEditorProps) {
  return (
    <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-blue-500 focus:border-blue-500"
                  />
                </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-blue-500 focus:border-blue-500"
                  />
                </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-blue-500 focus:border-blue-500"
            />
          </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-blue-500 focus:border-blue-500"
              />
            </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-blue-500 focus:border-blue-500"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
