'use client'

import { useState } from 'react'
import { Hazard, MitigationFormData } from './types'

export function MitigationForm({
  onSubmit,
  onCancel,
  hazards,
  preselectedType,
  onOpenLibrary,
}: {
  onSubmit: (data: MitigationFormData) => void
  onCancel: () => void
  hazards: Hazard[]
  preselectedType?: 'design' | 'protection' | 'information'
  onOpenLibrary: (type?: string) => void
}) {
  const [formData, setFormData] = useState<MitigationFormData>({
    title: '',
    description: '',
    reduction_type: preselectedType || 'design',
    linked_hazard_ids: [],
  })

  function toggleHazard(id: string) {
    setFormData((prev) => ({
      ...prev,
      linked_hazard_ids: prev.linked_hazard_ids.includes(id)
        ? prev.linked_hazard_ids.filter((h) => h !== id)
        : [...prev.linked_hazard_ids, id],
    }))
  }

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Neue Massnahme</h3>
        <button
          onClick={() => onOpenLibrary(formData.reduction_type)}
          className="text-sm px-3 py-1.5 bg-purple-50 text-purple-700 border border-purple-200 rounded-lg hover:bg-purple-100 transition-colors"
        >
          Aus Bibliothek waehlen
        </button>
      </div>
      <div className="space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Titel *</label>
            <input
              type="text"
              value={formData.title}
              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
              placeholder="z.B. Lichtvorhang an Gefahrenstelle"
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Reduktionstyp</label>
            <select
              value={formData.reduction_type}
              onChange={(e) => setFormData({ ...formData, reduction_type: e.target.value as MitigationFormData['reduction_type'] })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
            >
              <option value="design">Stufe 1: Design - Inhaerent sichere Konstruktion</option>
              <option value="protection">Stufe 2: Schutz - Technische Schutzmassnahmen</option>
              <option value="information">Stufe 3: Information - Hinweise und Schulungen</option>
            </select>
          </div>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beschreibung</label>
          <textarea
            value={formData.description}
            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
            rows={2}
            placeholder="Detaillierte Beschreibung der Massnahme..."
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
          />
        </div>
        {hazards.length > 0 && (
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Verknuepfte Gefaehrdungen</label>
            <div className="flex flex-wrap gap-2">
              {hazards.map((h) => (
                <button
                  key={h.id}
                  onClick={() => toggleHazard(h.id)}
                  className={`px-3 py-1.5 text-xs rounded-lg border transition-colors ${
                    formData.linked_hazard_ids.includes(h.id)
                      ? 'border-purple-400 bg-purple-50 text-purple-700'
                      : 'border-gray-200 bg-white text-gray-600 hover:bg-gray-50'
                  }`}
                >
                  {h.name}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
      <div className="mt-4 flex items-center gap-3">
        <button
          onClick={() => onSubmit(formData)}
          disabled={!formData.title}
          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
            formData.title
              ? 'bg-purple-600 text-white hover:bg-purple-700'
              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
          }`}
        >
          Hinzufuegen
        </button>
        <button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
          Abbrechen
        </button>
      </div>
    </div>
  )
}
