'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { computeDoshObligation } from '@/lib/incidents/dosh'

interface Props {
  incidentId: string
  currentSeverity: number | null
}

const SEVERITY_LABELS: Record<number, string> = {
  1: 'Minor',
  2: 'Low',
  3: 'Moderate',
  4: 'Serious',
  5: 'Critical / Fatality',
}

export function TriageForm({ incidentId, currentSeverity }: Props) {
  const router = useRouter()
  const [severity, setSeverity] = useState<number>(currentSeverity ?? 1)
  const [isFatality, setIsFatality] = useState(false)
  const [isSBI, setIsSBI] = useState(false)
  const [isDO, setIsDO] = useState(false)
  const [isOD, setIsOD] = useState(false)
  const [triageNotes, setTriageNotes] = useState('')
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [aiLoading, setAiLoading] = useState(false)
  const [aiRationale, setAiRationale] = useState<string | null>(null)

  const dosh = computeDoshObligation({
    is_fatality: isFatality,
    is_serious_bodily_injury: isSBI,
    is_dangerous_occurrence: isDO,
    is_occupational_disease: isOD,
    lost_days: null,
  })

  async function getAiSuggestion() {
    setAiLoading(true)
    setAiRationale(null)
    try {
      const res = await fetch(`/api/incidents/${incidentId}/ai/triage-suggest`, { method: 'POST' })
      if (!res.ok) return
      const data = await res.json() as {
        severity: number
        is_fatality: boolean
        is_serious_bodily_injury: boolean
        is_dangerous_occurrence: boolean
        is_occupational_disease: boolean
        rationale: string
      }
      setSeverity(data.severity)
      setIsFatality(data.is_fatality)
      setIsSBI(data.is_serious_bodily_injury)
      setIsDO(data.is_dangerous_occurrence)
      setIsOD(data.is_occupational_disease)
      setAiRationale(data.rationale)
    } catch {
      // Non-blocking — user can still triage manually
    } finally {
      setAiLoading(false)
    }
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSaving(true)
    setError(null)
    const res = await fetch(`/api/incidents/${incidentId}/triage`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        severity,
        is_fatality: isFatality,
        is_serious_bodily_injury: isSBI,
        is_dangerous_occurrence: isDO,
        is_occupational_disease: isOD,
        triage_notes: triageNotes || null,
      }),
    })
    if (!res.ok) {
      const data = await res.json()
      setError(data.error ?? 'Triage failed')
      setSaving(false)
      return
    }
    router.push(`/hse/incidents/${incidentId}`)
    router.refresh()
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Severity — {SEVERITY_LABELS[severity]}
        </label>
        <input
          type="range" min={1} max={5} value={severity}
          onChange={e => setSeverity(Number(e.target.value))}
          className="w-full accent-blue-600"
        />
        <div className="flex justify-between text-xs text-gray-400 mt-1">
          <span>1 Minor</span><span>3 Moderate</span><span>5 Critical</span>
        </div>
      </div>

      <fieldset className="space-y-2">
        <legend className="text-sm font-medium text-gray-700 mb-2">DOSH Regulatory Checklist (NADOPOD 2004)</legend>
        {[
          { id: 'fatality', label: 'Fatality', value: isFatality, set: setIsFatality },
          { id: 'sbi', label: 'Serious bodily injury', value: isSBI, set: setIsSBI },
          { id: 'do', label: 'Dangerous occurrence', value: isDO, set: setIsDO },
          { id: 'od', label: 'Occupational disease', value: isOD, set: setIsOD },
        ].map(({ id, label, value, set }) => (
          <label key={id} className="flex items-center gap-2 text-sm text-gray-700">
            <input
              type="checkbox" checked={value}
              onChange={e => set(e.target.checked)}
              className="rounded border-gray-300 text-blue-600"
            />
            {label}
          </label>
        ))}
      </fieldset>

      {dosh.reasons.length > 0 && (
        <div className="rounded-lg bg-red-50 border border-red-200 p-3 space-y-1">
          <p className="text-xs font-semibold text-red-700 uppercase tracking-wide">DOSH Reporting Required</p>
          {dosh.reasons.map(r => (
            <p key={r} className="text-xs text-red-600">{r}</p>
          ))}
          {dosh.requires_immediate_notification && (
            <p className="text-xs font-bold text-red-700 mt-1">⚠ Immediate notification required (within 24h)</p>
          )}
        </div>
      )}

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Triage notes (optional)</label>
        <textarea
          value={triageNotes}
          onChange={e => setTriageNotes(e.target.value)}
          rows={3}
          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          placeholder="Initial assessment, immediate actions taken..."
        />
      </div>

      {aiRationale && (
        <div className="rounded-lg bg-purple-50 border border-purple-200 p-3">
          <p className="text-xs font-semibold text-purple-700 mb-1">AI Suggestion Rationale</p>
          <p className="text-xs text-purple-600">{aiRationale}</p>
          <p className="text-xs text-purple-400 mt-1">Fields pre-filled — review before submitting.</p>
        </div>
      )}

      {error && <p className="text-sm text-red-600">{error}</p>}

      <div className="flex gap-3">
        <button
          type="button"
          onClick={getAiSuggestion}
          disabled={aiLoading || saving}
          className="flex-1 bg-purple-50 text-purple-700 border border-purple-300 rounded-lg py-2 text-sm font-semibold disabled:opacity-50 hover:bg-purple-100"
        >
          {aiLoading ? 'Getting suggestion…' : 'Get AI Suggestion'}
        </button>
        <button
          type="submit"
          disabled={saving}
          className="flex-1 bg-blue-600 text-white rounded-lg py-2 text-sm font-semibold disabled:opacity-50"
        >
          {saving ? 'Saving…' : 'Complete Triage'}
        </button>
      </div>
    </form>
  )
}