'use client'

import React, { useState } from 'react'
import { createSDKDSR } from '@/lib/sdk/dsr/api'

export function DSRCreateModal({
  onClose,
  onSuccess
}: {
  onClose: () => void
  onSuccess: () => void
}) {
  const [type, setType] = useState<string>('access')
  const [subjectName, setSubjectName] = useState('')
  const [subjectEmail, setSubjectEmail] = useState('')
  const [description, setDescription] = useState('')
  const [source, setSource] = useState<string>('web_form')
  const [isSaving, setIsSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const deadline = new Date()
  deadline.setDate(deadline.getDate() + 30)
  const deadlineStr = deadline.toLocaleDateString('de-DE')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!subjectName.trim() || !subjectEmail.trim()) return

    setIsSaving(true)
    setError(null)
    try {
      await createSDKDSR({
        type,
        requester: { name: subjectName.trim(), email: subjectEmail.trim() },
        requestText: description.trim(),
        source
      })
      onSuccess()
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    } finally {
      setIsSaving(false)
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50"
        onClick={onClose}
      />

      {/* Modal */}
      <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
        <div className="p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-semibold text-gray-900">Neue Anfrage anlegen</h2>
            <button
              onClick={onClose}
              className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          {error && (
            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
              {error}
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-4">
            {/* Type */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Art der Anfrage
              </label>
              <select
                value={type}
                onChange={(e) => setType(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
              >
                <option value="access">Art. 15 - Auskunft</option>
                <option value="rectification">Art. 16 - Berichtigung</option>
                <option value="erasure">Art. 17 - Loeschung</option>
                <option value="restriction">Art. 18 - Einschraenkung</option>
                <option value="portability">Art. 20 - Datenpортabilitaet</option>
                <option value="objection">Art. 21 - Widerspruch</option>
              </select>
            </div>

            {/* Subject Name */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Name der betroffenen Person <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={subjectName}
                onChange={(e) => setSubjectName(e.target.value)}
                required
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
                placeholder="Vor- und Nachname"
              />
            </div>

            {/* Subject Email */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                E-Mail der betroffenen Person <span className="text-red-500">*</span>
              </label>
              <input
                type="email"
                value={subjectEmail}
                onChange={(e) => setSubjectEmail(e.target.value)}
                required
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
                placeholder="email@beispiel.de"
              />
            </div>

            {/* Description */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Beschreibung
              </label>
              <textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                rows={3}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm resize-none"
                placeholder="Details zur Anfrage..."
              />
            </div>

            {/* Source */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Eingangskanal
              </label>
              <select
                value={source}
                onChange={(e) => setSource(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
              >
                <option value="web_form">Webformular</option>
                <option value="email">E-Mail</option>
                <option value="phone">Telefon</option>
                <option value="letter">Brief</option>
                <option value="other">Sonstiges</option>
              </select>
            </div>

            {/* Deadline Info */}
            <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
              <p className="text-sm text-blue-700">
                Gesetzliche Frist (Art. 12 DSGVO): Die Anfrage muss bis zum{' '}
                <strong>{deadlineStr}</strong> beantwortet werden (30 Tage ab heute).
              </p>
            </div>

            {/* Buttons */}
            <div className="flex items-center justify-end gap-3 pt-2">
              <button
                type="button"
                onClick={onClose}
                className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
              >
                Abbrechen
              </button>
              <button
                type="submit"
                disabled={isSaving || !subjectName.trim() || !subjectEmail.trim()}
                className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                {isSaving ? 'Wird angelegt...' : 'Anfrage anlegen'}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}