'use client'

import React, { useState, useEffect } from 'react'
import { useParams } from 'next/navigation'
import { Hazard, LibraryHazard, HazardFormData } from './_components/types'
import { HazardForm } from './_components/HazardForm'
import { LibraryModal } from './_components/LibraryModal'
import { HazardTable } from './_components/HazardTable'

export default function HazardsPage() {
  const params = useParams()
  const projectId = params.projectId as string
  const [hazards, setHazards] = useState<Hazard[]>([])
  const [library, setLibrary] = useState<LibraryHazard[]>([])
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [showLibrary, setShowLibrary] = useState(false)
  const [suggestingAI, setSuggestingAI] = useState(false)

  useEffect(() => {
    fetchHazards()
  }, [projectId])

  async function fetchHazards() {
    try {
      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`)
      if (res.ok) {
        const json = await res.json()
        setHazards(json.hazards || json || [])
      }
    } catch (err) {
      console.error('Failed to fetch hazards:', err)
    } finally {
      setLoading(false)
    }
  }

  async function fetchLibrary() {
    try {
      const res = await fetch('/api/sdk/v1/iace/hazard-library')
      if (res.ok) {
        const json = await res.json()
        setLibrary(json.hazards || json || [])
      }
    } catch (err) {
      console.error('Failed to fetch hazard library:', err)
    }
    setShowLibrary(true)
  }

  async function handleAddFromLibrary(item: LibraryHazard) {
    try {
      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: item.name,
          description: item.description,
          category: item.category,
          severity: item.default_severity,
          exposure: item.default_exposure,
          probability: item.default_probability,
        }),
      })
      if (res.ok) await fetchHazards()
    } catch (err) {
      console.error('Failed to add from library:', err)
    }
  }

  async function handleSubmit(data: HazardFormData) {
    try {
      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      })
      if (res.ok) {
        setShowForm(false)
        await fetchHazards()
      }
    } catch (err) {
      console.error('Failed to add hazard:', err)
    }
  }

  async function handleAISuggestions() {
    setSuggestingAI(true)
    try {
      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards/suggest`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
      })
      if (res.ok) await fetchHazards()
    } catch (err) {
      console.error('Failed to get AI suggestions:', err)
    } finally {
      setSuggestingAI(false)
    }
  }

  async function handleDelete(id: string) {
    if (!confirm('Gefaehrdung wirklich loeschen?')) return
    try {
      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards/${id}`, { method: 'DELETE' })
      if (res.ok) await fetchHazards()
    } catch (err) {
      console.error('Failed to delete hazard:', err)
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Hazard Log</h1>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Gefaehrdungsanalyse mit Risikobewertung nach S x E x P Methode.
          </p>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={handleAISuggestions}
            disabled={suggestingAI}
            className="flex items-center gap-2 px-3 py-2 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors disabled:opacity-50 text-sm"
          >
            {suggestingAI ? (
              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-purple-600" />
            ) : (
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            )}
            KI-Vorschlaege
          </button>
          <button
            onClick={fetchLibrary}
            className="flex items-center gap-2 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm"
          >
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
            Aus Bibliothek
          </button>
          <button
            onClick={() => setShowForm(true)}
            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm"
          >
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Manuell hinzufuegen
          </button>
        </div>
      </div>

      {/* Stats */}
      {hazards.length > 0 && (
        <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 text-center">
            <div className="text-2xl font-bold text-gray-900 dark:text-white">{hazards.length}</div>
            <div className="text-xs text-gray-500">Gesamt</div>
          </div>
          <div className="bg-white dark:bg-gray-800 rounded-lg border border-red-200 p-4 text-center">
            <div className="text-2xl font-bold text-red-600">{hazards.filter((h) => h.risk_level === 'critical').length}</div>
            <div className="text-xs text-red-600">Kritisch</div>
          </div>
          <div className="bg-white dark:bg-gray-800 rounded-lg border border-orange-200 p-4 text-center">
            <div className="text-2xl font-bold text-orange-600">{hazards.filter((h) => h.risk_level === 'high').length}</div>
            <div className="text-xs text-orange-600">Hoch</div>
          </div>
          <div className="bg-white dark:bg-gray-800 rounded-lg border border-yellow-200 p-4 text-center">
            <div className="text-2xl font-bold text-yellow-600">{hazards.filter((h) => h.risk_level === 'medium').length}</div>
            <div className="text-xs text-yellow-600">Mittel</div>
          </div>
          <div className="bg-white dark:bg-gray-800 rounded-lg border border-green-200 p-4 text-center">
            <div className="text-2xl font-bold text-green-600">{hazards.filter((h) => h.risk_level === 'low').length}</div>
            <div className="text-xs text-green-600">Niedrig</div>
          </div>
        </div>
      )}

      {showForm && (
        <HazardForm onSubmit={handleSubmit} onCancel={() => setShowForm(false)} />
      )}

      {showLibrary && (
        <LibraryModal
          library={library}
          onAdd={handleAddFromLibrary}
          onClose={() => setShowLibrary(false)}
        />
      )}

      {hazards.length > 0 ? (
        <HazardTable hazards={hazards} onDelete={handleDelete} />
      ) : (
        !showForm && (
          <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
            <div className="w-16 h-16 mx-auto bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center mb-4">
              <svg className="w-8 h-8 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
            </div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Kein Hazard Log vorhanden</h3>
            <p className="mt-2 text-gray-500 max-w-md mx-auto">
              Beginnen Sie mit der systematischen Erfassung von Gefaehrdungen. Nutzen Sie die Bibliothek
              oder KI-Vorschlaege als Ausgangspunkt.
            </p>
            <div className="mt-6 flex items-center justify-center gap-3">
              <button onClick={() => setShowForm(true)} className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
                Manuell hinzufuegen
              </button>
              <button onClick={fetchLibrary} className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                Bibliothek oeffnen
              </button>
            </div>
          </div>
        )
      )}
    </div>
  )
}