'use client'

import { useState } from 'react'
import { AISystem } from './types'

interface AddSystemFormProps {
  onSubmit: (system: Omit<AISystem, 'id' | 'assessmentDate' | 'assessmentResult'>) => void
  onCancel: () => void
  initialData?: AISystem | null
}

export function AddSystemForm({ onSubmit, onCancel, initialData }: AddSystemFormProps) {
  const [formData, setFormData] = useState({
    name: initialData?.name || '',
    description: initialData?.description || '',
    purpose: initialData?.purpose || '',
    sector: initialData?.sector || '',
    classification: (initialData?.classification || 'unclassified') as AISystem['classification'],
    status: (initialData?.status || 'draft') as AISystem['status'],
    obligations: initialData?.obligations || [] as string[],
  })

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">
        {initialData ? 'KI-System bearbeiten' : 'Neues KI-System registrieren'}
      </h3>
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
          <input
            type="text"
            value={formData.name}
            onChange={e => setFormData({ ...formData, name: e.target.value })}
            placeholder="z.B. Dokumenten-Scanner"
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
          <textarea
            value={formData.description}
            onChange={e => setFormData({ ...formData, description: e.target.value })}
            placeholder="Beschreiben Sie das KI-System..."
            rows={2}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Einsatzzweck</label>
            <input
              type="text"
              value={formData.purpose}
              onChange={e => setFormData({ ...formData, purpose: e.target.value })}
              placeholder="z.B. Texterkennung"
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Sektor</label>
            <input
              type="text"
              value={formData.sector}
              onChange={e => setFormData({ ...formData, sector: e.target.value })}
              placeholder="z.B. Verwaltung"
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            />
          </div>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Vorklassifizierung</label>
          <select
            value={formData.classification}
            onChange={e => setFormData({ ...formData, classification: e.target.value as AISystem['classification'] })}
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          >
            <option value="unclassified">Noch nicht klassifiziert</option>
            <option value="minimal-risk">Minimales Risiko</option>
            <option value="limited-risk">Begrenztes Risiko</option>
            <option value="high-risk">Hochrisiko</option>
            <option value="prohibited">Verboten</option>
          </select>
        </div>
      </div>
      <div className="mt-6 flex items-center justify-end gap-3">
        <button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
          Abbrechen
        </button>
        <button
          onClick={() => onSubmit(formData)}
          disabled={!formData.name}
          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
            formData.name ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
          }`}
        >
          {initialData ? 'Speichern' : 'Registrieren'}
        </button>
      </div>
    </div>
  )
}