'use client'

// LLM Gap-Review Modal — Task #8.
//
// Triggers POST /projects/:id/llm-gap-review on mount and lists the
// LLM's gap suggestions with an Adopt / Reject UX. Adoption goes through
// the regular CreateHazard / CreateMitigation endpoints — the modal
// itself never mutates project state on its own.

import { useEffect, useState } from 'react'

type Suggestion = {
  kind: 'hazard' | 'mitigation'
  title: string
  description: string
  category?: string
  hazard_ref?: string
  pattern_ref?: string
  norm_refs?: string[]
  confidence?: 'high' | 'medium' | 'low'
  rationale?: string
}

type Response = {
  project_id: string
  source: 'llm_gap_review' | 'fallback_static'
  model?: string
  suggestions: Suggestion[]
  input_summary: {
    hazard_count: number
    mitigation_count: number
    limits_form_fields: number
  }
}

const CONF_COLOR: Record<string, string> = {
  high: 'bg-emerald-100 text-emerald-800 border-emerald-200',
  medium: 'bg-amber-100 text-amber-800 border-amber-200',
  low: 'bg-slate-100 text-slate-600 border-slate-200',
}

interface Props {
  projectId: string
  onClose: () => void
  onAdoptHazard?: (s: Suggestion) => Promise<void>
  onAdoptMitigation?: (s: Suggestion) => Promise<void>
}

export function LLMGapReviewModal({ projectId, onClose, onAdoptHazard, onAdoptMitigation }: Props) {
  const [data, setData] = useState<Response | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [adopted, setAdopted] = useState<Set<number>>(new Set())
  const [rejected, setRejected] = useState<Set<number>>(new Set())
  const [adopting, setAdopting] = useState<number | null>(null)

  useEffect(() => {
    setLoading(true)
    fetch(`/api/sdk/v1/iace/projects/${projectId}/llm-gap-review`, { method: 'POST' })
      .then((r) => (r.ok ? r.json() : Promise.reject(`HTTP ${r.status}`)))
      .then(setData)
      .catch((e) => setError(String(e)))
      .finally(() => setLoading(false))
  }, [projectId])

  async function adopt(idx: number) {
    if (!data) return
    const s = data.suggestions[idx]
    setAdopting(idx)
    try {
      if (s.kind === 'hazard' && onAdoptHazard) await onAdoptHazard(s)
      else if (s.kind === 'mitigation' && onAdoptMitigation) await onAdoptMitigation(s)
      setAdopted((prev) => new Set(prev).add(idx))
    } catch (e) {
      setError(`Adopt fehlgeschlagen: ${e}`)
    } finally {
      setAdopting(null)
    }
  }

  function reject(idx: number) {
    setRejected((prev) => new Set(prev).add(idx))
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="bg-white rounded-xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
          <div>
            <h2 className="text-lg font-semibold text-gray-900">KI-Gap-Review</h2>
            <p className="text-xs text-gray-500 mt-0.5">
              LLM-gestuetzte Suche nach fehlenden Gefaehrdungen und Schutzmassnahmen — Vorschlaege sind unverbindlich bis explizit uebernommen.
            </p>
          </div>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
        </div>

        <div className="flex-1 overflow-y-auto p-6 space-y-3">
          {loading && (
            <div className="text-center py-12">
              <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-purple-600 mx-auto" />
              <p className="text-sm text-gray-500 mt-3">LLM laeuft (Qwen/Claude). Das kann bis zu 30 Sekunden dauern.</p>
            </div>
          )}
          {error && (
            <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">
              Fehler: {error}
            </div>
          )}
          {data && (
            <>
              <div className="text-xs text-gray-500 flex items-center gap-3 border-b border-gray-100 pb-2">
                <span>
                  Eingabe: {data.input_summary.hazard_count} Gefaehrdungen,{' '}
                  {data.input_summary.mitigation_count} Massnahmen, {data.input_summary.limits_form_fields} Grenzen-Felder
                </span>
                <span className="text-gray-300">·</span>
                <span>
                  Quelle: {data.source === 'llm_gap_review'
                    ? `LLM (${data.model ?? 'unbekannt'})`
                    : 'Statische Fallback-Liste'}
                </span>
              </div>

              {data.suggestions.length === 0 && (
                <div className="text-center text-gray-500 py-12 text-sm">
                  Keine Lueckenvorschlaege. Die deterministische Pattern-Engine hat vermutlich bereits alle Standard-Gefaehrdungen abgedeckt.
                </div>
              )}

              {data.suggestions.map((s, i) => {
                const isAdopted = adopted.has(i)
                const isRejected = rejected.has(i)
                const isWorking = adopting === i
                return (
                  <div
                    key={i}
                    className={`border rounded-lg p-3 ${
                      isAdopted ? 'border-emerald-200 bg-emerald-50' :
                      isRejected ? 'border-slate-200 bg-slate-50 opacity-50' :
                      'border-gray-200 bg-white'
                    }`}
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 flex-wrap mb-1">
                          <span className={`px-1.5 py-0.5 text-[10px] rounded font-medium ${
                            s.kind === 'hazard' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'
                          }`}>
                            {s.kind === 'hazard' ? 'Gefaehrdung' : 'Massnahme'}
                          </span>
                          {s.category && (
                            <span className="px-1.5 py-0.5 text-[10px] rounded bg-gray-100 text-gray-700">{s.category}</span>
                          )}
                          {s.confidence && (
                            <span className={`px-1.5 py-0.5 text-[10px] rounded border ${CONF_COLOR[s.confidence]}`}>
                              {s.confidence}
                            </span>
                          )}
                          {(s.norm_refs ?? []).map((n) => (
                            <span key={n} className="px-1.5 py-0.5 text-[10px] rounded bg-indigo-50 text-indigo-700 font-mono">{n}</span>
                          ))}
                          {s.pattern_ref && (
                            <span className="px-1.5 py-0.5 text-[10px] rounded bg-purple-50 text-purple-700 font-mono">{s.pattern_ref}</span>
                          )}
                        </div>
                        <h3 className="text-sm font-semibold text-gray-900">{s.title}</h3>
                        <p className="text-xs text-gray-600 mt-1">{s.description}</p>
                        {s.hazard_ref && (
                          <p className="text-[11px] text-gray-500 mt-1">Bezogen auf: <em>{s.hazard_ref}</em></p>
                        )}
                        {s.rationale && (
                          <p className="text-[11px] text-gray-400 mt-1 italic">{s.rationale}</p>
                        )}
                      </div>
                      <div className="flex flex-col gap-1 flex-shrink-0">
                        {!isAdopted && !isRejected && (
                          <>
                            <button
                              onClick={() => adopt(i)}
                              disabled={isWorking}
                              className="px-3 py-1 text-xs bg-emerald-600 text-white rounded hover:bg-emerald-700 disabled:opacity-50"
                            >
                              {isWorking ? '…' : 'Uebernehmen'}
                            </button>
                            <button
                              onClick={() => reject(i)}
                              className="px-3 py-1 text-xs text-gray-600 border border-gray-300 rounded hover:bg-gray-50"
                            >
                              Verwerfen
                            </button>
                          </>
                        )}
                        {isAdopted && <span className="text-xs text-emerald-700 font-medium">✓ Uebernommen</span>}
                        {isRejected && <span className="text-xs text-gray-500">Verworfen</span>}
                      </div>
                    </div>
                  </div>
                )
              })}
            </>
          )}
        </div>

        <div className="px-6 py-3 border-t border-gray-200 bg-gray-50 flex items-center justify-between flex-shrink-0">
          <p className="text-[11px] text-gray-500">
            Hinweis: LLM-Vorschlaege sind NICHT die deterministische Engine-Output. Jede Uebernahme wird als <code>source=llm_gap_review</code> markiert.
          </p>
          <button onClick={onClose} className="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-white">
            Schliessen
          </button>
        </div>
      </div>
    </div>
  )
}

export default LLMGapReviewModal
