"use client";

import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import api from '../../../lib/api';
import { Vulnerability, Asset } from '../../../types';
import {
    ArrowLeftIcon,
    ShieldExclamationIcon,
    ServerIcon,
    CalendarIcon,
    UserCircleIcon,
    LinkIcon,
    DocumentTextIcon
} from '@heroicons/react/24/outline';
import Link from 'next/link';

interface VulnDetail extends Vulnerability {
    asset?: Asset;
    assigned_user_name?: string;
    assigned_group_name?: string;
}

// Refresh button with loading state + ephemeral "done" badge so a
// click that returns identical EPSS/KEV data still gives the operator
// visual confirmation the call ran (vs the previous silent UX).
function ThreatIntelRefreshButton({
    vulnId,
    onRefreshed,
}: { vulnId: number; onRefreshed: (v: any) => void }) {
    const [busy, setBusy] = useState(false);
    const [done, setDone] = useState(false);
    return (
        <button
            disabled={busy}
            onClick={async () => {
                setBusy(true);
                setDone(false);
                try {
                    const res = await api.post(`/api/v1/vulnerabilities/${vulnId}/enrich`);
                    onRefreshed(res.data.vulnerability);
                    setDone(true);
                    setTimeout(() => setDone(false), 2500);
                } catch (e: any) {
                    alert(`Enrichment failed: ${e?.response?.data?.detail || 'unknown'}`);
                } finally {
                    setBusy(false);
                }
            }}
            className="text-xs font-mono px-2 py-1 rounded border border-gray-200 hover:bg-gray-50 disabled:opacity-60"
        >
            {busy ? 'Refreshing…' : done ? '✓ Refreshed' : 'Refresh'}
        </button>
    );
}

export default function VulnerabilityDetailPage() {
    const params = useParams();
    const router = useRouter();
    const [vuln, setVuln] = useState<VulnDetail | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    // Audit / change history for this vuln — populated separately so
    // a slow audit query doesn't block the vuln detail render.
    type AuditEntry = {
        id: number;
        username: string | null;
        event_type: string;
        event_description: string;
        old_value: string | null;
        new_value: string | null;
        timestamp: string;
    };
    const [history, setHistory] = useState<AuditEntry[]>([]);

    useEffect(() => {
        const fetchVulnerability = async () => {
            try {
                const res = await api.get(`/api/v1/vulnerabilities/${params.id}`);
                setVuln(res.data);
            } catch (err: any) {
                setError(err.response?.data?.detail || 'Failed to load vulnerability');
            } finally {
                setLoading(false);
            }
        };
        const fetchHistory = async () => {
            try {
                const res = await api.get(`/api/v1/audit/logs`, {
                    params: { resource_type: 'vulnerability', resource_id: params.id, limit: 50 },
                });
                setHistory(Array.isArray(res.data) ? res.data : []);
            } catch {
                setHistory([]);
            }
        };

        if (params.id) {
            fetchVulnerability();
            fetchHistory();
        }
    }, [params.id]);

    // Parse the JSON payload audit-logs use for status changes.
    // new_value can be a plain string (old format) or a JSON object
    // {status, reason, source, cve_id} (new format).
    const parseAudit = (raw: string | null): { status?: string; reason?: string; source?: string } => {
        if (!raw) return {};
        try {
            const parsed = JSON.parse(raw);
            if (parsed && typeof parsed === 'object') return parsed;
        } catch { /* not JSON */ }
        return { status: raw };
    };

    const severityColors: Record<string, string> = {
        critical: 'bg-red-100 text-red-800 border-red-200',
        high: 'bg-orange-100 text-orange-800 border-orange-200',
        medium: 'bg-yellow-100 text-yellow-800 border-yellow-200',
        low: 'bg-green-100 text-green-800 border-green-200',
    };

    const statusColors: Record<string, string> = {
        open: 'bg-red-100 text-red-700',
        patched: 'bg-green-100 text-green-700',
        deferred: 'bg-yellow-100 text-yellow-700',
        accepted_risk: 'bg-gray-100 text-gray-700',
        false_positive: 'bg-blue-100 text-blue-700',
    };

    if (loading) {
        return (
            <div className="p-8 flex justify-center items-center min-h-screen">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-vulncheck-blue"></div>
            </div>
        );
    }

    if (error || !vuln) {
        return (
            <div className="p-8">
                <div className="max-w-4xl mx-auto bg-red-50 border border-red-200 rounded-lg p-6">
                    <h2 className="text-lg font-bold text-red-800">Error</h2>
                    <p className="text-red-600 mt-2">{error || 'Vulnerability not found'}</p>
                    <button
                        onClick={() => router.back()}
                        className="mt-4 text-red-700 hover:text-red-900 flex items-center gap-2"
                    >
                        <ArrowLeftIcon className="h-4 w-4" /> Go back
                    </button>
                </div>
            </div>
        );
    }

    return (
        <div className="p-8 max-w-6xl mx-auto">
            {/* Header */}
            <div className="mb-6">
                <button
                    onClick={() => router.back()}
                    className="text-gray-500 hover:text-gray-700 flex items-center gap-2 mb-4 font-mono text-sm"
                >
                    <ArrowLeftIcon className="h-4 w-4" /> Back to Vulnerabilities
                </button>

                <div className="flex items-start justify-between">
                    <div>
                        <h1 className="text-3xl font-bold text-gray-900 font-mono">{vuln.cve_id}</h1>
                        <p className="text-gray-500 mt-1 font-mono text-sm">
                            Detected: {vuln.detected_at ? new Date(vuln.detected_at).toLocaleString('de-CH', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'Unknown'}
                        </p>
                    </div>
                    <div className="flex items-center gap-3">
                        <span className={`px-4 py-2 rounded-lg text-sm font-bold uppercase ${severityColors[vuln.severity] || 'bg-gray-100'}`}>
                            {vuln.severity}
                        </span>
                        <span className={`px-4 py-2 rounded-lg text-sm font-medium ${statusColors[vuln.status] || 'bg-gray-100'}`}>
                            {vuln.status.replace('_', ' ')}
                        </span>
                    </div>
                </div>
            </div>

            {/* Main Content */}
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Left Column - Details */}
                <div className="lg:col-span-2 space-y-6">
                    {/* Description Card */}
                    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                        <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <DocumentTextIcon className="h-5 w-5 text-gray-500" />
                            Description
                        </h2>
                        {vuln.title && (
                            <p className="font-semibold text-gray-800 mb-2">{vuln.title}</p>
                        )}
                        <p className="text-gray-700 leading-relaxed">
                            {vuln.description || (!vuln.title ? 'No description available.' : '')}
                        </p>
                    </div>

                    {/* Affected Packages (per-package detail when multiple packages
                        hit by the same CVE on the same asset, e.g. CVE-2023-48795
                        on PuTTY + WinSCP). Falls back to the legacy parent-row
                        summary when no child rows exist (pseudo-CVEs etc). */}
                    {((vuln.packages && vuln.packages.length > 0) || vuln.package_name) && (
                        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                            <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                                Affected Package{(vuln.packages && vuln.packages.length > 1) ? 's' : ''}
                                {vuln.status === 'open' && vuln.has_fix_any && (
                                    <span
                                        className="inline-flex items-center rounded-md bg-emerald-100 px-2 py-0.5 text-xs font-bold text-emerald-700"
                                        title="At least one package has a known fix"
                                    >
                                        PATCH AVAILABLE
                                    </span>
                                )}
                            </h2>

                            {vuln.packages && vuln.packages.length > 0 ? (
                                <div className="space-y-2">
                                    {vuln.packages.map((p, idx) => (
                                        <div key={`${p.package_name}-${idx}`} className="bg-gray-50 rounded-lg p-3 font-mono text-sm">
                                            <div className="grid grid-cols-12 gap-2 items-center">
                                                <div className="col-span-5">
                                                    <span className="text-[10px] uppercase tracking-wider text-gray-500">Package</span>
                                                    <p className="font-bold text-gray-900 truncate">{p.package_name}</p>
                                                </div>
                                                <div className="col-span-3">
                                                    <span className="text-[10px] uppercase tracking-wider text-gray-500">Installed</span>
                                                    <p className="font-bold text-gray-900">{p.package_version || '—'}</p>
                                                </div>
                                                <div className="col-span-3">
                                                    <span className="text-[10px] uppercase tracking-wider text-gray-500">Fixed in</span>
                                                    <p className={`font-bold ${p.has_fix ? 'text-emerald-700' : 'text-gray-400'}`}>
                                                        {p.fixed_version || (p.has_fix ? '—' : 'not announced')}
                                                    </p>
                                                </div>
                                                <div className="col-span-1 text-right">
                                                    {p.has_fix ? (
                                                        <span className="inline-flex items-center rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-bold text-emerald-700">FIX</span>
                                                    ) : (
                                                        <span className="inline-flex items-center rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-bold text-gray-500">—</span>
                                                    )}
                                                </div>
                                            </div>
                                            {p.source && (
                                                <div className="mt-1 text-[10px] text-gray-400 uppercase tracking-wider">via {p.source}</div>
                                            )}
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div className="bg-gray-50 rounded-lg p-4 font-mono text-sm">
                                    <div className="grid grid-cols-3 gap-4">
                                        <div>
                                            <span className="text-gray-500">Package:</span>
                                            <p className="font-bold text-gray-900">{vuln.package_name}</p>
                                        </div>
                                        {vuln.package_version && (
                                            <div>
                                                <span className="text-gray-500">Installed:</span>
                                                <p className="font-bold text-gray-900">{vuln.package_version}</p>
                                            </div>
                                        )}
                                        {vuln.fixed_version && (
                                            <div>
                                                <span className="text-gray-500">Fixed in:</span>
                                                <p className="font-bold text-emerald-700">{vuln.fixed_version}</p>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            )}
                        </div>
                    )}

                    {/* External Links */}
                    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                        <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <LinkIcon className="h-5 w-5 text-gray-500" />
                            External References
                        </h2>
                        <div className="flex flex-wrap gap-3">
                            <a
                                href={`https://nvd.nist.gov/vuln/detail/${vuln.cve_id}`}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors font-mono text-sm"
                            >
                                NVD Database →
                            </a>
                            <a
                                href={`https://www.cve.org/CVERecord?id=${vuln.cve_id}`}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center gap-2 px-4 py-2 bg-green-50 text-green-700 rounded-lg hover:bg-green-100 transition-colors font-mono text-sm"
                            >
                                CVE.org →
                            </a>
                            <a
                                href={`https://www.exploit-db.com/search?cve=${vuln.cve_id.replace('CVE-', '')}`}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center gap-2 px-4 py-2 bg-red-50 text-red-700 rounded-lg hover:bg-red-100 transition-colors font-mono text-sm"
                            >
                                Exploit-DB →
                            </a>
                        </div>
                    </div>
                </div>

                {/* Right Column - Metadata */}
                <div className="space-y-6">
                    {/* CVSS Score */}
                    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                        <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <ShieldExclamationIcon className="h-5 w-5 text-gray-500" />
                            CVSS Score
                        </h2>
                        <div className="text-center">
                            <div className={`text-5xl font-bold ${(vuln.cvss_score || 0) >= 9 ? 'text-red-600' :
                                    (vuln.cvss_score || 0) >= 7 ? 'text-orange-500' :
                                        (vuln.cvss_score || 0) >= 4 ? 'text-yellow-500' :
                                            'text-green-500'
                                }`}>
                                {vuln.cvss_score?.toFixed(1) || 'N/A'}
                            </div>
                            <p className="text-gray-500 text-sm mt-1">out of 10.0</p>
                        </div>
                    </div>

                    {/* Threat Intel Enrichment */}
                    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                        <div className="flex items-center justify-between mb-4">
                            <h2 className="text-lg font-bold text-gray-900 flex items-center gap-2">
                                <ShieldExclamationIcon className="h-5 w-5 text-gray-500" />
                                Threat Intelligence
                            </h2>
                            <ThreatIntelRefreshButton
                                vulnId={vuln.id}
                                onRefreshed={(v) => setVuln(v)}
                            />
                        </div>
                        {vuln.enrichment_updated_at && (
                            <p className="text-[11px] text-gray-400 font-mono -mt-3 mb-3">
                                Last refreshed: {new Date(vuln.enrichment_updated_at).toLocaleString('de-CH', {
                                    day: '2-digit', month: '2-digit', year: 'numeric',
                                    hour: '2-digit', minute: '2-digit', second: '2-digit',
                                })}
                            </p>
                        )}

                        {/* CISA KEV (US) */}
                        <div className="mb-4">
                            <div className="text-xs text-gray-500 mb-1">CISA KEV (US)</div>
                            {vuln.kev_listed ? (
                                <div className="bg-red-50 border border-red-200 rounded-md p-3">
                                    <div className="flex items-center gap-2">
                                        <span className="inline-flex items-center rounded-sm bg-red-100 px-2 py-0.5 text-xs font-bold text-red-700">
                                            ACTIVELY EXPLOITED
                                        </span>
                                        {vuln.kev_ransomware_use && (
                                            <span className="inline-flex items-center rounded-sm bg-purple-100 px-2 py-0.5 text-xs font-bold text-purple-700">
                                                RANSOMWARE
                                            </span>
                                        )}
                                    </div>
                                    {vuln.kev_date_added && (
                                        <p className="text-xs text-gray-600 mt-2 font-mono">
                                            Added to catalog: {new Date(vuln.kev_date_added).toLocaleDateString()}
                                        </p>
                                    )}
                                </div>
                            ) : (
                                <p className="text-sm text-gray-400 italic">Not in CISA KEV catalog</p>
                            )}
                        </div>

                        {/* ENISA EUVD (EU) */}
                        <div className="mb-4">
                            <div className="text-xs text-gray-500 mb-1">ENISA EUVD (EU)</div>
                            {vuln.euvd_listed ? (
                                <div className="bg-blue-50 border border-blue-200 rounded-md p-3">
                                    <div className="flex items-center gap-2 flex-wrap">
                                        <span className="inline-flex items-center rounded-sm bg-blue-100 px-2 py-0.5 text-xs font-bold text-blue-700">
                                            EU EXPLOITED
                                        </span>
                                        {vuln.euvd_critical && (
                                            <span className="inline-flex items-center rounded-sm bg-amber-100 px-2 py-0.5 text-xs font-bold text-amber-700">
                                                ENISA CRITICAL
                                            </span>
                                        )}
                                    </div>
                                    {vuln.euvd_id && (
                                        <p className="text-xs text-gray-600 mt-2 font-mono">
                                            EUVD-ID: {vuln.euvd_id}
                                        </p>
                                    )}
                                    {vuln.euvd_date_added && (
                                        <p className="text-xs text-gray-600 font-mono">
                                            Added: {new Date(vuln.euvd_date_added).toLocaleDateString()}
                                        </p>
                                    )}
                                </div>
                            ) : (
                                <p className="text-sm text-gray-400 italic">Not in ENISA EUVD catalog</p>
                            )}
                        </div>

                        {/* EPSS */}
                        <div className="mb-4">
                            <div className="text-xs text-gray-500 mb-1">EPSS (Exploit Prediction)</div>
                            {vuln.epss_score != null ? (
                                <div>
                                    <div className="flex items-baseline gap-2">
                                        <span className={`text-2xl font-bold font-mono ${vuln.epss_score >= 0.5 ? 'text-red-600' : vuln.epss_score >= 0.1 ? 'text-orange-600' : 'text-gray-700'}`}>
                                            {(vuln.epss_score * 100).toFixed(2)}%
                                        </span>
                                        <span className="text-xs text-gray-500 font-mono">
                                            Percentile {((vuln.epss_percentile || 0) * 100).toFixed(1)}
                                        </span>
                                    </div>
                                    <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden mt-2">
                                        <div
                                            className={`h-full ${vuln.epss_score >= 0.5 ? 'bg-red-500' : vuln.epss_score >= 0.1 ? 'bg-orange-500' : 'bg-green-500'}`}
                                            style={{ width: `${vuln.epss_score * 100}%` }}
                                        />
                                    </div>
                                    <p className="text-[10px] text-gray-400 mt-1 font-mono">
                                        Probability of exploitation in next 30 days (FIRST.org EPSS)
                                    </p>
                                </div>
                            ) : (
                                <p className="text-sm text-gray-400 italic">No EPSS data</p>
                            )}
                        </div>

                        {/* Priority Score Breakdown */}
                        {vuln.priority_breakdown && (
                            <div className="border-t border-gray-100 pt-3 mt-3">
                                <div className="text-xs text-gray-500 mb-2">Priority Score Breakdown</div>
                                <div className="space-y-1 text-xs font-mono">
                                    <div className="flex justify-between"><span className="text-gray-600">CVSS</span><span>{vuln.priority_breakdown.cvss.toFixed(1)}</span></div>
                                    <div className="flex justify-between">
                                        <span className="text-gray-600">Exploit ({vuln.priority_breakdown.exploit_source})</span>
                                        <span>+{vuln.priority_breakdown.exploit_bonus.toFixed(1)}</span>
                                    </div>
                                    <div className="flex justify-between"><span className="text-gray-600">× Asset Factor</span><span>× {vuln.priority_breakdown.asset_factor.toFixed(1)}</span></div>
                                    <div className="flex justify-between"><span className="text-gray-600">+ Age</span><span>+{vuln.priority_breakdown.age_bonus.toFixed(1)}</span></div>
                                    {vuln.priority_breakdown.kev_bonus > 0 && (
                                        <div className="flex justify-between text-red-700"><span>+ KEV Bonus</span><span>+{vuln.priority_breakdown.kev_bonus.toFixed(1)}</span></div>
                                    )}
                                    {(vuln.priority_breakdown.euvd_bonus ?? 0) > 0 && (
                                        <div className="flex justify-between text-blue-700"><span>+ EUVD Bonus</span><span>+{(vuln.priority_breakdown.euvd_bonus ?? 0).toFixed(1)}</span></div>
                                    )}
                                    <div className="flex justify-between border-t border-gray-200 pt-1 mt-1 font-bold">
                                        <span>= Priority Total</span>
                                        <span>{vuln.priority_breakdown.total.toFixed(1)}</span>
                                    </div>
                                    {vuln.priority_breakdown.cpr != null && (
                                        <div className="flex justify-between pt-2 mt-1 border-t border-dashed border-gray-200" title="CPR (Cybersecurity Priority Risk) = (CVSS×10 × 0.6) + (EPSS_Percentile × 0.4) — JacquesKruger algorithm">
                                            <span className="text-gray-600">CPR ((CVSS×10)·0.6 + EPSS%·0.4)</span>
                                            <span className={`font-bold ${vuln.priority_breakdown.cpr >= 30 ? 'text-red-700' : vuln.priority_breakdown.cpr >= 10 ? 'text-orange-600' : 'text-gray-700'}`}>
                                                {vuln.priority_breakdown.cpr.toFixed(2)}
                                            </span>
                                        </div>
                                    )}
                                    {(vuln.priority_breakdown.catalog_count ?? 0) >= 2 && (
                                        <div className="text-purple-700 text-[10px] italic pt-1">
                                            Confirmed by both CISA KEV and ENISA EUVD
                                        </div>
                                    )}
                                </div>
                            </div>
                        )}

                        {vuln.enrichment_updated_at && (
                            <p className="text-[10px] text-gray-400 mt-3 font-mono">
                                Last enriched: {new Date(vuln.enrichment_updated_at).toLocaleString()}
                            </p>
                        )}
                    </div>

                    {/* Asset Info */}
                    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                        <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <ServerIcon className="h-5 w-5 text-gray-500" />
                            Affected Asset
                        </h2>
                        <Link
                            href={`/assets?id=${vuln.asset_id}`}
                            className="block bg-gray-50 rounded-lg p-4 hover:bg-gray-100 transition-colors"
                        >
                            <p className="font-bold text-gray-900 font-mono">
                                {vuln.asset_hostname || `Asset #${vuln.asset_id}`}
                            </p>
                            {vuln.asset?.ip_address && (
                                <p className="text-gray-500 text-sm font-mono">{vuln.asset.ip_address}</p>
                            )}
                        </Link>
                    </div>

                    {/* Assignment Info */}
                    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                        <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <UserCircleIcon className="h-5 w-5 text-gray-500" />
                            Assignment
                        </h2>
                        {vuln.assigned_user_name || vuln.assigned_group_name ? (
                            <div className="bg-gray-50 rounded-lg p-4">
                                {vuln.assigned_user_name && (
                                    <p className="text-gray-900 font-medium">
                                        User: {vuln.assigned_user_name}
                                    </p>
                                )}
                                {vuln.assigned_group_name && (
                                    <p className="text-gray-900 font-medium">
                                        Group: {vuln.assigned_group_name}
                                    </p>
                                )}
                            </div>
                        ) : (
                            <p className="text-gray-500 italic">Not assigned</p>
                        )}
                    </div>

                    {/* Detection Sources (Nessus / Wazuh multi-scanner) */}
                    {((vuln.sources && vuln.sources.length > 0) || vuln.nessus_plugin_id || vuln.nessus_vpr_score != null || vuln.ssvc_technical_impact || vuln.ssvc_automatable) && (
                        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                            <h2 className="text-lg font-bold text-gray-900 mb-4">Detection Sources</h2>
                            {/* Source badges */}
                            <div className="flex flex-wrap gap-1.5 mb-3">
                                {(vuln.sources || []).map(src => {
                                    const cls = src === 'wazuh'
                                        ? 'bg-green-100 text-green-700 border-green-200'
                                        : src === 'nessus'
                                            ? 'bg-purple-100 text-purple-700 border-purple-200'
                                            : 'bg-gray-100 text-gray-600 border-gray-200';
                                    return (
                                        <span key={src} className={`inline-flex items-center rounded border px-2 py-0.5 text-xs font-bold uppercase ${cls}`}>{src}</span>
                                    );
                                })}
                                {vuln.cross_confirmed && (
                                    <span className="inline-flex items-center rounded border border-emerald-200 bg-emerald-100 px-2 py-0.5 text-xs font-bold text-emerald-700"
                                        title="Reported by multiple independent scanners — highest confidence">
                                        ✓ Cross-confirmed
                                    </span>
                                )}
                            </div>
                            <div className="space-y-1.5 text-sm font-mono">
                                {vuln.first_detected_by && (
                                    <div className="flex justify-between text-xs">
                                        <span className="text-gray-500">First detected by</span>
                                        <span className="font-semibold uppercase">{vuln.first_detected_by}</span>
                                    </div>
                                )}
                                {vuln.nessus_plugin_id && (
                                    <div className="flex justify-between text-xs">
                                        <span className="text-gray-500">Nessus Plugin ID</span>
                                        <a
                                            href={`https://www.tenable.com/plugins/nessus/${vuln.nessus_plugin_id}`}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="text-purple-600 hover:underline"
                                        >
                                            #{vuln.nessus_plugin_id}
                                        </a>
                                    </div>
                                )}
                                {vuln.nessus_vpr_score != null && (
                                    <div className="flex justify-between text-xs items-center">
                                        <span className="text-gray-500" title="Tenable's Vulnerability Priority Rating (0–10) — proprietary commercial score">
                                            Tenable VPR
                                        </span>
                                        <span className={`font-bold ${vuln.nessus_vpr_score >= 9 ? 'text-red-600' : vuln.nessus_vpr_score >= 7 ? 'text-orange-500' : vuln.nessus_vpr_score >= 4 ? 'text-yellow-600' : 'text-green-600'}`}>
                                            {vuln.nessus_vpr_score.toFixed(1)} / 10
                                        </span>
                                    </div>
                                )}
                                {(vuln.ssvc_technical_impact || vuln.ssvc_automatable) && (
                                    <div className="pt-2 mt-2 border-t border-gray-100 space-y-1.5">
                                        <p className="text-[10px] uppercase tracking-wider text-gray-400">
                                            SSVC (CISA Vulnrichment)
                                        </p>
                                        {vuln.ssvc_technical_impact && (
                                            <div className="flex justify-between text-xs items-center">
                                                <span className="text-gray-500" title="Whether successful exploitation grants partial or total control over the affected software">
                                                    Technical Impact
                                                </span>
                                                <span className={`font-bold uppercase ${
                                                    vuln.ssvc_technical_impact === 'total' ? 'text-red-600' : 'text-gray-700'
                                                }`}>
                                                    {vuln.ssvc_technical_impact}
                                                </span>
                                            </div>
                                        )}
                                        {vuln.ssvc_automatable && (
                                            <div className="flex justify-between text-xs items-center">
                                                <span className="text-gray-500" title="Whether reliable mass exploitation is mechanically feasible">
                                                    Automatable
                                                </span>
                                                <span className={`font-bold uppercase ${
                                                    vuln.ssvc_automatable === 'yes' ? 'text-red-600' : 'text-gray-700'
                                                }`}>
                                                    {vuln.ssvc_automatable}
                                                </span>
                                            </div>
                                        )}
                                    </div>
                                )}
                            </div>
                        </div>
                    )}

                    {/* Timeline */}
                    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                        <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <CalendarIcon className="h-5 w-5 text-gray-500" />
                            Timeline
                        </h2>
                        <div className="space-y-3 text-sm">
                            <div className="flex justify-between">
                                <span className="text-gray-500">Detected:</span>
                                <span className="font-mono text-gray-900">
                                    {vuln.detected_at ? new Date(vuln.detected_at).toLocaleString('de-CH', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'Unknown'}
                                </span>
                            </div>
                            {vuln.deferred_until && (
                                <div className="flex justify-between">
                                    <span className="text-gray-500">Deferred until:</span>
                                    <span className="font-mono text-gray-900">
                                        {new Date(vuln.deferred_until).toLocaleDateString()}
                                    </span>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Change History — Revisionssicherheit. Lists every
                        status change for this vuln (manual + auto-patched
                        via scanner sync), who triggered it, when, and the
                        free-text reason captured at the time. */}
                    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                        <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <CalendarIcon className="h-5 w-5 text-gray-500" />
                            Change History
                            <span className="text-[10px] uppercase tracking-wider text-gray-400 font-mono">
                                {history.length} {history.length === 1 ? 'entry' : 'entries'}
                            </span>
                        </h2>
                        {history.length === 0 ? (
                            <p className="text-sm text-gray-500 font-mono">No recorded changes yet.</p>
                        ) : (
                            <ul className="space-y-3 text-sm">
                                {history.map((h) => {
                                    const meta = parseAudit(h.new_value);
                                    const who = h.username || 'System/Auto';
                                    const when = new Date(h.timestamp).toLocaleString('de-CH', {
                                        day: '2-digit', month: '2-digit', year: 'numeric',
                                        hour: '2-digit', minute: '2-digit',
                                    });
                                    return (
                                        <li key={h.id} className="border-l-2 border-gray-200 pl-3">
                                            <div className="flex items-center gap-2 flex-wrap">
                                                <span className="text-[10px] uppercase tracking-wider rounded bg-gray-100 px-1.5 py-0.5 text-gray-600 font-mono">
                                                    {h.event_type}
                                                </span>
                                                {h.old_value && meta.status && (
                                                    <span className="text-xs font-mono text-gray-500">
                                                        {h.old_value} → <strong className="text-gray-900">{meta.status}</strong>
                                                    </span>
                                                )}
                                                {meta.source && (
                                                    <span className="text-[10px] rounded bg-blue-50 text-blue-700 px-1.5 py-0.5 font-mono">
                                                        via {meta.source}
                                                    </span>
                                                )}
                                            </div>
                                            {meta.reason && (
                                                <p className="text-sm text-gray-700 mt-1 italic">&ldquo;{meta.reason}&rdquo;</p>
                                            )}
                                            <p className="text-[11px] text-gray-400 mt-1 font-mono">
                                                {who} · {when}
                                            </p>
                                        </li>
                                    );
                                })}
                            </ul>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}
