import React, { useState, useEffect, useCallback } from 'react';
import { X, MessageSquare, Send, Loader, AlertCircle, Clock, Shield, Trash2, Calendar, FileText, Save } from 'lucide-react';
import ConfirmModal from '../ConfirmModal';

const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';

const TEAL = '#14B8A6';

const CATEGORY_COLORS = {
    'Vulnerability Management': '#EF4444',
    'Access & MFA':             '#F59E0B',
    'Logging & Monitoring':     '#8B5CF6',
    'End-of-Life OS':           '#F97316',
    'Decommissioned Assets':    '#64748B',
    'Asset Data Quality':       '#64748B',
    'Application Security':     '#0EA5E9',
    'Disaster Recovery':        TEAL,
    'Endpoint Protection':      '#F97316',
};

function categoryColor(category) {
    return CATEGORY_COLORS[category] || '#94A3B8';
}

function MetricChip({ metricId, category, status }) {
    const color = status === 'resolved' ? '#64748B' : categoryColor(category);
    return (
        <span style={{
            display: 'inline-flex', alignItems: 'center',
            padding: '0.2rem 0.5rem',
            background: `${color}18`,
            border: `1px solid ${color}50`,
            borderRadius: '0.25rem',
            color, fontSize: '0.7rem', fontFamily: 'monospace', fontWeight: '600',
        }}>
            {metricId}
        </span>
    );
}

export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded, onNavigate }) {
    const [detail, setDetail]       = useState(null);
    const [loading, setLoading]     = useState(true);
    const [error, setError]         = useState(null);
    const [noteText, setNoteText]   = useState('');
    const [selectedMetrics, setSelectedMetrics] = useState([]);
    const [submitting, setSubmitting] = useState(false);
    const [noteError, setNoteError] = useState(null);
    const [pendingConfirm, setPendingConfirm] = useState(null);

    // Metadata fields
    const [resolutionDate, setResolutionDate] = useState('');
    const [remediationPlan, setRemediationPlan] = useState('');
    const [metaSaving, setMetaSaving] = useState(false);
    const [metaError, setMetaError] = useState(null);

    const handleSaveMetadata = async (fields) => {
        setMetaSaving(true);
        setMetaError(null);
        try {
            const res = await fetch(`${API_BASE}/compliance/items/${encodeURIComponent(hostname)}/metadata`, {
                method: 'PATCH',
                credentials: 'include',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(fields),
            });
            const data = await res.json();
            if (!res.ok) throw new Error(data.error || 'Failed to save metadata');
        } catch (err) {
            setMetaError(err.message);
        } finally {
            setMetaSaving(false);
        }
    };

    const fetchDetail = useCallback(async () => {
        setLoading(true);
        setError(null);
        try {
            const res  = await fetch(`${API_BASE}/compliance/items/${encodeURIComponent(hostname)}`, { credentials: 'include' });
            const data = await res.json();
            if (!res.ok) throw new Error(data.error || 'Failed to load device');
            setDetail(data);

            // Default selected metrics to first active failing metric
            const firstActive = (data.metrics || []).find(m => m.status === 'active');
            if (firstActive) setSelectedMetrics([firstActive.metric_id]);

            // Populate metadata fields
            setResolutionDate(data.resolution_date || '');
            setRemediationPlan(data.remediation_plan || '');
        } catch (err) {
            setError(err.message);
        } finally {
            setLoading(false);
        }
    }, [hostname]);

    useEffect(() => { fetchDetail(); }, [fetchDetail]);

    const handleAddNote = async () => {
        if (!noteText.trim() || selectedMetrics.length === 0) return;
        setSubmitting(true);
        setNoteError(null);
        try {
            const res = await fetch(`${API_BASE}/compliance/notes`, {
                method: 'POST',
                credentials: 'include',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ hostname, metric_ids: selectedMetrics, note: noteText.trim() }),
            });
            const data = await res.json();
            if (!res.ok) throw new Error(data.error || 'Failed to save note');
            setNoteText('');
            await fetchDetail();
            if (onNoteAdded) onNoteAdded();
        } catch (err) {
            setNoteError(err.message);
        } finally {
            setSubmitting(false);
        }
    };

    const handleDeleteNote = async (noteId, hasGroup) => {
        setPendingConfirm({
            title: 'Delete Note',
            message: 'Delete this note?',
            confirmText: 'Delete',
            onConfirm: async () => {
                setPendingConfirm(null);
                try {
                    const url = hasGroup
                        ? `${API_BASE}/compliance/notes/${noteId}?group=true`
                        : `${API_BASE}/compliance/notes/${noteId}`;
                    const res = await fetch(url, { method: 'DELETE', credentials: 'include' });
                    const data = await res.json();
                    if (!res.ok) throw new Error(data.error || 'Failed to delete note');
                    await fetchDetail();
                    if (onNoteAdded) onNoteAdded();
                } catch (err) {
                    setNoteError(err.message);
                }
            },
        });
    };

    const activeMetrics   = detail?.metrics?.filter(m => m.status === 'active')   || [];
    const resolvedMetrics = detail?.metrics?.filter(m => m.status === 'resolved') || [];

    return (
        <>
            {/* Backdrop */}
            <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 40 }} />

            {/* Panel */}
            <div style={{
                position: 'fixed', top: 0, right: 0, bottom: 0, width: '420px',
                background: 'linear-gradient(180deg, #0F1A2E 0%, #0A1628 100%)',
                borderLeft: `1px solid ${TEAL}30`,
                boxShadow: `-8px 0 32px rgba(0,0,0,0.6)`,
                zIndex: 41,
                display: 'flex', flexDirection: 'column',
                overflowY: 'auto',
            }}>
                {/* Header */}
                <div style={{
                    padding: '1.25rem 1.25rem 1rem',
                    borderBottom: '1px solid rgba(255,255,255,0.06)',
                    flexShrink: 0,
                }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                        <div style={{ minWidth: 0, flex: 1, marginRight: '0.75rem' }}>
                            <div style={{ fontFamily: 'monospace', fontSize: '0.9rem', fontWeight: '700', color: '#F8FAFC', wordBreak: 'break-all', lineHeight: 1.3 }}>
                                {hostname}
                            </div>
                            {detail && (
                                <div style={{ marginTop: '0.4rem', display: 'flex', flexWrap: 'wrap', gap: '0.4rem' }}>
                                    {detail.ip_address && (
                                        <span style={{ fontSize: '0.72rem', fontFamily: 'monospace', color: '#64748B' }}>{detail.ip_address}</span>
                                    )}
                                    {detail.device_type && (
                                        <span style={{ fontSize: '0.72rem', color: '#475569' }}>· {detail.device_type}</span>
                                    )}
                                    <span style={{ fontSize: '0.72rem', color: TEAL }}>· {detail.team}</span>
                                </div>
                            )}
                        </div>
                        <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#475569', flexShrink: 0, padding: '0.25rem' }}
                            onMouseEnter={e => e.currentTarget.style.color = '#E2E8F0'}
                            onMouseLeave={e => e.currentTarget.style.color = '#475569'}>
                            <X style={{ width: '18px', height: '18px' }} />
                        </button>
                    </div>
                </div>

                {loading && (
                    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Loader style={{ width: '28px', height: '28px', color: TEAL, animation: 'spin 1s linear infinite' }} />
                    </div>
                )}

                {error && (
                    <div style={{ padding: '1.25rem', display: 'flex', gap: '0.5rem', color: '#F87171', fontSize: '0.8rem' }}>
                        <AlertCircle style={{ width: '16px', height: '16px', flexShrink: 0, marginTop: '1px' }} />{error}
                    </div>
                )}

                {!loading && !error && detail && (
                    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>

                        {/* Active failing metrics */}
                        {activeMetrics.length > 0 && (
                            <Section title="Failing Metrics" icon={<Shield style={{ width: '14px', height: '14px' }} />}>
                                {activeMetrics.map(m => (
                                    <MetricRow key={m.metric_id} metric={m} onNavigate={onNavigate} />
                                ))}
                            </Section>
                        )}

                        {/* Resolved metrics */}
                        {resolvedMetrics.length > 0 && (
                            <Section title="Resolved Metrics" muted>
                                {resolvedMetrics.map(m => (
                                    <MetricRow key={m.metric_id} metric={m} resolved />
                                ))}
                            </Section>
                        )}

                        {/* Upload history summary */}
                        {activeMetrics.length > 0 && (
                            <Section title="History" icon={<Clock style={{ width: '14px', height: '14px' }} />}>
                                {activeMetrics.map(m => (
                                    <div key={m.metric_id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
                                        <MetricChip metricId={m.metric_id} category={m.category} />
                                        <div style={{ fontSize: '0.72rem', color: '#64748B', fontFamily: 'monospace', textAlign: 'right' }}>
                                            <span style={{ color: m.seen_count > 2 ? '#F59E0B' : '#94A3B8' }}>
                                                {m.seen_count}× seen
                                            </span>
                                            {m.first_seen && <span style={{ marginLeft: '0.5rem' }}>since {m.first_seen}</span>}
                                        </div>
                                    </div>
                                ))}
                            </Section>
                        )}

                        {/* Resolution Date */}
                        <Section title="Resolution Date" icon={<Calendar style={{ width: '14px', height: '14px' }} />}>
                            <input
                                type="date"
                                value={resolutionDate}
                                onChange={e => setResolutionDate(e.target.value)}
                                onBlur={() => handleSaveMetadata({ resolution_date: resolutionDate || null })}
                                style={{
                                    width: '100%',
                                    background: 'rgba(15,23,42,0.8)',
                                    border: '1px solid rgba(20,184,166,0.25)',
                                    borderRadius: '0.375rem',
                                    color: '#F8FAFC',
                                    padding: '0.5rem 0.625rem',
                                    fontSize: '0.8rem',
                                    fontFamily: 'monospace',
                                    outline: 'none',
                                }}
                                onFocus={e => e.target.style.borderColor = `${TEAL}70`}
                            />
                        </Section>

                        {/* Remediation Plan */}
                        <Section title="Remediation Plan" icon={<FileText style={{ width: '14px', height: '14px' }} />}>
                            <textarea
                                value={remediationPlan}
                                onChange={e => {
                                    if (e.target.value.length <= 2000) setRemediationPlan(e.target.value);
                                }}
                                placeholder="Describe the remediation plan…"
                                rows={4}
                                style={{
                                    width: '100%', resize: 'vertical',
                                    background: 'rgba(15,23,42,0.8)',
                                    border: '1px solid rgba(20,184,166,0.25)',
                                    borderRadius: '0.375rem',
                                    color: '#F8FAFC',
                                    padding: '0.5rem 0.625rem',
                                    fontSize: '0.8rem',
                                    outline: 'none',
                                    boxSizing: 'border-box',
                                }}
                                onFocus={e => e.target.style.borderColor = `${TEAL}70`}
                                onBlur={e => e.target.style.borderColor = 'rgba(20,184,166,0.25)'}
                            />
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '0.4rem' }}>
                                <span style={{ fontSize: '0.68rem', fontFamily: 'monospace', color: remediationPlan.length > 1900 ? '#F59E0B' : '#475569' }}>
                                    {remediationPlan.length}/2000
                                </span>
                                <button
                                    onClick={() => handleSaveMetadata({ remediation_plan: remediationPlan || null })}
                                    disabled={metaSaving}
                                    style={{
                                        display: 'inline-flex', alignItems: 'center', gap: '0.3rem',
                                        padding: '0.3rem 0.6rem',
                                        background: `${TEAL}15`,
                                        border: `1px solid ${TEAL}60`,
                                        borderRadius: '0.25rem',
                                        color: TEAL,
                                        fontSize: '0.68rem', fontFamily: 'monospace', fontWeight: '600',
                                        cursor: metaSaving ? 'wait' : 'pointer',
                                        opacity: metaSaving ? 0.6 : 1,
                                        transition: 'all 0.15s',
                                    }}
                                >
                                    {metaSaving
                                        ? <Loader style={{ width: '11px', height: '11px', animation: 'spin 1s linear infinite' }} />
                                        : <Save style={{ width: '11px', height: '11px' }} />}
                                    Save
                                </button>
                            </div>
                            {metaError && <div style={{ marginTop: '0.4rem', color: '#F87171', fontSize: '0.72rem', fontFamily: 'monospace' }}>{metaError}</div>}
                        </Section>

                        {/* Notes */}
                        <Section title="Notes" icon={<MessageSquare style={{ width: '14px', height: '14px' }} />} grow>
                            {detail.notes.length === 0 && (
                                <div style={{ color: '#334155', fontSize: '0.75rem', fontStyle: 'italic', marginBottom: '0.75rem' }}>No notes yet</div>
                            )}
                            {(() => {
                                // Build a lookup map for metric categories (active + resolved)
                                const metricMap = {};
                                (detail.metrics || []).forEach(m => { metricMap[m.metric_id] = m.category; });

                                // Group notes by group_id, preserving reverse chronological order
                                const grouped = [];
                                const seen = new Set();
                                // detail.notes is already sorted newest-first from the API
                                for (const n of detail.notes) {
                                    const gid = n.group_id;
                                    if (!gid) {
                                        // Legacy note without group_id — render individually
                                        grouped.push({ key: `note-${n.id}`, notes: [n], note: n.note, created_by: n.created_by, created_at: n.created_at });
                                    } else if (!seen.has(gid)) {
                                        seen.add(gid);
                                        const group = detail.notes.filter(x => x.group_id === gid);
                                        grouped.push({ key: `group-${gid}`, notes: group, note: group[0].note, created_by: group[0].created_by, created_at: group[0].created_at });
                                    }
                                }

                                return grouped.map(g => (
                                    <div key={g.key} style={{
                                        marginBottom: '0.75rem', padding: '0.625rem 0.75rem',
                                        background: 'rgba(15,23,42,0.6)', borderRadius: '0.375rem',
                                        border: '1px solid rgba(255,255,255,0.05)',
                                    }}>
                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.3rem' }}>
                                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.25rem' }}>
                                                {g.notes.map(n => (
                                                    <MetricChip key={n.id} metricId={n.metric_id} category={metricMap[n.metric_id] || ''} />
                                                ))}
                                            </div>
                                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', flexShrink: 0, marginLeft: '0.5rem' }}>
                                                <span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace', whiteSpace: 'nowrap' }}>
                                                    {g.created_by && `${g.created_by} · `}{g.created_at?.slice(0, 10)}
                                                </span>
                                                <button
                                                    onClick={() => handleDeleteNote(g.notes[0].id, !!g.notes[0].group_id)}
                                                    title="Delete note"
                                                    style={{
                                                        background: 'none', border: '1px solid rgba(239,68,68,0.15)',
                                                        borderRadius: '0.25rem', padding: '0.2rem',
                                                        cursor: 'pointer', color: '#334155',
                                                        transition: 'all 0.15s', lineHeight: 1,
                                                    }}
                                                    onMouseEnter={e => { e.currentTarget.style.color = '#EF4444'; e.currentTarget.style.borderColor = 'rgba(239,68,68,0.5)'; }}
                                                    onMouseLeave={e => { e.currentTarget.style.color = '#334155'; e.currentTarget.style.borderColor = 'rgba(239,68,68,0.15)'; }}
                                                >
                                                    <Trash2 style={{ width: '11px', height: '11px' }} />
                                                </button>
                                            </div>
                                        </div>
                                        <div style={{ fontSize: '0.8rem', color: '#CBD5E1', lineHeight: 1.5 }}>{g.note}</div>
                                    </div>
                                ));
                            })()}

                            {/* Add note */}
                            <div style={{ marginTop: 'auto', paddingTop: '0.75rem', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
                                {activeMetrics.length > 1 && (() => {
                                    const allSelected = activeMetrics.length > 0 && activeMetrics.every(m => selectedMetrics.includes(m.metric_id));
                                    return (
                                        <div style={{ marginBottom: '0.5rem' }}>
                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
                                                <span style={{ fontSize: '0.68rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#475569' }}>
                                                    Metrics
                                                </span>
                                                <button
                                                    onClick={() => {
                                                        if (allSelected) {
                                                            setSelectedMetrics([activeMetrics[0].metric_id]);
                                                        } else {
                                                            setSelectedMetrics(activeMetrics.map(m => m.metric_id));
                                                        }
                                                    }}
                                                    style={{
                                                        background: 'none', border: 'none', cursor: 'pointer',
                                                        fontSize: '0.68rem', fontFamily: 'monospace',
                                                        color: TEAL, padding: 0,
                                                        transition: 'opacity 0.15s',
                                                    }}
                                                    onMouseEnter={e => e.currentTarget.style.opacity = '0.7'}
                                                    onMouseLeave={e => e.currentTarget.style.opacity = '1'}
                                                >
                                                    {allSelected ? 'Deselect All' : 'Select All'}
                                                </button>
                                            </div>
                                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.35rem' }}>
                                                {activeMetrics.map(m => {
                                                    const isSelected = selectedMetrics.includes(m.metric_id);
                                                    const color = categoryColor(m.category);
                                                    return (
                                                        <button
                                                            key={m.metric_id}
                                                            onClick={() => {
                                                                if (isSelected) {
                                                                    if (selectedMetrics.length > 1) {
                                                                        setSelectedMetrics(selectedMetrics.filter(id => id !== m.metric_id));
                                                                    }
                                                                } else {
                                                                    setSelectedMetrics([...selectedMetrics, m.metric_id]);
                                                                }
                                                            }}
                                                            style={{
                                                                display: 'inline-flex', alignItems: 'center',
                                                                padding: '0.25rem 0.5rem',
                                                                background: isSelected ? `${color}25` : `${color}08`,
                                                                border: `1px solid ${isSelected ? `${color}90` : `${color}30`}`,
                                                                borderRadius: '0.25rem',
                                                                color: isSelected ? color : `${color}90`,
                                                                fontSize: '0.7rem', fontFamily: 'monospace', fontWeight: '600',
                                                                cursor: (isSelected && selectedMetrics.length === 1) ? 'default' : 'pointer',
                                                                transition: 'all 0.15s',
                                                                opacity: (isSelected && selectedMetrics.length === 1) ? 0.85 : 1,
                                                            }}
                                                        >
                                                            {m.metric_id}
                                                        </button>
                                                    );
                                                })}
                                            </div>
                                        </div>
                                    );
                                })()}
                                <div style={{ display: 'flex', gap: '0.5rem' }}>
                                    <textarea
                                        value={noteText}
                                        onChange={e => setNoteText(e.target.value)}
                                        placeholder="Add a note…"
                                        rows={2}
                                        style={{
                                            flex: 1, resize: 'none',
                                            background: 'rgba(15,23,42,0.8)', border: '1px solid rgba(20,184,166,0.25)',
                                            borderRadius: '0.375rem', color: '#F8FAFC',
                                            padding: '0.5rem 0.625rem', fontSize: '0.8rem',
                                            outline: 'none',
                                        }}
                                        onFocus={e => e.target.style.borderColor = `${TEAL}70`}
                                        onBlur={e => e.target.style.borderColor = 'rgba(20,184,166,0.25)'}
                                        onKeyDown={e => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) handleAddNote(); }}
                                    />
                                    <button onClick={handleAddNote} disabled={!noteText.trim() || selectedMetrics.length === 0 || submitting}
                                        style={{
                                            padding: '0.5rem 0.625rem', flexShrink: 0,
                                            background: (noteText.trim() && selectedMetrics.length > 0) ? `${TEAL}20` : 'transparent',
                                            border: `1px solid ${(noteText.trim() && selectedMetrics.length > 0) ? TEAL : 'rgba(20,184,166,0.2)'}`,
                                            borderRadius: '0.375rem', color: (noteText.trim() && selectedMetrics.length > 0) ? TEAL : '#334155',
                                            cursor: (noteText.trim() && selectedMetrics.length > 0) ? 'pointer' : 'default', transition: 'all 0.15s',
                                        }}>
                                        {submitting
                                            ? <Loader style={{ width: '16px', height: '16px', animation: 'spin 1s linear infinite' }} />
                                            : <Send style={{ width: '16px', height: '16px' }} />}
                                    </button>
                                </div>
                                {noteError && <div style={{ marginTop: '0.4rem', color: '#F87171', fontSize: '0.72rem' }}>{noteError}</div>}
                            </div>
                        </Section>
                    </div>
                )}
            </div>

            {/* Confirmation Modal */}
            <ConfirmModal
                open={!!pendingConfirm}
                title={pendingConfirm?.title}
                message={pendingConfirm?.message}
                confirmText={pendingConfirm?.confirmText}
                variant="danger"
                onConfirm={pendingConfirm?.onConfirm}
                onCancel={() => setPendingConfirm(null)}
            />
        </>
    );
}

function Section({ title, icon, children, muted, grow }) {
    return (
        <div style={{
            padding: '1rem 1.25rem',
            borderBottom: '1px solid rgba(255,255,255,0.04)',
            ...(grow ? { flex: 1, display: 'flex', flexDirection: 'column' } : {}),
        }}>
            <div style={{
                display: 'flex', alignItems: 'center', gap: '0.4rem',
                fontSize: '0.68rem', fontFamily: 'monospace', textTransform: 'uppercase',
                letterSpacing: '0.1em', color: muted ? '#334155' : '#475569',
                marginBottom: '0.75rem',
            }}>
                {icon && <span style={{ color: muted ? '#334155' : TEAL }}>{icon}</span>}
                {title}
            </div>
            {children}
        </div>
    );
}

function MetricRow({ metric, resolved, onNavigate }) {
    const color = resolved ? '#475569' : categoryColor(metric.category);
    const extra = metric.extra || {};

    const ivantiId = (!resolved && metric.metric_id?.startsWith('2.3'))
        ? (extra['Ivanti_Vulnerability_ID'] || null)
        : null;

    // Surface the most useful extra fields per metric type
    const highlights = [];
    if (extra['CVEs_Associated'])     highlights.push({ label: 'CVEs',    value: extra['CVEs_Associated'] });
    if (extra['SLA_Status'])          highlights.push({ label: 'SLA',     value: extra['SLA_Status'] });
    if (extra['Due_Date'])            highlights.push({ label: 'Due',     value: extra['Due_Date'] });
    if (extra['Normalized - Operating System'])
        highlights.push({ label: 'OS', value: `${extra['Normalized - Operating System']} ${extra['Normalized - Operating System Version'] || ''}`.trim() });
    if (extra['EOS - End of Service Life'])
        highlights.push({ label: 'EoL', value: extra['EOS - End of Service Life'] });
    if (extra['Splunk - Last Seen'])  highlights.push({ label: 'Splunk', value: extra['Splunk - Last Seen'] });
    if (extra['MFA - Software'])      highlights.push({ label: 'MFA SW', value: extra['MFA - Software'] });

    return (
        <div style={{
            marginBottom: '0.625rem', padding: '0.625rem 0.75rem',
            background: resolved ? 'transparent' : `${color}08`,
            border: `1px solid ${color}25`,
            borderRadius: '0.375rem',
            opacity: resolved ? 0.5 : 1,
        }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: highlights.length ? '0.4rem' : 0 }}>
                <MetricChip metricId={metric.metric_id} category={metric.category} status={metric.status} />
                {resolved && <span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace' }}>resolved {metric.resolved_on || ''}</span>}
            </div>
            {metric.metric_desc && (
                <div style={{ fontSize: '0.72rem', color: '#475569', marginBottom: (highlights.length || ivantiId) ? '0.4rem' : 0, lineHeight: 1.4 }}>
                    {metric.metric_desc.length > 100 ? metric.metric_desc.slice(0, 100) + '…' : metric.metric_desc}
                </div>
            )}
            {ivantiId && (
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: highlights.length ? '0.25rem' : 0 }}>
                    <div style={{ display: 'flex', gap: '0.4rem', alignItems: 'center', minWidth: 0 }}>
                        <span style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace', flexShrink: 0 }}>Ivanti ID</span>
                        <span style={{ fontSize: '0.68rem', color: '#94A3B8', fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ivantiId}</span>
                    </div>
                    {onNavigate && (
                        <button
                            onClick={e => { e.stopPropagation(); onNavigate('triage'); }}
                            style={{
                                flexShrink: 0, marginLeft: '0.5rem',
                                background: 'rgba(14,165,233,0.1)',
                                border: '1px solid rgba(14,165,233,0.4)',
                                borderRadius: '0.25rem',
                                color: '#0EA5E9',
                                fontSize: '0.65rem', fontFamily: 'monospace',
                                padding: '0.2rem 0.5rem',
                                cursor: 'pointer', whiteSpace: 'nowrap',
                                transition: 'all 0.15s',
                            }}
                            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.18)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.7)'; }}
                            onMouseLeave={e => { e.currentTarget.style.background = 'rgba(14,165,233,0.1)'; e.currentTarget.style.borderColor = 'rgba(14,165,233,0.4)'; }}
                        >
                            View in Triage →
                        </button>
                    )}
                </div>
            )}
            {highlights.map(h => (
                <div key={h.label} style={{ display: 'flex', gap: '0.4rem', marginTop: '0.25rem' }}>
                    <span style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace', minWidth: '48px' }}>{h.label}</span>
                    <span style={{ fontSize: '0.68rem', color: '#94A3B8', fontFamily: 'monospace', wordBreak: 'break-all' }}>
                        {String(h.value).length > 80 ? String(h.value).slice(0, 80) + '…' : h.value}
                    </span>
                </div>
            ))}
        </div>
    );
}