'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 Section5Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
  const [formData, setFormData] = useState({
    dpo_consulted: dsfa.dpo_consulted || false,
    dpo_name: dsfa.dpo_name || '',
    dpo_opinion: dsfa.dpo_opinion || '',
    authority_consulted: dsfa.authority_consulted || false,
    authority_reference: dsfa.authority_reference || '',
    authority_decision: dsfa.authority_decision || '',
  })

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

  return (
    <div className="space-y-6">
      {/* DPO Consultation */}
      <div className="bg-blue-50 border border-blue-200 rounded-xl p-6">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
            <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          </div>
          <div className="flex-1">
            <label className="flex items-center gap-3">
              <input
                type="checkbox"
                checked={formData.dpo_consulted}
                onChange={(e) => setFormData(prev => ({ ...prev, dpo_consulted: e.target.checked }))}
                className="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <span className="font-medium text-blue-800">
                Datenschutzbeauftragter wurde konsultiert
              </span>
            </label>
            <p className="text-sm text-blue-600 mt-2">
              Gemaess Art. 35 Abs. 2 DSGVO muss bei einer DSFA der Rat des DSB eingeholt werden.
            </p>
          </div>
        </div>

        {formData.dpo_consulted && (
          <div className="mt-4 space-y-4 pt-4 border-t border-blue-200">
            <div>
              <label className="block text-sm font-medium text-blue-800 mb-2">Name des DSB</label>
              <input
                type="text"
                value={formData.dpo_name}
                onChange={(e) => setFormData(prev => ({ ...prev, dpo_name: e.target.value }))}
                className="w-full px-4 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"
                placeholder="Name des Datenschutzbeauftragten"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-blue-800 mb-2">Stellungnahme des DSB</label>
              <textarea
                value={formData.dpo_opinion}
                onChange={(e) => setFormData(prev => ({ ...prev, dpo_opinion: e.target.value }))}
                className="w-full px-4 py-3 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"
                rows={4}
                placeholder="Stellungnahme und Empfehlungen des DSB..."
              />
            </div>
          </div>
        )}
      </div>

      {/* Authority Consultation */}
      <div className="bg-orange-50 border border-orange-200 rounded-xl p-6">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
            <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
            </svg>
          </div>
          <div className="flex-1">
            <label className="flex items-center gap-3">
              <input
                type="checkbox"
                checked={formData.authority_consulted}
                onChange={(e) => setFormData(prev => ({ ...prev, authority_consulted: e.target.checked }))}
                className="w-5 h-5 rounded border-gray-300 text-orange-600 focus:ring-orange-500"
              />
              <span className="font-medium text-orange-800">
                Aufsichtsbehoerde wurde konsultiert (Art. 36)
              </span>
            </label>
            <p className="text-sm text-orange-600 mt-2">
              Falls nach Durchfuehrung der Massnahmen weiterhin ein hohes Risiko besteht, ist die Aufsichtsbehoerde zu konsultieren.
            </p>
          </div>
        </div>

        {formData.authority_consulted && (
          <div className="mt-4 space-y-4 pt-4 border-t border-orange-200">
            <div>
              <label className="block text-sm font-medium text-orange-800 mb-2">Aktenzeichen / Referenz</label>
              <input
                type="text"
                value={formData.authority_reference}
                onChange={(e) => setFormData(prev => ({ ...prev, authority_reference: e.target.value }))}
                className="w-full px-4 py-2 border border-orange-300 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white"
                placeholder="Aktenzeichen der Behoerde"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-orange-800 mb-2">Entscheidung der Behoerde</label>
              <textarea
                value={formData.authority_decision}
                onChange={(e) => setFormData(prev => ({ ...prev, authority_decision: e.target.value }))}
                className="w-full px-4 py-3 border border-orange-300 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white"
                rows={4}
                placeholder="Entscheidung und Auflagen der Aufsichtsbehoerde..."
              />
            </div>
          </div>
        )}
      </div>

      {/* Info Box */}
      <div className="bg-gray-50 border border-gray-200 rounded-xl p-4">
        <div className="flex items-start gap-3">
          <svg className="w-5 h-5 text-gray-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <div className="text-sm text-gray-600">
            <p className="font-medium text-gray-700 mb-1">Hinweis zur Konsultation</p>
            <p>
              Die Konsultation der Aufsichtsbehoerde ist nur erforderlich, wenn nach Umsetzung der
              geplanten Massnahmen weiterhin ein hohes Risiko fuer die Rechte und Freiheiten der
              betroffenen Personen besteht.
            </p>
          </div>
        </div>
      </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>
  )
}
