'use client'

import { useEffect, useState } from 'react'

type SimilarIncident = {
  id: string
  reference_no: string | null
  incident_type: string
  description: string
  severity: number | null
  similarity: number
}

const TYPE_LABELS: Record<string, string> = {
  injury: 'Injury',
  near_miss: 'Near Miss',
  hazard: 'Hazard',
  asset_damage: 'Asset Damage',
  environmental: 'Environmental',
  security: 'Security',
  fire: 'Fire',
}

interface Props {
  incidentId: string
}

export function SimilarIncidentsPanel({ incidentId }: Props) {
  const [similar, setSimilar] = useState<SimilarIncident[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(false)

  useEffect(() => {
    fetch(`/ims/api/incidents/${incidentId}/similar`)
      .then(r => {
        if (!r.ok) throw new Error('failed')
        return r.json()
      })
      .then(data => setSimilar(Array.isArray(data) ? data : []))
      .catch(() => setError(true))
      .finally(() => setLoading(false))
  }, [incidentId])

  if (loading) {
    return (
      <div className="mt-6 bg-white rounded-xl shadow-sm p-5">
        <p className="text-sm text-gray-400">Loading similar incidents…</p>
      </div>
    )
  }
  if (error || similar.length === 0) return null

  return (
    <div className="mt-6 bg-white rounded-xl shadow-sm p-5">
      <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-3">
        Similar Past Incidents
      </h2>
      <div className="space-y-3">
        {similar.map(inc => (
          <a
            key={inc.id}
            href={`/hse/incidents/${inc.id}`}
            className="block border border-gray-200 rounded-lg p-3 hover:border-blue-300 hover:bg-blue-50 transition-colors"
          >
            <div className="flex items-center justify-between mb-1">
              <span className="text-xs font-medium text-gray-500">
                {inc.reference_no ?? inc.id.slice(0, 8)} · {TYPE_LABELS[inc.incident_type] ?? inc.incident_type}
              </span>
              <span className="text-xs text-gray-400 tabular-nums">
                {Math.round(inc.similarity * 100)}% similar
              </span>
            </div>
            <p className="text-sm text-gray-700 line-clamp-2">{inc.description}</p>
          </a>
        ))}
      </div>
    </div>
  )
}