'use client'

import { useEffect, useState } from 'react'
import type { HazardLite, RiskSuggestion } from '../_hooks/useRiskAssessment'

function enLevel(idx: number): string {
  if (idx >= 45) return 'kritisch'
  if (idx >= 30) return 'hoch'
  if (idx >= 18) return 'mittel'
  if (idx >= 9) return 'gering'
  return 'vernachlaessigbar'
}

function fkBand(score: number): string {
  if (score > 400) return 'sehr hoch'
  if (score > 200) return 'hoch'
  if (score > 70) return 'wesentlich'
  if (score > 20) return 'moeglich'
  return 'gering'
}

function badgeColor(label: string): string {
  switch (label) {
    case 'kritisch':
    case 'sehr hoch':
      return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
    case 'hoch':
      return 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300'
    case 'mittel':
    case 'wesentlich':
      return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300'
    case 'gering':
    case 'moeglich':
      return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300'
    default:
      return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300'
  }
}

function Field({
  label,
  value,
  step,
  justification,
  onChange,
}: {
  label: string
  value: number
  step?: number
  justification: string
  onChange: (v: number) => void
}) {
  return (
    <div className="flex items-start gap-2">
      <div className="flex-1">
        <div className="text-xs font-medium text-gray-700 dark:text-gray-300">{label}</div>
        <div className="text-[11px] text-gray-400 leading-tight" title={justification}>
          {justification}
        </div>
      </div>
      <input
        type="number"
        step={step || 1}
        value={value}
        onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
        className="w-16 px-2 py-1 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-right"
      />
    </div>
  )
}

function Panel({
  title,
  formula,
  score,
  badge,
  children,
}: {
  title: string
  formula: string
  score: number
  badge: string
  children: React.ReactNode
}) {
  return (
    <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-3 space-y-2">
      <div className="flex items-center justify-between">
        <div className="text-sm font-semibold text-gray-800 dark:text-gray-200">{title}</div>
        <span className={`text-[11px] px-2 py-0.5 rounded-full ${badgeColor(badge)}`}>{badge}</span>
      </div>
      <div className="space-y-1.5">{children}</div>
      <div className="pt-2 border-t border-gray-100 dark:border-gray-700 flex items-center justify-between">
        <code className="text-[11px] text-gray-500">{formula}</code>
        <span className="text-sm font-bold text-gray-900 dark:text-gray-100">
          R = {Number.isInteger(score) ? score : score.toFixed(1)}
        </span>
      </div>
    </div>
  )
}

export function RiskModelCard({
  hazard,
  suggestion,
}: {
  hazard: HazardLite
  suggestion?: RiskSuggestion
}) {
  const [en, setEn] = useState({ s: 0, f: 0, w: 0, p: 0 })
  const [fk, setFk] = useState({ p: 0, e: 0, c: 0 })

  useEffect(() => {
    if (!suggestion) return
    setEn({
      s: suggestion.en62061.severity.value,
      f: suggestion.en62061.frequency.value,
      w: suggestion.en62061.probability.value,
      p: suggestion.en62061.avoidance.value,
    })
    setFk({
      p: suggestion.fine_kinney.probability.value,
      e: suggestion.fine_kinney.exposure.value,
      c: suggestion.fine_kinney.consequence.value,
    })
  }, [suggestion])

  if (!suggestion) {
    return (
      <div className="rounded-xl border border-gray-200 dark:border-gray-700 p-4 text-sm text-gray-500">
        {hazard.name} — keine Bewertung verfuegbar
      </div>
    )
  }

  const enScore = en.s * (en.f + en.w + en.p)
  const fkScore = fk.p * fk.e * fk.c

  return (
    <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 space-y-3">
      <div className="flex items-center justify-between gap-3 flex-wrap">
        <div className="font-semibold text-gray-900 dark:text-gray-100">{hazard.name}</div>
        <span className="text-xs text-gray-400">Kontaktart: {suggestion.contact_mode}</span>
      </div>
      <div className="grid md:grid-cols-2 gap-4">
        <Panel title="EN-62061-Stil" formula={suggestion.en62061.formula} score={enScore} badge={enLevel(enScore)}>
          <Field label="Schwere S" value={en.s} justification={suggestion.en62061.severity.justification} onChange={(v) => setEn({ ...en, s: v })} />
          <Field label="Haeufigkeit F" value={en.f} justification={suggestion.en62061.frequency.justification} onChange={(v) => setEn({ ...en, f: v })} />
          <Field label="Wahrscheinlichkeit W" value={en.w} justification={suggestion.en62061.probability.justification} onChange={(v) => setEn({ ...en, w: v })} />
          <Field label="Vermeidbarkeit P" value={en.p} justification={suggestion.en62061.avoidance.justification} onChange={(v) => setEn({ ...en, p: v })} />
        </Panel>
        <Panel title="Fine-Kinney (US)" formula={suggestion.fine_kinney.formula} score={fkScore} badge={fkBand(fkScore)}>
          <Field label="Wahrscheinlichkeit P" value={fk.p} step={0.1} justification={suggestion.fine_kinney.probability.justification} onChange={(v) => setFk({ ...fk, p: v })} />
          <Field label="Exposition E" value={fk.e} step={0.5} justification={suggestion.fine_kinney.exposure.justification} onChange={(v) => setFk({ ...fk, e: v })} />
          <Field label="Konsequenz C" value={fk.c} justification={suggestion.fine_kinney.consequence.justification} onChange={(v) => setFk({ ...fk, c: v })} />
        </Panel>
      </div>
      <p className="text-[11px] text-gray-400">{suggestion.note}</p>
    </div>
  )
}
