'use client'

interface NewDocForm {
  type: string
  name: string
  description: string
}

interface NewDocumentModalProps {
  newDocForm: NewDocForm
  onChange: (form: NewDocForm) => void
  onClose: () => void
  onCreate: () => void
  creatingDoc: boolean
}

export default function NewDocumentModal({
  newDocForm,
  onChange,
  onClose,
  onCreate,
  creatingDoc,
}: NewDocumentModalProps) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
        <div className="px-6 py-4 border-b border-gray-200">
          <h2 className="text-lg font-bold text-gray-900">Neues Dokument erstellen</h2>
        </div>
        <div className="p-6 space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Dokumenttyp</label>
            <select
              value={newDocForm.type}
              onChange={(e) => onChange({ ...newDocForm, type: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
            >
              <option value="privacy_policy">Datenschutzerklärung</option>
              <option value="terms">AGB</option>
              <option value="cookie_policy">Cookie-Richtlinie</option>
              <option value="imprint">Impressum</option>
              <option value="dpa">AVV (Auftragsverarbeitung)</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
            <input
              type="text"
              value={newDocForm.name}
              onChange={(e) => onChange({ ...newDocForm, name: e.target.value })}
              placeholder="z.B. Datenschutzerklärung Website"
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung (optional)</label>
            <textarea
              rows={2}
              value={newDocForm.description}
              onChange={(e) => onChange({ ...newDocForm, description: e.target.value })}
              placeholder="Kurze Beschreibung..."
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
            />
          </div>
        </div>
        <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
          <button
            onClick={onClose}
            className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg"
          >
            Abbrechen
          </button>
          <button
            onClick={onCreate}
            disabled={creatingDoc || !newDocForm.name.trim()}
            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
          >
            {creatingDoc ? 'Erstellen...' : 'Erstellen'}
          </button>
        </div>
      </div>
    </div>
  )
}