'use client'

import type { RiskFormData } from './types'
import { RISK_COLORS, CATEGORY_OPTIONS, STATUS_OPTIONS, calculateRiskLevel } from './types'

interface RiskFormProps {
  formData: RiskFormData
  setFormData: (data: RiskFormData) => void
  isCreate: boolean
}

export default function RiskForm({ formData, setFormData, isCreate }: RiskFormProps) {
  return (
    <div className="space-y-4">
      {isCreate && (
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Risk ID</label>
          <input
            type="text"
            value={formData.risk_id}
            onChange={(e) => setFormData({ ...formData, risk_id: e.target.value })}
            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
          />
        </div>
      )}

      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Titel *</label>
        <input
          type="text"
          value={formData.title}
          onChange={(e) => setFormData({ ...formData, title: e.target.value })}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
        <textarea
          value={formData.description}
          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
          rows={2}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Kategorie</label>
          <select
            value={formData.category}
            onChange={(e) => setFormData({ ...formData, category: e.target.value })}
            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
          >
            {CATEGORY_OPTIONS.map((c) => (
              <option key={c.value} value={c.value}>{c.label}</option>
            ))}
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Status</label>
          <select
            value={formData.status}
            onChange={(e) => setFormData({ ...formData, status: e.target.value })}
            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
          >
            {STATUS_OPTIONS.map((s) => (
              <option key={s} value={s}>{s}</option>
            ))}
          </select>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Likelihood (1-5)</label>
          <input
            type="range"
            min="1"
            max="5"
            value={formData.likelihood}
            onChange={(e) => setFormData({ ...formData, likelihood: parseInt(e.target.value) })}
            className="w-full"
          />
          <div className="flex justify-between text-xs text-slate-500">
            <span>1</span>
            <span className="font-medium">{formData.likelihood}</span>
            <span>5</span>
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Impact (1-5)</label>
          <input
            type="range"
            min="1"
            max="5"
            value={formData.impact}
            onChange={(e) => setFormData({ ...formData, impact: parseInt(e.target.value) })}
            className="w-full"
          />
          <div className="flex justify-between text-xs text-slate-500">
            <span>1</span>
            <span className="font-medium">{formData.impact}</span>
            <span>5</span>
          </div>
        </div>
      </div>

      <div className="p-3 bg-slate-50 rounded-lg">
        <p className="text-sm text-slate-600">
          Berechnetes Risiko:{' '}
          <span className={`font-medium px-2 py-0.5 rounded text-white ${RISK_COLORS[calculateRiskLevel(formData.likelihood, formData.impact)]}`}>
            {calculateRiskLevel(formData.likelihood, formData.impact).toUpperCase()} ({formData.likelihood * formData.impact})
          </span>
        </p>
      </div>

      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Verantwortlich</label>
        <input
          type="text"
          value={formData.owner}
          onChange={(e) => setFormData({ ...formData, owner: e.target.value })}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Behandlungsplan</label>
        <textarea
          value={formData.treatment_plan}
          onChange={(e) => setFormData({ ...formData, treatment_plan: e.target.value })}
          rows={2}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
    </div>
  )
}
