'use client'

import React, { useState } from 'react'
import { DSFA } from '@/lib/sdk/dsfa/types'

interface SectionProps {
  dsfa: DSFA
  onUpdate: (data: Record<string, unknown>) => Promise<void>
  isSubmitting: boolean
}

export function Section2Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
  const [formData, setFormData] = useState({
    necessity_assessment: dsfa.necessity_assessment || '',
    proportionality_assessment: dsfa.proportionality_assessment || '',
    data_minimization: dsfa.data_minimization || '',
    alternatives_considered: dsfa.alternatives_considered || '',
    retention_justification: dsfa.retention_justification || '',
  })

  const handleSave = () => {
    onUpdate(formData)
  }

  const fields = [
    {
      key: 'necessity_assessment',
      label: 'Notwendigkeit der Verarbeitung *',
      hint: 'Erklaeren Sie, warum die Verarbeitung fuer den angegebenen Zweck notwendig ist.',
      placeholder: 'Beschreiben Sie die Notwendigkeit...',
      rows: 4,
    },
    {
      key: 'proportionality_assessment',
      label: 'Verhaeltnismaessigkeit *',
      hint: 'Begruenden Sie, warum der Eingriff in die Rechte der Betroffenen verhaeltnismaessig ist.',
      placeholder: 'Beschreiben Sie die Verhaeltnismaessigkeit...',
      rows: 4,
    },
    {
      key: 'data_minimization',
      label: 'Datenminimierung',
      hint: 'Welche Massnahmen wurden ergriffen, um nur die notwendigen Daten zu erheben?',
      placeholder: 'Beschreiben Sie die Datenminimierungsmassnahmen...',
      rows: 3,
    },
    {
      key: 'alternatives_considered',
      label: 'Gepruefe Alternativen',
      hint: 'Welche weniger eingriffsintensiven Alternativen wurden geprueft?',
      placeholder: 'Beschreiben Sie gepruefe Alternativen...',
      rows: 3,
    },
    {
      key: 'retention_justification',
      label: 'Speicherdauer / Loeschfristen',
      hint: undefined,
      placeholder: 'Begruenden Sie die geplante Speicherdauer...',
      rows: 3,
    },
  ] as const

  return (
    <div className="space-y-6">
      {fields.map(({ key, label, hint, placeholder, rows }) => (
        <div key={key}>
          <label className="block text-sm font-medium text-gray-700 mb-2">{label}</label>
          {hint && <p className="text-xs text-gray-500 mb-2">{hint}</p>}
          <textarea
            value={formData[key]}
            onChange={(e) => setFormData(prev => ({ ...prev, [key]: e.target.value }))}
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            rows={rows}
            placeholder={placeholder}
          />
        </div>
      ))}

      {/* Save Button */}
      <div className="flex justify-end pt-4 border-t border-gray-200">
        <button
          onClick={handleSave}
          disabled={isSubmitting}
          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
        >
          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
        </button>
      </div>
    </div>
  )
}
