'use client'

import { useState } from 'react'

interface PublicFormSettings {
  enabled: boolean
  formUrl: string
  allowedTypes: string[]
  requireIdentity: boolean
  customCss: string
}

const DSR_TYPES = [
  { value: 'access', label: 'Auskunft (Art. 15)' },
  { value: 'rectification', label: 'Berichtigung (Art. 16)' },
  { value: 'erasure', label: 'Loeschung (Art. 17)' },
  { value: 'restriction', label: 'Einschraenkung (Art. 18)' },
  { value: 'portability', label: 'Datenportabilitaet (Art. 20)' },
  { value: 'objection', label: 'Widerspruch (Art. 21)' },
]

export function PublicFormConfig() {
  const [settings, setSettings] = useState<PublicFormSettings>({
    enabled: false,
    formUrl: '',
    allowedTypes: ['access', 'erasure', 'portability'],
    requireIdentity: true,
    customCss: '',
  })

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h3 className="text-base font-semibold text-slate-900">Oeffentliches DSR-Formular</h3>
        <label className="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" checked={settings.enabled}
            onChange={e => setSettings({ ...settings, enabled: e.target.checked })}
            className="rounded border-gray-300 text-purple-600" />
          <span className="text-sm text-slate-600">Aktiviert</span>
        </label>
      </div>

      {!settings.enabled ? (
        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 text-sm text-gray-600">
          Das oeffentliche DSR-Formular ermoeglicht Betroffenen, Datenschutzanfragen direkt
          ueber Ihre Website einzureichen — ohne Anmeldung. Aktivieren Sie es, um den
          Embed-Code zu generieren.
        </div>
      ) : (
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Erlaubte Anfragetypen</label>
            <div className="grid grid-cols-2 gap-2">
              {DSR_TYPES.map(type => (
                <label key={type.value} className="flex items-center gap-2 text-sm text-slate-600">
                  <input type="checkbox"
                    checked={settings.allowedTypes.includes(type.value)}
                    onChange={e => {
                      const types = e.target.checked
                        ? [...settings.allowedTypes, type.value]
                        : settings.allowedTypes.filter(t => t !== type.value)
                      setSettings({ ...settings, allowedTypes: types })
                    }}
                    className="rounded border-gray-300 text-purple-600" />
                  {type.label}
                </label>
              ))}
            </div>
          </div>

          <label className="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" checked={settings.requireIdentity}
              onChange={e => setSettings({ ...settings, requireIdentity: e.target.checked })}
              className="rounded border-gray-300 text-purple-600" />
            <span className="text-sm text-slate-600">Identitaetsnachweis erforderlich</span>
          </label>

          <div className="bg-slate-50 border border-slate-200 rounded-lg p-4">
            <h4 className="text-sm font-medium text-slate-700 mb-2">Embed-Code</h4>
            <pre className="text-xs font-mono bg-white border border-slate-200 rounded p-3 overflow-x-auto">
{`<iframe
  src="https://ihre-domain.breakpilot.ai/dsr/public-form"
  width="100%"
  height="600"
  frameborder="0"
  title="Datenschutzanfrage"
></iframe>`}
            </pre>
            <p className="text-xs text-slate-500 mt-2">
              Embed-Code wird nach Anbindung an Production generiert.
            </p>
          </div>
        </div>
      )}
    </div>
  )
}