'use client'

import { useParams } from 'next/navigation'
import { useRiskAssessment } from './_hooks/useRiskAssessment'
import { RiskModelCard } from './_components/RiskModelCard'

export default function RisikobewertungPage() {
  const params = useParams<{ projectId: string }>()
  const projectId = params.projectId
  const { hazards, suggestions, loading } = useRiskAssessment(projectId)

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Risikobewertung</h1>
        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-3xl mt-1">
          Zwei Modelle pro Gefaehrdung: <strong>EN-62061-Stil</strong> (F/W/P/S) und{' '}
          <strong>Fine-Kinney</strong> (P/E/C, US-anerkannt). BreakPilot schlaegt begruendete
          Werte aus oeffentlichen Datenquellen vor (ESAW/NIOSH/OSHA) — passen Sie sie nach Ihrer
          Erfahrung bzw. Ihren eigenen Normdaten an; das Tool rechnet die Formel live aus.
        </p>
      </div>

      {loading && (
        <div className="text-sm text-gray-500 dark:text-gray-400">Lade Gefaehrdungen…</div>
      )}

      {!loading && hazards.length === 0 && (
        <div className="rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-6 text-sm text-gray-500">
          Keine Gefaehrdungen vorhanden. Bitte zuerst im <strong>Hazard Log</strong> erzeugen.
        </div>
      )}

      <div className="space-y-4">
        {hazards.map((h) => (
          <RiskModelCard key={h.id} hazard={h} suggestion={suggestions[h.id]} />
        ))}
      </div>
    </div>
  )
}