'use client'

import { useState, useEffect } from 'react'
import { useParams } from 'next/navigation'
import { REDUCTION_TYPES, Mitigation } from './_components/types'
import { HierarchyWarning } from './_components/HierarchyWarning'
import { MeasuresLibraryModal } from './_components/MeasuresLibraryModal'
import { SuggestMeasuresModal } from './_components/SuggestMeasuresModal'
import { MitigationForm } from './_components/MitigationForm'
import { StatusBadge } from './_components/StatusBadge'
import { MitigationHints } from './_components/MitigationHints'
import { ProtectiveMeasure } from './_components/types'
import { useMitigations } from './_hooks/useMitigations'

export default function MitigationsPage() {
  const params = useParams()
  const projectId = params.projectId as string

  const {
    hazards, loading, hierarchyWarning, setHierarchyWarning,
    measures, byType, fetchData,
    fetchMeasuresLibrary, handleSubmit, handleAddSuggestedMeasure,
    handleDelete, handleDeleteSilent, handleSetRelevant,
  } = useMitigations(projectId)

  const [measureNorms, setMeasureNorms] = useState<Record<string, string[]>>({})

  useEffect(() => {
    fetch('/api/sdk/v1/iace/protective-measures-library')
      .then(r => r.ok ? r.json() : null)
      .then(json => {
        if (!json?.protective_measures) return
        const map: Record<string, string[]> = {}
        for (const m of json.protective_measures) {
          if (m.norm_references?.length > 0) {
            map[(m.name || '').toLowerCase()] = m.norm_references
          }
        }
        setMeasureNorms(map)
      })
      .catch(() => {})
  }, [])

  const [showForm, setShowForm] = useState(false)
  const [preselectedType, setPreselectedType] = useState<'design' | 'protection' | 'information' | undefined>()
  const [showLibrary, setShowLibrary] = useState(false)
  const [libraryFilter, setLibraryFilter] = useState<string | undefined>()
  const [showSuggest, setShowSuggest] = useState(false)
  const [expanded, setExpanded] = useState<Record<string, boolean>>({ design: true, protection: true, information: true })
  const [mitPages, setMitPages] = useState<Record<string, number>>({ design: 1, protection: 1, information: 1 })
  const [expandedMeasure, setExpandedMeasure] = useState<string | null>(null)
  // Group-Expand: key = `${type}:${title}` so the same title in different
  // reduction stages stays independently togglable.
  const [expandedGroup, setExpandedGroup] = useState<Set<string>>(new Set())

  function toggleGroup(key: string) {
    setExpandedGroup((prev) => {
      const next = new Set(prev)
      if (next.has(key)) next.delete(key); else next.add(key)
      return next
    })
  }

  // Mitigations sharing the same title (e.g. "Sicherheitszeichen nach ISO 7010"
  // applied to 21 hazards) collapse into a single group row. Each instance
  // keeps its own DB id, status and notes — the grouping is presentation-only.
  function groupByTitle(items: Mitigation[]): Array<{ title: string; instances: Mitigation[] }> {
    const map = new Map<string, Mitigation[]>()
    for (const m of items) {
      const key = (m.title || '').trim() || '(ohne Titel)'
      const arr = map.get(key)
      if (arr) arr.push(m); else map.set(key, [m])
    }
    return Array.from(map.entries()).map(([title, instances]) => ({ title, instances }))
  }

  // Compact status distribution: returns counts for the three known states.
  function statusCounts(instances: Mitigation[]) {
    const c = { planned: 0, implemented: 0, verified: 0 }
    for (const m of instances) {
      if (m.status === 'planned') c.planned++
      else if (m.status === 'implemented') c.implemented++
      else if (m.status === 'verified') c.verified++
    }
    return c
  }

  function toggleSection(type: string) {
    setExpanded((prev) => ({ ...prev, [type]: !prev[type] }))
  }

  function handleOpenLibrary(type?: string) {
    setLibraryFilter(type)
    fetchMeasuresLibrary(type)
    setShowLibrary(true)
  }

  function handleSelectMeasure(measure: ProtectiveMeasure) {
    setShowLibrary(false)
    setShowForm(true)
    setPreselectedType(measure.reduction_type as 'design' | 'protection' | 'information')
  }

  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>
    )
  }

  const totalMeasures = byType.design.length + byType.protection.length + byType.information.length

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Massnahmen</h1>
          <p className="mt-1 text-sm text-gray-500">
            {totalMeasures} Massnahmen nach 3-Stufen-Verfahren: Design ({byType.design.length}) &rarr; Schutz ({byType.protection.length}) &rarr; Information ({byType.information.length})
          </p>
        </div>
        <div className="flex items-center gap-2">
          <button onClick={() => setShowSuggest(true)}
            className="px-3 py-1.5 text-xs border border-green-300 text-green-700 rounded-lg hover:bg-green-50">
            Vorschlaege
          </button>
          <button onClick={() => handleOpenLibrary()}
            className="px-3 py-1.5 text-xs border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50">
            Bibliothek
          </button>
          <button onClick={() => { setPreselectedType(undefined); setShowForm(true) }}
            className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700">
            + Hinzufuegen
          </button>
        </div>
      </div>

      {hierarchyWarning && <HierarchyWarning onDismiss={() => setHierarchyWarning(false)} />}

      {/* Reinitialisieren-Warnung: nach manuellem Loeschen wuerde ein Reinit
          die geloeschten Engine-Vorschlaege wiederherstellen. */}
      <div className="rounded-md border border-amber-200 bg-amber-50 px-4 py-2.5 text-xs text-amber-900">
        <strong>Hinweis:</strong> Markiere jede Maßnahme als <em>Relevant</em> (☑) oder lösche sie aus dem Projekt (🗑).
        Nur als <em>relevant</em> markierte Maßnahmen erscheinen in der Verifikation.
        <strong> Achtung:</strong> nach dem Löschen kein <em>Neu initialisieren</em> mehr drücken — sonst werden die gelöschten Vorschläge aus den Engine-Daten wiederhergestellt.
      </div>

      {showForm && (
        <MitigationForm
          onSubmit={async (data) => { const ok = await handleSubmit(data); if (ok) setShowForm(false) }}
          onCancel={() => setShowForm(false)} hazards={hazards} preselectedType={preselectedType} onOpenLibrary={handleOpenLibrary}
        />
      )}
      {showLibrary && <MeasuresLibraryModal measures={measures} onSelect={handleSelectMeasure} onClose={() => setShowLibrary(false)} filterType={libraryFilter} />}
      {showSuggest && <SuggestMeasuresModal hazards={hazards} projectId={projectId} onAddMeasure={handleAddSuggestedMeasure} onClose={() => setShowSuggest(false)} />}

      {/* 3-Step Accordions */}
      {(['design', 'protection', 'information'] as const).map((type) => {
        const config = REDUCTION_TYPES[type]
        const items = byType[type]
        const isExpanded = expanded[type]

        return (
          <div key={type} className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
            {/* Accordion Header */}
            <button onClick={() => toggleSection(type)}
              className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors ${config.headerColor}`}>
              <svg className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
              {config.icon}
              <div className="flex-1">
                <span className="text-sm font-semibold">{config.label}</span>
                <span className="ml-2 text-xs opacity-75">{config.description}</span>
              </div>
              <span className="text-sm font-bold">{items.length}</span>
            </button>

            {/* Accordion Content — grouped by measure title */}
            {isExpanded && items.length > 0 && (() => {
              const groups = groupByTitle(items)
              const visibleGroups = groups.slice(0, (mitPages[type] || 1) * 50)
              return (
              <div className="border-t border-gray-100 dark:border-gray-700">
                {/* Table header */}
                <div className="grid grid-cols-[36px_36px_2fr_120px_110px] gap-2 px-4 py-2 bg-gray-50 dark:bg-gray-750 text-xs font-medium text-gray-500 uppercase tracking-wider">
                  <div title="Relevant fuer dieses Projekt">Relev.</div>
                  <div title="Loeschen">Lösch.</div>
                  <div>Massnahme</div>
                  <div className="text-right pr-2">Gefährdungen</div>
                  <div>Status (P · I · V)</div>
                </div>
                {visibleGroups.map(({ title, instances }) => {
                  const groupKey = `${type}:${title}`
                  const isGroupOpen = expandedGroup.has(groupKey)
                  // (legacy bulk-select removed — Relevant-checkbox is now the primary mass-action)
                  const counts = statusCounts(instances)
                  const refs = measureNorms[title.toLowerCase()]
                  const first = instances[0]
                  const description = first?.description || ''
                  const catMatch = description.match(/Kategorie\s+(\S+)/)
                  const category = catMatch?.[1]
                  const relevantInGroup = instances.filter((m) => m.is_relevant).length
                  const allRelevant = relevantInGroup === instances.length
                  return (
                    <div key={groupKey}>
                      {/* Group header row */}
                      <div onClick={() => toggleGroup(groupKey)}
                        className={`grid grid-cols-[36px_36px_2fr_120px_110px] gap-2 px-4 py-2 border-t border-gray-50 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors cursor-pointer`}>
                        <div className="pt-0.5" onClick={(e) => e.stopPropagation()}>
                          <input type="checkbox" checked={allRelevant} ref={(el) => { if (el) el.indeterminate = !allRelevant && relevantInGroup > 0 }}
                            onChange={async (e) => {
                              const target = e.target.checked
                              for (const m of instances) {
                                if (m.is_relevant !== target) await handleSetRelevant(m.id, target)
                              }
                            }}
                            className="accent-purple-600" title={`${relevantInGroup}/${instances.length} als relevant markiert. Klick: alle als ${allRelevant ? 'nicht relevant' : 'relevant'} markieren.`} />
                        </div>
                        <div className="pt-0.5" onClick={(e) => e.stopPropagation()}>
                          <button onClick={async () => {
                            if (!confirm(`Alle ${instances.length} Instanzen von "${title}" loeschen?`)) return
                            for (const m of instances) await handleDeleteSilent(m.id)
                            await fetchData()
                          }} className="text-gray-400 hover:text-red-600" title="Ganze Gruppe loeschen">
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M1 7h22M16 7V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v3" />
                            </svg>
                          </button>
                        </div>
                        <div className="min-w-0 flex items-start gap-1">
                          <svg className={`w-3 h-3 mt-1 shrink-0 text-gray-400 transition-transform ${isGroupOpen ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                          </svg>
                          <div>
                            <div className="text-sm text-gray-900 dark:text-white">{title}</div>
                            {category && <div className="text-[10px] text-gray-400 mt-0.5">Kategorie: {category}</div>}
                          </div>
                        </div>
                        <div className="text-xs text-gray-500 text-right pr-2">{instances.length}</div>
                        <div className="text-xs flex items-center gap-1.5 font-mono">
                          <span className="text-gray-500" title={`${counts.planned} geplant`}>{counts.planned}</span>
                          <span className="text-gray-300">·</span>
                          <span className="text-blue-600" title={`${counts.implemented} umgesetzt`}>{counts.implemented}</span>
                          <span className="text-gray-300">·</span>
                          <span className="text-green-600" title={`${counts.verified} verifiziert`}>{counts.verified}</span>
                        </div>
                      </div>
                      {/* Group children — one row per instance (hazard) */}
                      {isGroupOpen && (
                        <div className="bg-gray-50/40 dark:bg-gray-900/20 border-t border-gray-100 dark:border-gray-700">
                          {description && (
                            <p className="px-12 pt-2 pb-1 text-[11px] text-gray-500 dark:text-gray-400 italic">{description}</p>
                          )}
                          {refs?.length > 0 && (
                            <p className="px-12 pb-2 text-[11px] text-blue-500">Normen: {refs.join(', ')}</p>
                          )}
                          {instances.map((m) => {
                            const isDetailOpen = expandedMeasure === m.id
                            return (
                              <div key={m.id}>
                                <div onClick={() => setExpandedMeasure(isDetailOpen ? null : m.id)}
                                  className={`grid grid-cols-[36px_36px_2fr_120px_110px] gap-2 px-4 py-1.5 border-t border-gray-100 dark:border-gray-700 hover:bg-white dark:hover:bg-gray-800 transition-colors cursor-pointer ${m.is_relevant ? 'bg-emerald-50/40 dark:bg-emerald-900/10' : ''}`}>
                                  <div className="pt-0.5" onClick={(e) => e.stopPropagation()}>
                                    <input type="checkbox" checked={Boolean(m.is_relevant)} onChange={() => handleSetRelevant(m.id, !m.is_relevant)}
                                      className="accent-purple-600" title="Als relevant markieren" />
                                  </div>
                                  <div className="pt-0.5" onClick={(e) => e.stopPropagation()}>
                                    <button onClick={() => handleDelete(m.id)}
                                      className="text-gray-400 hover:text-red-600" title="Loeschen">
                                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M1 7h22M16 7V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v3" />
                                      </svg>
                                    </button>
                                  </div>
                                  <div className="text-xs text-gray-600 dark:text-gray-300 min-w-0">
                                    {(m.linked_hazard_names || []).join(', ') || '— (keine Gefaehrdung verknuepft)'}
                                  </div>
                                  <div className="text-[11px] text-gray-400 self-center text-right pr-2">
                                    {m.is_customer_standard ? 'Kundenstandard' : ''}
                                  </div>
                                  <div><StatusBadge status={m.status} /></div>
                                </div>
                                {isDetailOpen && (
                                  <div className="px-12 py-2 bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 text-xs space-y-1">
                                    <MitigationHints projectId={projectId} mitigationId={m.id} />
                                  </div>
                                )}
                              </div>
                            )
                          })}
                        </div>
                      )}
                    </div>
                  )
                })}
                {groups.length > visibleGroups.length && (
                  <button onClick={() => setMitPages(prev => ({ ...prev, [type]: (prev[type] || 1) + 1 }))}
                    className="w-full py-2 text-xs text-purple-600 hover:bg-purple-50 border-t border-gray-100 transition-colors">
                    Weitere {Math.min(50, groups.length - visibleGroups.length)} von {groups.length} Maßnahmen laden...
                  </button>
                )}
              </div>
              )
            })()}

            {isExpanded && items.length === 0 && (
              <div className="px-4 py-6 text-center text-sm text-gray-400 border-t border-gray-100">
                Keine Massnahmen in dieser Stufe
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}