'use client'

import { useState } from 'react'
import { useParams } from 'next/navigation'
import { useMitigations } from '../mitigations/_hooks/useMitigations'
import type { Mitigation } from '../mitigations/_components/types'

// Verifikations-Page (Phase-1 Workflow):
//
// Diese Seite ist eine abgeleitete View auf die Maßnahmen-Liste. Sie zeigt
// nur diejenigen Maßnahmen, die der Fachmann auf der Maßnahmen-Seite als
// `is_relevant = true` markiert hat. Pro Maßnahme stehen zwei Aktionen
// zur Verfügung:
//
//   1. "Beim Kunden Standard" — Die Maßnahme ist beim Kunden bereits
//      umgesetzt (z.B. firmenweite Vorgabe, identische Vor-Anlage).
//      Setzt is_customer_standard = true und status = verified.
//      Es ist kein Nachweis-Dokument erforderlich.
//
//   2. "Verifizieren (mit Nachweis)" — Öffnet ein Modal, in dem der
//      Verifizierer einen Text-Nachweis hinterlegt (Prüfprotokoll-Nummer,
//      Abnahme-Referenz, etc.). Setzt status = verified. Die File-Upload-
//      Variante folgt in Phase 2, sobald ein Object-Storage-Backend
//      verfügbar ist.
//
// Wenn die Maßnahme bereits verifiziert ist, wird ein "Zurücksetzen"-Link
// angeboten — er stellt status auf 'implemented' zurück, damit der
// Fachmann eine versehentliche Bestätigung rückgängig machen kann.

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

  const { byType, loading, handleSetCustomerStandard } = useMitigations(projectId)

  const [verifyTarget, setVerifyTarget] = useState<Mitigation | null>(null)
  const [verifyResult, setVerifyResult] = useState('')
  const [submitting, setSubmitting] = useState(false)

  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 allRelevant = [...byType.design, ...byType.protection, ...byType.information].filter((m) => m.is_relevant)
  const groups = groupByTitle(allRelevant)
  const totals = {
    total: allRelevant.length,
    verified: allRelevant.filter((m) => m.status === 'verified').length,
    customerStd: allRelevant.filter((m) => m.is_customer_standard).length,
    pending: allRelevant.filter((m) => m.status !== 'verified').length,
  }

  async function setStatus(id: string, value: 'implemented' | 'verified') {
    await fetch(`/api/sdk/v1/iace/mitigations/${id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status: value }),
    })
  }

  async function submitVerify() {
    if (!verifyTarget) return
    setSubmitting(true)
    try {
      await fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations/${verifyTarget.id}/verify`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ verification_result: verifyResult }),
      })
      // Refetch via window-reload of just the data — useMitigations refreshes on mount.
      window.location.reload()
    } finally {
      setSubmitting(false)
      setVerifyTarget(null)
      setVerifyResult('')
    }
  }

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Verifikation</h1>
        <p className="mt-1 text-sm text-gray-500">
          Bestätige die Umsetzung jeder als relevant markierten Maßnahme — entweder als
          <em> Kundenstandard</em> (keine Nachweis-Datei nötig) oder mit hinterlegtem Nachweis.
        </p>
      </div>

      {totals.total === 0 ? (
        <div className="rounded-md border border-gray-200 bg-gray-50 px-4 py-6 text-sm text-gray-600">
          Keine als <em>relevant</em> markierten Maßnahmen vorhanden. Gehe zurück zur
          {' '}<a className="text-purple-600 underline" href={`/sdk/iace/${projectId}/mitigations`}>Maßnahmen-Seite</a>{' '}
          und kreuze die anwendbaren Maßnahmen an.
        </div>
      ) : (
        <>
          <div className="grid grid-cols-4 gap-3">
            <Stat n={totals.total} label="relevant" tone="gray" />
            <Stat n={totals.pending} label="offen" tone="amber" />
            <Stat n={totals.verified} label="verifiziert" tone="green" />
            <Stat n={totals.customerStd} label="Kundenstandard" tone="blue" />
          </div>

          {groups.map(({ title, instances }) => {
            const verifiedCount = instances.filter((m) => m.status === 'verified').length
            const allDone = verifiedCount === instances.length
            return (
              <div key={title} className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                <div className={`flex items-center gap-3 px-4 py-3 ${allDone ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-750'}`}>
                  <div className="flex-1">
                    <div className="text-sm font-semibold text-gray-900 dark:text-white">{title}</div>
                    <div className="text-xs text-gray-500">{verifiedCount}/{instances.length} verifiziert</div>
                  </div>
                  {allDone && (
                    <svg className="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  )}
                </div>
                <div className="divide-y divide-gray-100 dark:divide-gray-700">
                  {instances.map((m) => {
                    const isVerified = m.status === 'verified'
                    return (
                      <div key={m.id} className={`grid grid-cols-[1fr_240px] gap-3 px-4 py-2.5 items-center ${isVerified ? 'bg-green-50/30 dark:bg-green-900/10' : ''}`}>
                        <div className="min-w-0">
                          <div className="text-sm text-gray-700 dark:text-gray-200">
                            {(m.linked_hazard_names || []).join(', ') || '— (keine Gefährdung verknüpft)'}
                          </div>
                          {m.is_customer_standard && (
                            <div className="text-[11px] text-blue-600 mt-0.5">Beim Kunden Standard</div>
                          )}
                        </div>
                        <div className="flex items-center justify-end gap-2">
                          {!isVerified ? (
                            <>
                              <button onClick={async () => {
                                await handleSetCustomerStandard(m.id, true)
                                await setStatus(m.id, 'verified')
                                window.location.reload()
                              }} className="px-2.5 py-1 text-[11px] border border-blue-300 text-blue-700 rounded hover:bg-blue-50">
                                Kundenstandard
                              </button>
                              <button onClick={() => { setVerifyTarget(m); setVerifyResult('') }}
                                className="px-2.5 py-1 text-[11px] bg-green-600 text-white rounded hover:bg-green-700">
                                Verifizieren…
                              </button>
                            </>
                          ) : (
                            <>
                              <span className="text-[11px] text-green-700">✓ Verifiziert</span>
                              <button onClick={async () => {
                                if (!confirm('Verifizierung zurücksetzen?')) return
                                await setStatus(m.id, 'implemented')
                                window.location.reload()
                              }} className="text-[11px] text-gray-400 hover:text-red-600 underline">
                                Zurücksetzen
                              </button>
                            </>
                          )}
                        </div>
                      </div>
                    )
                  })}
                </div>
              </div>
            )
          })}
        </>
      )}

      {verifyTarget && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50">
          <div className="bg-white dark:bg-gray-800 rounded-xl max-w-lg w-full p-6 space-y-4">
            <div>
              <h2 className="text-lg font-semibold">Verifizieren</h2>
              <p className="text-sm text-gray-500 mt-1">{verifyTarget.title}</p>
              <p className="text-xs text-gray-400 mt-0.5">{(verifyTarget.linked_hazard_names || []).join(', ')}</p>
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-700 mb-1">Nachweis / Prüfprotokoll-Referenz</label>
              <textarea value={verifyResult} onChange={(e) => setVerifyResult(e.target.value)}
                placeholder="z.B. Prüfprotokoll PM-2026-014 vom 14.05.2026, durchgeführt durch Hr. Schmidt (TÜV Süd)"
                className="w-full border rounded px-3 py-2 text-sm h-24" />
              <p className="text-[10px] text-gray-400 mt-1">Datei-Upload folgt in Phase 2 — vorerst genügt eine eindeutige Referenz.</p>
            </div>
            <div className="flex items-center justify-end gap-2">
              <button onClick={() => setVerifyTarget(null)} disabled={submitting} className="text-xs px-3 py-1.5 text-gray-500 hover:text-gray-700">Abbrechen</button>
              <button onClick={submitVerify} disabled={submitting || !verifyResult.trim()}
                className="px-3 py-1.5 text-xs bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50">
                {submitting ? 'Speichere…' : 'Verifizieren'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

function Stat({ n, label, tone }: { n: number; label: string; tone: 'gray' | 'amber' | 'green' | 'blue' }) {
  const color =
    tone === 'amber' ? 'text-amber-600 border-amber-200' :
    tone === 'green' ? 'text-green-600 border-green-200' :
    tone === 'blue'  ? 'text-blue-600 border-blue-200' :
                       'text-gray-700 border-gray-200'
  return (
    <div className={`bg-white dark:bg-gray-800 rounded-lg border p-4 text-center ${color}`}>
      <div className="text-2xl font-bold">{n}</div>
      <div className="text-xs">{label}</div>
    </div>
  )
}

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])
  }
  // Frontend dedupe per hazard_id (mirrors mitigations/page.tsx)
  return Array.from(map.entries()).map(([title, list]) => {
    const byHazard = new Map<string, Mitigation>()
    for (const m of list) {
      const hid = (m.linked_hazard_ids || []).join('|') || m.id
      const prev = byHazard.get(hid)
      if (!prev || (m.status === 'verified' && prev.status !== 'verified')) byHazard.set(hid, m)
    }
    return { title, instances: Array.from(byHazard.values()) }
  })
}