import React, { useState, useCallback } from 'react';
import * as XLSX from 'xlsx';
import { Download, Loader, AlertCircle, BarChart2, FileText, Shield, Tag, CheckCircle, X } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';
import AtlasIcon from '../AtlasIcon';

const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
const EXC_PATTERN = /EXC-\d+/i;

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------
function classifyFinding(f) {
    if (f.workflow != null) return 'fp';
    if (EXC_PATTERN.test(f.note || '')) return 'archer';
    return 'pending';
}

const dateStr = () => new Date().toISOString().slice(0, 10);

function triggerDownload(blob, filename) {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

function autoFit(ws, rows) {
    if (!rows[0]) return;
    ws['!cols'] = rows[0].map((_, ci) => ({
        wch: Math.min(60, Math.max(10, ...rows.map(r => String(r[ci] ?? '').length)))
    }));
}

function toXLSX(rows, sheetName, filename) {
    const ws = XLSX.utils.aoa_to_sheet(rows);
    autoFit(ws, rows);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, sheetName);
    XLSX.writeFile(wb, filename);
}

function toMultiXLSX(sheets, filename) {
    const wb = XLSX.utils.book_new();
    sheets.forEach(({ name, rows }) => {
        const ws = XLSX.utils.aoa_to_sheet(rows);
        autoFit(ws, rows);
        XLSX.utils.book_append_sheet(wb, ws, String(name || 'Unknown').slice(0, 31));
    });
    XLSX.writeFile(wb, filename);
}

function toCSV(rows, filename) {
    const csv = rows.map(row =>
        row.map(cell => {
            const s = String(cell ?? '');
            return (s.includes(',') || s.includes('"') || s.includes('\n'))
                ? `"${s.replace(/"/g, '""')}"` : s;
        }).join(',')
    ).join('\r\n');
    triggerDownload(new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' }), filename);
}

// ---------------------------------------------------------------------------
// Finding column definitions
// ---------------------------------------------------------------------------
const FINDING_HEADERS = [
    'Finding ID', 'Title', 'Severity Score', 'Severity Group',
    'Host', 'IP Address', 'DNS', 'Due Date', 'SLA Status',
    'Business Unit', 'FP# ID', 'FP# State', 'Last Found', 'CVEs', 'Notes',
];

function findingRow(f) {
    return [
        f.id,
        f.title,
        f.severity != null ? Number(f.severity).toFixed(2) : '',
        f.vrrGroup ?? '',
        f.overrides?.hostName ?? f.hostName ?? '',
        f.ipAddress ?? '',
        f.overrides?.dns ?? f.dns ?? '',
        f.dueDate ?? '',
        f.slaStatus ?? '',
        f.buOwnership ?? '',
        f.workflow?.id ?? '',
        f.workflow?.state ?? '',
        f.lastFoundOn ?? '',
        (f.cves || []).join(', '),
        f.note ?? '',
    ];
}

// ---------------------------------------------------------------------------
// API fetchers
// ---------------------------------------------------------------------------
async function fetchFindings(teamsParam) {
    const url = teamsParam
        ? `${API_BASE}/ivanti/findings?teams=${encodeURIComponent(teamsParam)}`
        : `${API_BASE}/ivanti/findings`;
    const res = await fetch(url, { credentials: 'include' });
    if (!res.ok) throw new Error(`Ivanti findings returned ${res.status}`);
    const data = await res.json();
    return data.findings || [];
}

async function fetchCVEs(status) {
    const url = status ? `${API_BASE}/cves?status=${encodeURIComponent(status)}` : `${API_BASE}/cves`;
    const res = await fetch(url, { credentials: 'include' });
    if (!res.ok) throw new Error(`CVE list returned ${res.status}`);
    return res.json();
}

async function fetchArcher() {
    const res = await fetch(`${API_BASE}/archer-tickets`, { credentials: 'include' });
    if (!res.ok) throw new Error(`Archer tickets returned ${res.status}`);
    return res.json();
}

async function fetchCompliance() {
    const res = await fetch(`${API_BASE}/cves/compliance`, { credentials: 'include' });
    if (!res.ok) throw new Error(`Compliance data returned ${res.status}`);
    return res.json();
}

async function fetchAtlasStatus() {
    const res = await fetch(`${API_BASE}/atlas/status`, { credentials: 'include' });
    if (!res.ok) throw new Error(`Atlas status returned ${res.status}`);
    return res.json();
}

async function fetchAtlasAndFindings(teamsParam) {
    const [atlasRows, findings] = await Promise.all([fetchAtlasStatus(), fetchFindings(teamsParam)]);
    // Build a lookup from hostId → finding details (hostname, IP, BU, etc.)
    const hostMap = {};
    findings.forEach(f => {
        if (f.hostId && !hostMap[f.hostId]) {
            hostMap[f.hostId] = {
                hostName: f.overrides?.hostName ?? f.hostName ?? '',
                ipAddress: f.ipAddress ?? '',
                dns: f.overrides?.dns ?? f.dns ?? '',
                buOwnership: f.buOwnership ?? '',
                findingCount: 0,
            };
        }
        if (f.hostId && hostMap[f.hostId]) hostMap[f.hostId].findingCount++;
    });
    return { atlasRows, hostMap };
}

// ---------------------------------------------------------------------------
// Sub-components
// ---------------------------------------------------------------------------
function ExportCard({ color, colorRgb, icon: Icon, title, description, children }) {
    return (
        <div style={{
            background: 'linear-gradient(135deg, rgba(15,26,46,0.95) 0%, rgba(10,22,40,0.9) 100%)',
            border: `1px solid rgba(${colorRgb},0.2)`,
            borderLeft: `3px solid ${color}`,
            borderRadius: '0.5rem',
            padding: '1.5rem',
            boxShadow: '0 4px 16px rgba(0,0,0,0.4)',
            display: 'flex',
            flexDirection: 'column',
            gap: '1rem',
        }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem' }}>
                <Icon style={{ width: '18px', height: '18px', color, flexShrink: 0 }} />
                <h3 style={{
                    fontFamily: 'monospace', fontSize: '0.9rem', fontWeight: '600',
                    color, textTransform: 'uppercase', letterSpacing: '0.1em',
                    textShadow: `0 0 12px rgba(${colorRgb},0.4)`, margin: 0,
                }}>
                    {title}
                </h3>
            </div>
            <p style={{ fontFamily: 'monospace', fontSize: '0.72rem', color: '#475569', margin: 0, lineHeight: 1.6 }}>
                {description}
            </p>
            <div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: '1rem' }}>
                {children}
            </div>
        </div>
    );
}

function ExportBtn({ label, exportKey, loading, color, colorRgb, onClick, disabled }) {
    const isLoading = loading === exportKey;
    return (
        <button
            onClick={onClick}
            disabled={!!loading || disabled}
            style={{
                display: 'flex', alignItems: 'center', gap: '0.375rem',
                padding: '0.45rem 0.875rem',
                background: `rgba(${colorRgb},0.08)`,
                border: `1px solid rgba(${colorRgb},0.25)`,
                borderRadius: '0.375rem',
                color: isLoading ? '#64748B' : color,
                cursor: (!!loading || disabled) ? 'not-allowed' : 'pointer',
                opacity: (!!loading && !isLoading) ? 0.45 : 1,
                fontFamily: 'monospace', fontSize: '0.72rem', fontWeight: '600',
                letterSpacing: '0.05em',
                transition: 'opacity 0.15s, color 0.15s',
                whiteSpace: 'nowrap',
            }}
        >
            {isLoading
                ? <Loader style={{ width: '12px', height: '12px', animation: 'spin 1s linear infinite', flexShrink: 0 }} />
                : <Download style={{ width: '12px', height: '12px', flexShrink: 0 }} />
            }
            {label}
        </button>
    );
}

function Toggle({ label, checked, onChange, color, colorRgb }) {
    return (
        <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', userSelect: 'none' }}>
            <div
                onClick={() => onChange(!checked)}
                style={{
                    width: '32px', height: '18px', borderRadius: '9px',
                    background: checked ? color : 'rgba(255,255,255,0.1)',
                    border: `1px solid rgba(${colorRgb},0.4)`,
                    position: 'relative', transition: 'background 0.2s',
                    cursor: 'pointer', flexShrink: 0,
                }}
            >
                <div style={{
                    position: 'absolute', top: '2px',
                    left: checked ? '14px' : '2px',
                    width: '12px', height: '12px', borderRadius: '50%',
                    background: '#E2E8F0',
                    transition: 'left 0.2s',
                }} />
            </div>
            <span style={{ fontFamily: 'monospace', fontSize: '0.7rem', color: '#64748B' }}>{label}</span>
        </label>
    );
}

// ---------------------------------------------------------------------------
// Main page
// ---------------------------------------------------------------------------
export default function ExportsPage() {
    const { canExport, getActiveTeamsParam } = useAuth();
    const teamsParam = getActiveTeamsParam();
    const [loading, setLoading]         = useState(null);
    const [error, setError]             = useState(null);
    const [cveStatus, setCveStatus]     = useState('');
    const [missingOnly, setMissingOnly] = useState(false);

    const run = useCallback(async (key, fn) => {
        setLoading(key);
        setError(null);
        try {
            await fn();
        } catch (e) {
            console.error('[Export]', e);
            setError(e.message || 'Export failed — check console for details');
        } finally {
            setLoading(null);
        }
    }, []);

    // ---- Card 1: Ivanti Findings ----

    const exportFullFindings = () => run('ivanti-full', async () => {
        const findings = await fetchFindings(teamsParam);
        const scopeLabel = teamsParam || 'ALL';
        toXLSX(
            [FINDING_HEADERS, ...findings.map(findingRow)],
            'All Findings',
            `findings-full-${scopeLabel}-${dateStr()}.xlsx`,
        );
    });

    const exportPending = () => run('ivanti-pending', async () => {
        const findings = await fetchFindings(teamsParam);
        const scopeLabel = teamsParam || 'ALL';
        const rows = findings.filter(f => classifyFinding(f) === 'pending').map(findingRow);
        toXLSX([FINDING_HEADERS, ...rows], 'Pending Action', `findings-pending-${scopeLabel}-${dateStr()}.xlsx`);
    });

    const exportOverdue = () => run('ivanti-overdue', async () => {
        const findings = await fetchFindings(teamsParam);
        const scopeLabel = teamsParam || 'ALL';
        const today = dateStr();
        const rows = findings.filter(f => {
            if (!f.dueDate && !(f.slaStatus || '').toLowerCase().includes('overdue')) return false;
            return f.dueDate < today || (f.slaStatus || '').toUpperCase() === 'OVERDUE';
        }).map(findingRow);
        toXLSX([FINDING_HEADERS, ...rows], 'Overdue', `findings-overdue-${scopeLabel}-${dateStr()}.xlsx`);
    });

    const exportByBU = () => run('ivanti-bu', async () => {
        const findings = await fetchFindings(teamsParam);
        const groups = {};
        findings.forEach(f => {
            const bu = f.buOwnership || 'Unknown';
            if (!groups[bu]) groups[bu] = [];
            groups[bu].push(f);
        });
        const sheets = Object.entries(groups)
            .sort(([a], [b]) => a.localeCompare(b))
            .map(([name, rows]) => ({ name, rows: [FINDING_HEADERS, ...rows.map(findingRow)] }));
        if (sheets.length === 0) sheets.push({ name: 'No Data', rows: [FINDING_HEADERS] });
        toMultiXLSX(sheets, `findings-by-bu-${dateStr()}.xlsx`);
    });

    // ---- Card 2: FP Workflow Summary ----

    const exportFPSummary = () => run('fp-summary', async () => {
        const findings = await fetchFindings(teamsParam);
        const fpMap = {};
        findings.forEach(f => {
            if (!f.workflow?.id) return;
            const id = f.workflow.id;
            if (!fpMap[id]) fpMap[id] = { id, state: f.workflow.state || '', count: 0, hosts: new Set(), bus: new Set(), cves: new Set() };
            fpMap[id].count++;
            const host = f.overrides?.hostName ?? f.hostName;
            if (host) fpMap[id].hosts.add(host);
            if (f.buOwnership) fpMap[id].bus.add(f.buOwnership);
            (f.cves || []).forEach(c => fpMap[id].cves.add(c));
        });
        const headers = ['FP# ID', 'State', 'Finding Count', 'Hosts', 'Business Units', 'CVEs'];
        const rows = Object.values(fpMap)
            .sort((a, b) => a.id.localeCompare(b.id))
            .map(e => [e.id, e.state, e.count, [...e.hosts].join(', '), [...e.bus].join(', '), [...e.cves].join(', ')]);
        toXLSX([headers, ...rows], 'FP Workflows', `fp-workflow-summary-${dateStr()}.xlsx`);
    });

    // ---- Card 3: CVE Database ----

    const exportCVEs = (fmt) => run(`cves-${fmt}`, async () => {
        const data = await fetchCVEs(cveStatus);
        const headers = ['CVE ID', 'Vendor', 'Severity', 'Status', 'Published Date', 'Description', 'Documents'];
        const rows = data.map(c => [c.cve_id, c.vendor, c.severity, c.status, c.published_date ?? '', c.description ?? '', c.document_count ?? 0]);
        if (fmt === 'csv') {
            toCSV([headers, ...rows], `cve-database-${dateStr()}.csv`);
        } else {
            toXLSX([headers, ...rows], 'CVEs', `cve-database-${dateStr()}.xlsx`);
        }
    });

    // ---- Card 4: Archer Tickets ----

    const exportArcher = () => run('archer', async () => {
        const data = await fetchArcher();
        const headers = ['EXC Number', 'Status', 'CVE ID', 'Vendor', 'Archer URL', 'Created'];
        const rows = data.map(t => [t.exc_number, t.status, t.cve_id ?? '', t.vendor ?? '', t.archer_url ?? '', t.created_at ?? '']);
        toXLSX([headers, ...rows], 'Archer Tickets', `archer-tickets-${dateStr()}.xlsx`);
    });

    // ---- Card 5: Compliance Report ----

    const exportCompliance = () => run('compliance', async () => {
        const data = await fetchCompliance();
        const filtered = missingOnly ? data.filter(r => r.compliance_status !== 'Complete') : data;
        const headers = ['CVE ID', 'Vendor', 'Severity', 'Status', 'Total Docs', 'Advisory Docs', 'Email Docs', 'Screenshot Docs', 'Compliance Status'];
        const rows = filtered.map(r => [r.cve_id, r.vendor, r.severity, r.status, r.total_documents, r.advisory_count, r.email_count, r.screenshot_count, r.compliance_status]);
        toXLSX([headers, ...rows], 'Compliance', `compliance-report-${dateStr()}.xlsx`);
    });

    // ---- Card 6: Atlas Action Plans ----

    const ATLAS_HEADERS = ['Host ID', 'Hostname', 'IP Address', 'Business Unit', 'Open Findings', 'Active Plans', 'Plan Type', 'Commit Date', 'Status', 'Qualys ID', 'Findings ID', 'VNR', 'EXC', 'Last Synced'];

    function atlasRow(atlasEntry, hostInfo) {
        const plans = JSON.parse(atlasEntry.plans_json || '[]');
        const activePlans = plans.filter(p => p.status === 'active');
        const h = hostInfo || {};
        if (activePlans.length === 0) {
            return [[
                atlasEntry.host_id, h.hostName || '', h.ipAddress || '', h.buOwnership || '',
                h.findingCount || '', 0, '', '', 'No Plan', '', '', '', '', atlasEntry.synced_at || '',
            ]];
        }
        return activePlans.map(p => [
            atlasEntry.host_id, h.hostName || '', h.ipAddress || '', h.buOwnership || '',
            h.findingCount || '', activePlans.length,
            (p.plan_type || '').replace(/_/g, ' '), p.commit_date || '', p.status || '',
            p.qualys_id || '', p.active_host_findings_id || '',
            p.jira_vnr || '', p.archer_exc || '', atlasEntry.synced_at || '',
        ]);
    }

    const exportAtlasStatus = () => run('atlas-status', async () => {
        const { atlasRows, hostMap } = await fetchAtlasAndFindings(teamsParam);
        const rows = atlasRows.flatMap(a => atlasRow(a, hostMap[a.host_id]));
        toXLSX([ATLAS_HEADERS, ...rows], 'Atlas Status', `atlas-action-plans-${dateStr()}.xlsx`);
    });

    const exportAtlasGaps = () => run('atlas-gaps', async () => {
        const { atlasRows, hostMap } = await fetchAtlasAndFindings(teamsParam);
        const gaps = atlasRows.filter(a => !a.has_action_plan);
        const rows = gaps.flatMap(a => atlasRow(a, hostMap[a.host_id]));
        toXLSX([ATLAS_HEADERS, ...rows], 'Coverage Gaps', `atlas-coverage-gaps-${dateStr()}.xlsx`);
    });

    const exportAtlasFull = () => run('atlas-full', async () => {
        const { atlasRows, hostMap } = await fetchAtlasAndFindings(teamsParam);
        const withPlans = atlasRows.filter(a => a.has_action_plan);
        const withoutPlans = atlasRows.filter(a => !a.has_action_plan);
        const sheets = [
            { name: 'Active Plans', rows: [ATLAS_HEADERS, ...withPlans.flatMap(a => atlasRow(a, hostMap[a.host_id]))] },
            { name: 'No Plan', rows: [ATLAS_HEADERS, ...withoutPlans.flatMap(a => atlasRow(a, hostMap[a.host_id]))] },
        ];
        // Add history sheet with inactive plans
        const historyHeaders = ['Host ID', 'Hostname', 'Plan Type', 'Commit Date', 'Status', 'Qualys ID', 'Findings ID', 'VNR', 'EXC', 'Created'];
        const historyRows = [];
        atlasRows.forEach(a => {
            const plans = JSON.parse(a.plans_json || '[]');
            const inactive = plans.filter(p => p.status !== 'active');
            const h = hostMap[a.host_id] || {};
            inactive.forEach(p => {
                historyRows.push([
                    a.host_id, h.hostName || '',
                    (p.plan_type || '').replace(/_/g, ' '), p.commit_date || '', p.status || '',
                    p.qualys_id || '', p.active_host_findings_id || '',
                    p.jira_vnr || '', p.archer_exc || '', p.created_at ? p.created_at.split('T')[0] : '',
                ]);
            });
        });
        sheets.push({ name: 'History', rows: [historyHeaders, ...historyRows] });
        toMultiXLSX(sheets, `atlas-full-report-${dateStr()}.xlsx`);
    });

    // ---- Render ----

    if (!canExport()) {
        return (
            <div style={{ textAlign: 'center', padding: '4rem 1rem', color: '#94A3B8' }}>
                <Shield style={{ width: '48px', height: '48px', margin: '0 auto 1rem', opacity: 0.5 }} />
                <p style={{ fontFamily: 'monospace', fontSize: '0.9rem' }}>You do not have permission to export data.</p>
            </div>
        );
    }

    return (
        <div style={{ padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>

            {/* Page header */}
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem' }}>
                <Download style={{ width: '20px', height: '20px', color: '#8B5CF6' }} />
                <h2 style={{ fontFamily: 'monospace', fontSize: '1rem', fontWeight: '600', color: '#8B5CF6', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(139,92,246,0.4)', margin: 0 }}>
                    Exports
                </h2>
            </div>

            {/* Error banner */}
            {error && (
                <div style={{
                    display: 'flex', alignItems: 'center', gap: '0.625rem',
                    padding: '0.75rem 1rem',
                    background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.3)',
                    borderRadius: '0.375rem',
                }}>
                    <AlertCircle style={{ width: '14px', height: '14px', color: '#EF4444', flexShrink: 0 }} />
                    <span style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#EF4444', flex: 1 }}>{error}</span>
                    <button onClick={() => setError(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#EF4444', padding: 0 }}>
                        <X style={{ width: '14px', height: '14px' }} />
                    </button>
                </div>
            )}

            {/* Card grid */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(420px, 1fr))', gap: '1.5rem' }}>

                {/* ── Card 1: Ivanti Findings ── */}
                <ExportCard
                    color="#F59E0B" colorRgb="245,158,11"
                    icon={BarChart2}
                    title="Ivanti Host Findings"
                    description="Export host findings from the local cache. Four report types: full dump, findings with no action taken, overdue SLA, and a per-business-unit multi-sheet workbook."
                >
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
                        <ExportBtn label="Full Dump" exportKey="ivanti-full" loading={loading} color="#F59E0B" colorRgb="245,158,11" onClick={exportFullFindings} />
                        <ExportBtn label="Pending Action" exportKey="ivanti-pending" loading={loading} color="#F59E0B" colorRgb="245,158,11" onClick={exportPending} />
                        <ExportBtn label="Overdue SLA" exportKey="ivanti-overdue" loading={loading} color="#F59E0B" colorRgb="245,158,11" onClick={exportOverdue} />
                        <ExportBtn label="By Business Unit" exportKey="ivanti-bu" loading={loading} color="#F59E0B" colorRgb="245,158,11" onClick={exportByBU} />
                    </div>
                    <p style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#334155', margin: '0.75rem 0 0', lineHeight: 1.5 }}>
                        "By Business Unit" creates one sheet per BU in a single workbook.
                    </p>
                </ExportCard>

                {/* ── Card 2: FP Workflow Summary ── */}
                <ExportCard
                    color="#0EA5E9" colorRgb="14,165,233"
                    icon={FileText}
                    title="FP Workflow Summary"
                    description="One row per unique FP# ticket ID. Shows state, how many findings belong to that ticket, which hosts are affected, and which CVEs are involved. Use this for status meetings."
                >
                    <ExportBtn label="Export FP Summary (.xlsx)" exportKey="fp-summary" loading={loading} color="#0EA5E9" colorRgb="14,165,233" onClick={exportFPSummary} />
                </ExportCard>

                {/* ── Card 3: CVE Database ── */}
                <ExportCard
                    color="#22C55E" colorRgb="34,197,94"
                    icon={Shield}
                    title="CVE Database"
                    description="Export the full CVE registry. Optionally filter by status to produce a focused remediation backlog. Includes document count per entry."
                >
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                            <span style={{ fontFamily: 'monospace', fontSize: '0.68rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>Status</span>
                            <select
                                value={cveStatus}
                                onChange={e => setCveStatus(e.target.value)}
                                disabled={!!loading}
                                style={{
                                    background: 'rgba(34,197,94,0.06)', border: '1px solid rgba(34,197,94,0.2)',
                                    borderRadius: '0.25rem', color: '#CBD5E1', padding: '0.25rem 0.5rem',
                                    fontFamily: 'monospace', fontSize: '0.72rem', cursor: 'pointer', outline: 'none',
                                }}
                            >
                                <option value="">All Statuses</option>
                                <option value="Open">Open</option>
                                <option value="In Progress">In Progress</option>
                                <option value="Addressed">Addressed</option>
                                <option value="Resolved">Resolved</option>
                            </select>
                        </div>
                        <div style={{ display: 'flex', gap: '0.5rem' }}>
                            <ExportBtn label="Export CSV" exportKey="cves-csv" loading={loading} color="#22C55E" colorRgb="34,197,94" onClick={() => exportCVEs('csv')} />
                            <ExportBtn label="Export .xlsx" exportKey="cves-xlsx" loading={loading} color="#22C55E" colorRgb="34,197,94" onClick={() => exportCVEs('xlsx')} />
                        </div>
                    </div>
                </ExportCard>

                {/* ── Card 4: Archer Tickets ── */}
                <ExportCard
                    color="#F97316" colorRgb="249,115,22"
                    icon={Tag}
                    title="Archer Risk Acceptance Tickets"
                    description="Export all Archer EXC exception tickets with their linked CVE IDs, vendors, statuses, and Archer URLs. Useful for risk acceptance reporting and audits."
                >
                    <ExportBtn label="Export Archer Tickets (.xlsx)" exportKey="archer" loading={loading} color="#F97316" colorRgb="249,115,22" onClick={exportArcher} />
                </ExportCard>

                {/* ── Card 5: Compliance Report ── */}
                <ExportCard
                    color="#EF4444" colorRgb="239,68,68"
                    icon={CheckCircle}
                    title="Document Compliance Report"
                    description="Shows document coverage per CVE/vendor pair. A row is marked Complete when an advisory document has been uploaded; otherwise Missing Required Docs. Filter to missing-only to generate a gap list."
                >
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
                        <Toggle
                            label="Missing required docs only"
                            checked={missingOnly}
                            onChange={setMissingOnly}
                            color="#EF4444"
                            colorRgb="239,68,68"
                        />
                        <ExportBtn label="Export Compliance Report (.xlsx)" exportKey="compliance" loading={loading} color="#EF4444" colorRgb="239,68,68" onClick={exportCompliance} />
                    </div>
                </ExportCard>

                {/* ── Card 6: Atlas Action Plans ── */}
                <ExportCard
                    color="#A855F7" colorRgb="168,85,247"
                    icon={AtlasIcon}
                    title="Atlas Action Plans"
                    description="Export Atlas InfoSec action plan status for all synced hosts. Includes plan type, commit date, and coverage status. Three report types: full status, coverage gaps only, and a multi-sheet workbook with active plans, gaps, and plan history."
                >
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
                        <ExportBtn label="Full Status" exportKey="atlas-status" loading={loading} color="#A855F7" colorRgb="168,85,247" onClick={exportAtlasStatus} />
                        <ExportBtn label="Coverage Gaps" exportKey="atlas-gaps" loading={loading} color="#A855F7" colorRgb="168,85,247" onClick={exportAtlasGaps} />
                    </div>
                    <div style={{ marginTop: '0.5rem' }}>
                        <ExportBtn label="Full Report (multi-sheet)" exportKey="atlas-full" loading={loading} color="#A855F7" colorRgb="168,85,247" onClick={exportAtlasFull} />
                    </div>
                    <p style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#334155', margin: '0.75rem 0 0', lineHeight: 1.5 }}>
                        "Full Report" creates three sheets: Active Plans, No Plan, and History (overridden plans).
                    </p>
                </ExportCard>

            </div>
        </div>
    );
}