'use client'

import React, { useEffect, useState, useCallback, use } from 'react'
import { SeverityBadge } from '../../_components/SeverityBadge'

interface Vuln {
  id: string
  cve_id: string | null
  title: string
  description: string
  severity: string | null
  cvss_score: number | null
  affected_components: string[]
  reporter_source: string
  reporter_contact: string | null
  discovered_at: string
  triaged_at: string | null
  patched_at: string | null
  disclosed_at: string | null
  embargo_until: string | null
  reported_to_enisa_at: string | null
  detailed_report_at: string | null
  status: string
  notes: string
}

interface VulnListResponse {
  project_id: string
  total: number
  summary: {
    critical_open: number
    breached_24h_reporting: number
    breached_72h_reporting: number
    by_status: Record<string, number>
  }
  items: Vuln[]
}

const STATUS_LABEL: Record<string, string> = {
  reported: 'Gemeldet',
  triaged: 'Triagiert',
  patched: 'Gepatcht',
  disclosed: 'Offengelegt',
  withdrawn: 'Zurueckgezogen',
}

const STATUS_NEXT: Record<string, { status: string; label: string } | null> = {
  reported: { status: 'triaged', label: 'Triagieren' },
  triaged: { status: 'patched', label: 'Patch verfuegbar' },
  patched: { status: 'disclosed', label: 'Offenlegen' },
  disclosed: null,
  withdrawn: null,
}

function ageHours(iso: string | null): number {
  if (!iso) return 0
  return (Date.now() - new Date(iso).getTime()) / 3600000
}

function fmtRemaining(iso: string | null, hours: number): { label: string; color: string } {
  if (!iso) return { label: '—', color: 'text-gray-400' }
  const age = ageHours(iso)
  const remaining = hours - age
  if (remaining < 0) return { label: `+${Math.round(-remaining)}h ueber Frist`, color: 'text-red-600 font-semibold' }
  if (remaining < 4) return { label: `noch ${remaining.toFixed(1)}h`, color: 'text-orange-600 font-semibold' }
  return { label: `noch ${Math.round(remaining)}h`, color: 'text-gray-600' }
}

export default function VulnPage({
  params,
}: {
  params: Promise<{ projectId: string }>
}) {
  const { projectId } = use(params)
  const [data, setData] = useState<VulnListResponse | null>(null)
  const [loading, setLoading] = useState(true)
  const [showForm, setShowForm] = useState(false)
  const [error, setError] = useState('')
  const [creating, setCreating] = useState(false)
  const [transitioning, setTransitioning] = useState<string | null>(null)

  // New vuln form state
  const [title, setTitle] = useState('')
  const [cveId, setCveId] = useState('')
  const [severity, setSeverity] = useState('')
  const [cvssScore, setCvssScore] = useState('')
  const [description, setDescription] = useState('')
  const [components, setComponents] = useState('')
  const [reporterSource, setReporterSource] = useState('internal')
  const [reporterContact, setReporterContact] = useState('')

  const tenant = '00000000-0000-0000-0000-000000000001'

  const load = useCallback(async () => {
    try {
      const res = await fetch(`/api/sdk/v1/cra/projects/${projectId}/vulnerabilities`, {
        headers: { 'X-Tenant-ID': tenant },
      })
      if (!res.ok) throw new Error(await res.text())
      setData(await res.json())
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Laden')
    } finally {
      setLoading(false)
    }
  }, [projectId])

  useEffect(() => { load() }, [load])

  const create = async () => {
    if (!title.trim()) return
    setCreating(true)
    setError('')
    try {
      const res = await fetch(`/api/sdk/v1/cra/projects/${projectId}/vulnerabilities`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenant },
        body: JSON.stringify({
          title,
          cve_id: cveId || null,
          description,
          severity: severity || null,
          cvss_score: cvssScore ? parseFloat(cvssScore) : null,
          affected_components: components.split(',').map(s => s.trim()).filter(Boolean),
          reporter_source: reporterSource,
          reporter_contact: reporterContact || null,
        }),
      })
      if (!res.ok) throw new Error(await res.text())
      setShowForm(false)
      setTitle(''); setCveId(''); setSeverity(''); setCvssScore('')
      setDescription(''); setComponents(''); setReporterContact('')
      await load()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Anlegen fehlgeschlagen')
    } finally {
      setCreating(false)
    }
  }

  const transition = async (vulnId: string, nextStatus: string) => {
    setTransitioning(vulnId)
    setError('')
    try {
      const res = await fetch(`/api/sdk/v1/cra/vulnerabilities/${vulnId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenant },
        body: JSON.stringify({ status: nextStatus }),
      })
      if (!res.ok) throw new Error(await res.text())
      await load()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Statuswechsel fehlgeschlagen')
    } finally {
      setTransitioning(null)
    }
  }

  const markReported = async (vulnId: string, field: 'reported_to_enisa_at' | 'detailed_report_at') => {
    setTransitioning(vulnId)
    setError('')
    try {
      const res = await fetch(`/api/sdk/v1/cra/vulnerabilities/${vulnId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenant },
        body: JSON.stringify({ [field]: new Date().toISOString() }),
      })
      if (!res.ok) throw new Error(await res.text())
      await load()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Reporting fehlgeschlagen')
    } finally {
      setTransitioning(null)
    }
  }

  if (loading) return <div className="min-h-screen bg-gray-50 p-8"><p className="text-gray-500">Laedt...</p></div>

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-6xl mx-auto px-4">
        <div className="mb-6">
          <a href={`/sdk/cra/${projectId}`} className="text-sm text-blue-600 hover:underline">
            &larr; Zurueck zum Projekt
          </a>
          <h1 className="text-2xl font-bold text-gray-900 mt-2">Vulnerability Disclosure (CVD)</h1>
          <p className="text-sm text-gray-600 mt-1">
            Schwachstellen tracken. CRA-Pflichten: 24h Fruehwarnung an ENISA, 72h Detailbericht.
          </p>
        </div>

        {error && (
          <div className="mb-4 bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">
            <pre className="whitespace-pre-wrap">{error}</pre>
            <button onClick={() => setError('')} className="text-red-500 underline text-xs">Schliessen</button>
          </div>
        )}

        {/* Summary KPIs */}
        {data && (
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
            <SummaryCard label="Aktive Vulns" value={data.total - (data.summary.by_status.withdrawn || 0)} color="blue" />
            <SummaryCard label="Critical offen" value={data.summary.critical_open} color={data.summary.critical_open > 0 ? 'red' : 'green'} />
            <SummaryCard label="24h-Reporting versaeumt" value={data.summary.breached_24h_reporting} color={data.summary.breached_24h_reporting > 0 ? 'red' : 'green'} />
            <SummaryCard label="72h-Reporting versaeumt" value={data.summary.breached_72h_reporting} color={data.summary.breached_72h_reporting > 0 ? 'red' : 'green'} />
          </div>
        )}

        <button
          onClick={() => setShowForm(!showForm)}
          className="mb-4 w-full py-3 border-2 border-dashed border-red-300 rounded-xl text-red-600 hover:bg-red-50 font-medium"
        >
          {showForm ? 'Abbrechen' : '+ Neue Schwachstelle melden'}
        </button>

        {showForm && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-5 mb-6">
            <h3 className="text-sm font-semibold mb-3">Neue Schwachstelle</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div className="md:col-span-2">
                <label className="block text-xs text-gray-600 mb-1">Titel *</label>
                <input value={title} onChange={e => setTitle(e.target.value)} className="w-full px-3 py-2 border rounded text-sm" />
              </div>
              <div>
                <label className="block text-xs text-gray-600 mb-1">CVE-ID (optional)</label>
                <input value={cveId} onChange={e => setCveId(e.target.value)} placeholder="CVE-2026-12345" className="w-full px-3 py-2 border rounded text-sm font-mono" />
              </div>
              <div>
                <label className="block text-xs text-gray-600 mb-1">Severity</label>
                <select value={severity} onChange={e => setSeverity(e.target.value)} className="w-full px-3 py-2 border rounded text-sm">
                  <option value="">— waehlen —</option>
                  <option value="LOW">LOW</option>
                  <option value="MEDIUM">MEDIUM</option>
                  <option value="HIGH">HIGH</option>
                  <option value="CRITICAL">CRITICAL</option>
                </select>
              </div>
              <div>
                <label className="block text-xs text-gray-600 mb-1">CVSS Score (0-10)</label>
                <input type="number" min="0" max="10" step="0.1" value={cvssScore} onChange={e => setCvssScore(e.target.value)} className="w-full px-3 py-2 border rounded text-sm" />
              </div>
              <div>
                <label className="block text-xs text-gray-600 mb-1">Reporter</label>
                <select value={reporterSource} onChange={e => setReporterSource(e.target.value)} className="w-full px-3 py-2 border rounded text-sm">
                  <option value="internal">Intern</option>
                  <option value="external">Extern (Kunde/Partner)</option>
                  <option value="researcher">Security Researcher</option>
                  <option value="scanner">Automatisierter Scanner</option>
                </select>
              </div>
              <div className="md:col-span-2">
                <label className="block text-xs text-gray-600 mb-1">Reporter-Kontakt</label>
                <input value={reporterContact} onChange={e => setReporterContact(e.target.value)} placeholder="email@..." className="w-full px-3 py-2 border rounded text-sm" />
              </div>
              <div className="md:col-span-2">
                <label className="block text-xs text-gray-600 mb-1">Betroffene Komponenten (Komma-getrennt)</label>
                <input value={components} onChange={e => setComponents(e.target.value)} placeholder="lodash@4.17.20, axios@0.21.0" className="w-full px-3 py-2 border rounded text-sm font-mono" />
              </div>
              <div className="md:col-span-2">
                <label className="block text-xs text-gray-600 mb-1">Beschreibung</label>
                <textarea value={description} onChange={e => setDescription(e.target.value)} rows={3} className="w-full px-3 py-2 border rounded text-sm" />
              </div>
            </div>
            <button
              onClick={create}
              disabled={creating || !title.trim()}
              className="mt-4 w-full py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:bg-gray-300 font-medium"
            >
              {creating ? 'Erstelle...' : 'Schwachstelle erfassen'}
            </button>
          </div>
        )}

        {data && data.items.length === 0 && !showForm && (
          <div className="bg-gray-100 rounded-xl p-8 text-center text-gray-500">
            Noch keine Schwachstellen erfasst.
          </div>
        )}

        {data && data.items.map(v => {
          const tx = STATUS_NEXT[v.status]
          const rep24 = fmtRemaining(v.discovered_at, 24)
          const rep72 = fmtRemaining(v.discovered_at, 72)
          return (
            <div key={v.id} className="bg-white rounded-xl shadow-sm border border-gray-200 p-5 mb-3">
              <div className="flex items-start justify-between gap-4 mb-3">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 flex-wrap">
                    <h3 className="font-semibold text-gray-900">{v.title}</h3>
                    {v.cve_id && <span className="font-mono text-xs px-1.5 py-0.5 bg-gray-100 rounded">{v.cve_id}</span>}
                    {v.severity && <SeverityBadge value={v.severity} />}
                    {v.cvss_score !== null && <span className="text-xs text-gray-500">CVSS {v.cvss_score}</span>}
                  </div>
                  {v.description && <p className="text-sm text-gray-600 mt-1">{v.description}</p>}
                  {v.affected_components.length > 0 && (
                    <div className="mt-2 flex flex-wrap gap-1">
                      {v.affected_components.map((c, i) => (
                        <span key={i} className="font-mono text-xs px-1.5 py-0.5 bg-yellow-50 text-yellow-800 rounded">{c}</span>
                      ))}
                    </div>
                  )}
                </div>
                <span className="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-700 flex-shrink-0">
                  {STATUS_LABEL[v.status] || v.status}
                </span>
              </div>

              {/* CRA Reporting Compliance */}
              {v.status !== 'withdrawn' && (
                <div className="grid grid-cols-2 gap-3 mb-3 text-xs">
                  <div className={`p-2 rounded ${v.reported_to_enisa_at ? 'bg-green-50' : 'bg-orange-50'}`}>
                    <div className="font-semibold text-gray-700">24h: ENISA-Fruehwarnung</div>
                    {v.reported_to_enisa_at ? (
                      <div className="text-green-700">✓ {new Date(v.reported_to_enisa_at).toLocaleString('de-DE')}</div>
                    ) : (
                      <div className="flex items-center justify-between mt-1">
                        <span className={rep24.color}>{rep24.label}</span>
                        <button
                          onClick={() => markReported(v.id, 'reported_to_enisa_at')}
                          disabled={transitioning === v.id}
                          className="px-2 py-0.5 bg-orange-600 text-white rounded text-xs"
                        >
                          Jetzt melden
                        </button>
                      </div>
                    )}
                  </div>
                  <div className={`p-2 rounded ${v.detailed_report_at ? 'bg-green-50' : 'bg-orange-50'}`}>
                    <div className="font-semibold text-gray-700">72h: Detailbericht</div>
                    {v.detailed_report_at ? (
                      <div className="text-green-700">✓ {new Date(v.detailed_report_at).toLocaleString('de-DE')}</div>
                    ) : (
                      <div className="flex items-center justify-between mt-1">
                        <span className={rep72.color}>{rep72.label}</span>
                        <button
                          onClick={() => markReported(v.id, 'detailed_report_at')}
                          disabled={transitioning === v.id}
                          className="px-2 py-0.5 bg-orange-600 text-white rounded text-xs"
                        >
                          Jetzt melden
                        </button>
                      </div>
                    )}
                  </div>
                </div>
              )}

              <div className="flex items-center justify-between text-xs text-gray-500">
                <div>
                  Entdeckt: {new Date(v.discovered_at).toLocaleString('de-DE')}
                  {v.patched_at && <> · Gepatcht: {new Date(v.patched_at).toLocaleString('de-DE')}</>}
                  {v.disclosed_at && <> · Offengelegt: {new Date(v.disclosed_at).toLocaleString('de-DE')}</>}
                </div>
                {tx && (
                  <button
                    onClick={() => transition(v.id, tx.status)}
                    disabled={transitioning === v.id}
                    className="px-3 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700 disabled:bg-gray-300"
                  >
                    → {tx.label}
                  </button>
                )}
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

function SummaryCard({ label, value, color }: { label: string; value: number; color: 'blue' | 'red' | 'green' | 'orange' }) {
  const bg = {
    blue: 'bg-blue-50 border-blue-200 text-blue-700',
    red: 'bg-red-50 border-red-200 text-red-700',
    green: 'bg-green-50 border-green-200 text-green-700',
    orange: 'bg-orange-50 border-orange-200 text-orange-700',
  }[color]
  return (
    <div className={`rounded-xl border p-3 ${bg}`}>
      <p className="text-xs uppercase tracking-wide">{label}</p>
      <p className="text-2xl font-bold mt-1">{value}</p>
    </div>
  )
}