'use client'

import { useState } from 'react'
import { RiskLikelihood, RiskImpact, calculateRiskScore, getRiskSeverityFromScore } from '@/lib/sdk'

export interface RiskFormData {
  title: string
  description: string
  category: string
  likelihood: RiskLikelihood
  impact: RiskImpact
}

export function RiskForm({
  onSubmit,
  onCancel,
  initialData,
}: {
  onSubmit: (data: RiskFormData) => void
  onCancel: () => void
  initialData?: Partial<RiskFormData>
}) {
  const [formData, setFormData] = useState<RiskFormData>({
    title: initialData?.title || '',
    description: initialData?.description || '',
    category: initialData?.category || 'technical',
    likelihood: initialData?.likelihood || 3,
    impact: initialData?.impact || 3,
  })

  const score = calculateRiskScore(formData.likelihood, formData.impact)
  const severity = getRiskSeverityFromScore(score)

  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 ? 'Risiko bearbeiten' : 'Neues Risiko'}
      </h3>

      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
          <input
            type="text"
            value={formData.title}
            onChange={e => setFormData({ ...formData, title: e.target.value })}
            placeholder="z.B. Datenverlust durch Systemausfall"
            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 Risiko..."
            rows={3}
            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">Kategorie</label>
          <select
            value={formData.category}
            onChange={e => setFormData({ ...formData, category: e.target.value })}
            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="technical">Technisch</option>
            <option value="organizational">Organisatorisch</option>
            <option value="legal">Rechtlich</option>
            <option value="operational">Operativ</option>
            <option value="strategic">Strategisch</option>
          </select>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Wahrscheinlichkeit (1-5)
            </label>
            <input
              type="range"
              min={1}
              max={5}
              value={formData.likelihood}
              onChange={e => setFormData({ ...formData, likelihood: Number(e.target.value) as RiskLikelihood })}
              className="w-full"
            />
            <div className="flex justify-between text-xs text-gray-500 mt-1">
              <span>Sehr unwahrscheinlich</span>
              <span className="font-bold">{formData.likelihood}</span>
              <span>Sehr wahrscheinlich</span>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Auswirkung (1-5)</label>
            <input
              type="range"
              min={1}
              max={5}
              value={formData.impact}
              onChange={e => setFormData({ ...formData, impact: Number(e.target.value) as RiskImpact })}
              className="w-full"
            />
            <div className="flex justify-between text-xs text-gray-500 mt-1">
              <span>Gering</span>
              <span className="font-bold">{formData.impact}</span>
              <span>Katastrophal</span>
            </div>
          </div>
        </div>

        <div
          className={`p-4 rounded-lg ${
            severity === 'CRITICAL'
              ? 'bg-red-50 border border-red-200'
              : severity === 'HIGH'
              ? 'bg-orange-50 border border-orange-200'
              : severity === 'MEDIUM'
              ? 'bg-yellow-50 border border-yellow-200'
              : 'bg-green-50 border border-green-200'
          }`}
        >
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium">Berechneter Risikoscore:</span>
            <span
              className={`px-3 py-1 rounded-full text-sm font-bold ${
                severity === 'CRITICAL'
                  ? 'bg-red-100 text-red-700'
                  : severity === 'HIGH'
                  ? 'bg-orange-100 text-orange-700'
                  : severity === 'MEDIUM'
                  ? 'bg-yellow-100 text-yellow-700'
                  : 'bg-green-100 text-green-700'
              }`}
            >
              {score} ({severity})
            </span>
          </div>
        </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.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'
          }`}
        >
          Speichern
        </button>
      </div>
    </div>
  )
}