cve-dashboard/frontend/src/components/CardDetailModal.js

/**
 * CardDetailModal — Full CARD ownership detail view
 *
 * Opens from the CARD tooltip "Actions" button on the reporting page.
 * Shows the full ownership record and allows confirm/decline/redirect
 * directly against the CARD API (no queue item required).
 */

import React, { useState, useEffect, useCallback } from 'react';
import { X, Loader, AlertCircle, CheckCircle, XCircle, ArrowRightLeft, ExternalLink } from 'lucide-react';

// ⚠️ CONVENTION: Prefer using REACT_APP_API_BASE without an absolute URL fallback — other components use relative paths via the env var (e.g. '' default) rather than hardcoding http://localhost:3001/api
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';

const OVERLAY = {
    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)', backdropFilter: 'blur(4px)',
    zIndex: 10200, display: 'flex', alignItems: 'center', justifyContent: 'center',
};
const MODAL = {
    background: 'linear-gradient(135deg, #1E293B, #0F172A)',
    borderRadius: '1rem', border: '1px solid rgba(124, 58, 237, 0.25)',
    width: '90vw', maxWidth: '580px', maxHeight: '85vh', overflow: 'auto',
    padding: '1.5rem', position: 'relative',
};
const SECTION = {
    background: 'rgba(15, 23, 42, 0.6)', border: '1px solid rgba(51, 65, 85, 0.5)',
    borderRadius: '0.5rem', padding: '0.75rem', marginBottom: '0.75rem',
};
const LABEL = { fontSize: '0.6rem', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.2rem' };
const VALUE = { fontSize: '0.75rem', color: '#E2E8F0', fontFamily: "'JetBrains Mono', monospace" };
const TEAM_BADGE = (color) => ({
    display: 'inline-block', padding: '0.15rem 0.5rem', borderRadius: '0.25rem',
    fontSize: '0.7rem', fontWeight: '600', fontFamily: 'monospace',
    background: `${color}15`, border: `1px solid ${color}40`, color,
});
const INPUT = {
    width: '100%', boxSizing: 'border-box', background: 'rgba(15, 23, 42, 0.8)',
    border: '1px solid rgba(51, 65, 85, 0.6)', borderRadius: '0.375rem',
    color: '#E2E8F0', padding: '0.5rem 0.75rem', fontSize: '0.75rem',
    fontFamily: "'JetBrains Mono', monospace", outline: 'none',
};
const BTN = {
    padding: '0.5rem 1.25rem', borderRadius: '0.375rem', border: 'none',
    fontSize: '0.75rem', fontWeight: '600', cursor: 'pointer', transition: 'all 0.12s',
};

export default function CardDetailModal({ isOpen, onClose, ip, ownerData: initialOwnerData, cardTeams }) {
    const [ownerData, setOwnerData] = useState(initialOwnerData || null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [action, setAction] = useState('confirm');
    const [teamName, setTeamName] = useState('');
    const [fromTeam, setFromTeam] = useState('');
    const [toTeam, setToTeam] = useState('');
    const [comment, setComment] = useState('');
    const [executing, setExecuting] = useState(false);
    const [execError, setExecError] = useState(null);
    const [execSuccess, setExecSuccess] = useState(null);

    // Fetch owner data if not provided or refresh on open
    useEffect(() => {
        if (!isOpen || !ip) return;

        // If we already have data from the tooltip cache, use it
        if (initialOwnerData && !initialOwnerData.notFound && !initialOwnerData.error) {
            setOwnerData(initialOwnerData);
            // Pre-fill team fields
            if (initialOwnerData.confirmed) {
                setTeamName(initialOwnerData.confirmed.name || '');
                setFromTeam(initialOwnerData.confirmed.name || '');
            } else if (initialOwnerData.unconfirmed) {
                setTeamName(initialOwnerData.unconfirmed.name || '');
                setFromTeam(initialOwnerData.unconfirmed.name || '');
            }
            return;
        }

        // Fetch fresh
        setLoading(true);
        setError(null);
        fetch(`${API_BASE}/card/owner-lookup/${encodeURIComponent(ip)}`, { credentials: 'include' })
            .then(r => {
                if (!r.ok) return r.json().then(d => { throw new Error(d.error || `HTTP ${r.status}`); });
                return r.json();
            })
            .then(data => {
                setOwnerData(data);
                if (data.confirmed) {
                    setTeamName(data.confirmed.name || '');
                    setFromTeam(data.confirmed.name || '');
                } else if (data.unconfirmed) {
                    setTeamName(data.unconfirmed.name || '');
                    setFromTeam(data.unconfirmed.name || '');
                }
                setLoading(false);
            })
            .catch(err => {
                setError(err.message);
                setLoading(false);
            });
    }, [isOpen, ip, initialOwnerData]);

    // Reset state on close
    useEffect(() => {
        if (!isOpen) {
            setExecError(null);
            setExecSuccess(null);
            setComment('');
        }
    }, [isOpen]);

    const handleExecute = useCallback(async () => {
        if (!ownerData?.asset_id) return;
        setExecuting(true);
        setExecError(null);
        setExecSuccess(null);

        try {
            let url, body;
            const assetId = ownerData.asset_id;

            if (action === 'confirm') {
                url = `${API_BASE}/card/owner/${encodeURIComponent(assetId)}/confirm`;
                body = { teamName: teamName.trim(), comment: comment.trim() };
            } else if (action === 'decline') {
                url = `${API_BASE}/card/owner/${encodeURIComponent(assetId)}/decline`;
                body = { teamName: teamName.trim(), comment: comment.trim() };
            } else if (action === 'redirect') {
                url = `${API_BASE}/card/owner/${encodeURIComponent(assetId)}/redirect`;
                body = { fromTeam: fromTeam.trim(), toTeam: toTeam.trim() };
            }

            const res = await fetch(url, {
                method: 'POST',
                credentials: 'include',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body),
            });

            const data = await res.json();
            if (!res.ok) {
                setExecError(data.error || data.message || `${action} failed.`);
            } else {
                setExecSuccess(`${action.charAt(0).toUpperCase() + action.slice(1)} successful.`);
            }
        } catch (err) {
            setExecError(err.message || 'Network error.');
        } finally {
            setExecuting(false);
        }
    }, [ownerData, action, teamName, fromTeam, toTeam, comment]);

    if (!isOpen) return null;

    const canExecute = () => {
        if (action === 'confirm' || action === 'decline') return teamName.trim().length > 0;
        if (action === 'redirect') return fromTeam.trim().length > 0 && toTeam.trim().length > 0;
        return false;
    };

    return (
        <div style={OVERLAY} onClick={onClose}>
            <div style={MODAL} onClick={e => e.stopPropagation()}>
                {/* Header */}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
                    <div>
                        <h3 style={{ margin: 0, color: '#F8FAFC', fontSize: '0.95rem' }}>CARD Asset Details</h3>
                        <div style={{ fontSize: '0.72rem', color: '#0EA5E9', fontFamily: "'JetBrains Mono', monospace", marginTop: '0.2rem' }}>
                            {ip}
                        </div>
                        {ownerData?.asset_id && (
                            <div style={{ fontSize: '0.65rem', color: '#7C3AED', fontFamily: 'monospace', marginTop: '0.1rem' }}>
                                {ownerData.asset_id}
                            </div>
                        )}
                    </div>
                    <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#64748B', cursor: 'pointer' }}>
                        <X style={{ width: '18px', height: '18px' }} />
                    </button>
                </div>

                {/* Loading */}
                {loading && (
                    <div style={{ textAlign: 'center', padding: '2rem' }}>
                        <Loader style={{ width: '20px', height: '20px', color: '#7C3AED', animation: 'spin 1s linear infinite' }} />
                        <div style={{ fontSize: '0.75rem', color: '#64748B', marginTop: '0.5rem' }}>Loading CARD data...</div>
                    </div>
                )}

                {/* Error */}
                {error && (
                    <div style={{ ...SECTION, borderColor: 'rgba(239, 68, 68, 0.4)' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                            <AlertCircle style={{ width: '14px', height: '14px', color: '#EF4444' }} />
                            <span style={{ fontSize: '0.75rem', color: '#FCA5A5' }}>{error}</span>
                        </div>
                    </div>
                )}

                {/* Owner data */}
                {ownerData && !loading && (
                    <>
                        {/* Ownership section */}
                        <div style={SECTION}>
                            <div style={LABEL}>Ownership</div>
                            <div style={{ display: 'grid', gap: '0.5rem', marginTop: '0.3rem' }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                                    <span style={{ fontSize: '0.65rem', color: '#64748B', width: '80px' }}>Confirmed:</span>
                                    {ownerData.confirmed ? (
                                        <>
                                            <span style={TEAM_BADGE('#10B981')}>{ownerData.confirmed.name}</span>
                                            <span style={{ fontSize: '0.6rem', color: '#64748B' }}>
                                                (score: {ownerData.confirmed.score}, {ownerData.confirmed.datasource || 'n/a'})
                                            </span>
                                        </>
                                    ) : (
                                        <span style={{ ...VALUE, color: '#475569' }}>—</span>
                                    )}
                                </div>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                                    <span style={{ fontSize: '0.65rem', color: '#64748B', width: '80px' }}>Unconfirmed:</span>
                                    {ownerData.unconfirmed ? (
                                        <>
                                            <span style={TEAM_BADGE('#F59E0B')}>{ownerData.unconfirmed.name}</span>
                                            <span style={{ fontSize: '0.6rem', color: '#64748B' }}>
                                                (score: {ownerData.unconfirmed.score})
                                            </span>
                                        </>
                                    ) : (
                                        <span style={{ ...VALUE, color: '#475569' }}>—</span>
                                    )}
                                </div>
                                {ownerData.candidate && ownerData.candidate.length > 0 && (
                                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }}>
                                        <span style={{ fontSize: '0.65rem', color: '#64748B', width: '80px', flexShrink: 0 }}>Candidates:</span>
                                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.3rem' }}>
                                            {ownerData.candidate.map((c, i) => (
                                                <span key={i} style={TEAM_BADGE('#94A3B8')}>{c.name} ({c.score})</span>
                                            ))}
                                        </div>
                                    </div>
                                )}
                                {ownerData.declined && ownerData.declined.length > 0 && (
                                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }}>
                                        <span style={{ fontSize: '0.65rem', color: '#64748B', width: '80px', flexShrink: 0 }}>Declined:</span>
                                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.3rem' }}>
                                            {ownerData.declined.map((d, i) => (
                                                <span key={i} style={TEAM_BADGE('#EF4444')}>{d.name}</span>
                                            ))}
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>

                        {/* Action section */}
                        <div style={{ ...SECTION, borderColor: 'rgba(124, 58, 237, 0.3)' }}>
                            <div style={LABEL}>Action</div>
                            <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.4rem', marginBottom: '0.75rem' }}>
                                {['confirm', 'decline', 'redirect'].map(a => (
                                    <button
                                        key={a}
                                        onClick={() => setAction(a)}
                                        style={{
                                            ...BTN,
                                            padding: '0.35rem 0.75rem',
                                            background: action === a ? (a === 'confirm' ? 'rgba(16,185,129,0.15)' : a === 'decline' ? 'rgba(239,68,68,0.15)' : 'rgba(14,165,233,0.15)') : 'transparent',
                                            border: `1px solid ${action === a ? (a === 'confirm' ? '#10B981' : a === 'decline' ? '#EF4444' : '#0EA5E9') : '#334155'}`,
                                            color: action === a ? (a === 'confirm' ? '#10B981' : a === 'decline' ? '#EF4444' : '#0EA5E9') : '#64748B',
                                        }}
                                    >
                                        {a === 'confirm' && <CheckCircle style={{ width: '12px', height: '12px', marginRight: '0.3rem', display: 'inline' }} />}
                                        {a === 'decline' && <XCircle style={{ width: '12px', height: '12px', marginRight: '0.3rem', display: 'inline' }} />}
                                        {a === 'redirect' && <ArrowRightLeft style={{ width: '12px', height: '12px', marginRight: '0.3rem', display: 'inline' }} />}
                                        {a.charAt(0).toUpperCase() + a.slice(1)}
                                    </button>
                                ))}
                            </div>

                            {/* Action-specific fields */}
                            {(action === 'confirm' || action === 'decline') && (
                                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                    <div>
                                        <label style={{ ...LABEL, display: 'block' }}>Team</label>
                                        <select style={INPUT} value={teamName} onChange={e => setTeamName(e.target.value)}>
                                            <option value="">Select team...</option>
                                            {ownerData.confirmed && <option value={ownerData.confirmed.name}>{ownerData.confirmed.name} (confirmed)</option>}
                                            {ownerData.unconfirmed && <option value={ownerData.unconfirmed.name}>{ownerData.unconfirmed.name} (unconfirmed)</option>}
                                            {ownerData.candidate && ownerData.candidate.filter(c => c.name !== 'CARD-UNKNOWN').map(c => (
                                                <option key={c.name} value={c.name}>{c.name} (candidate, score: {c.score})</option>
                                            ))}
                                            <option disabled>───────────</option>
                                            {cardTeams && cardTeams.filter(t => t !== ownerData.confirmed?.name && t !== ownerData.unconfirmed?.name).map(t => (
                                                <option key={t} value={t}>{t}</option>
                                            ))}
                                        </select>
                                    </div>
                                    <div>
                                        <label style={{ ...LABEL, display: 'block' }}>Comment (optional)</label>
                                        <input style={INPUT} value={comment} onChange={e => setComment(e.target.value)} placeholder="Optional comment..." />
                                    </div>
                                </div>
                            )}

                            {action === 'redirect' && (
                                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                    <div>
                                        <label style={{ ...LABEL, display: 'block' }}>From Team</label>
                                        <select style={INPUT} value={fromTeam} onChange={e => setFromTeam(e.target.value)}>
                                            <option value="">Select from team...</option>
                                            {ownerData.confirmed && <option value={ownerData.confirmed.name}>{ownerData.confirmed.name} (confirmed)</option>}
                                            {ownerData.unconfirmed && <option value={ownerData.unconfirmed.name}>{ownerData.unconfirmed.name} (unconfirmed)</option>}
                                            {ownerData.candidate && ownerData.candidate.filter(c => c.name !== 'CARD-UNKNOWN').map(c => (
                                                <option key={c.name} value={c.name}>{c.name} (candidate)</option>
                                            ))}
                                            {cardTeams && cardTeams.filter(t => t !== ownerData.confirmed?.name && t !== ownerData.unconfirmed?.name).map(t => (
                                                <option key={t} value={t}>{t}</option>
                                            ))}
                                        </select>
                                    </div>
                                    <div>
                                        <label style={{ ...LABEL, display: 'block' }}>To Team</label>
                                        <select style={INPUT} value={toTeam} onChange={e => setToTeam(e.target.value)}>
                                            <option value="">Select to team...</option>
                                            {ownerData.confirmed && <option value={ownerData.confirmed.name}>{ownerData.confirmed.name} (confirmed)</option>}
                                            {ownerData.unconfirmed && <option value={ownerData.unconfirmed.name}>{ownerData.unconfirmed.name} (unconfirmed)</option>}
                                            {ownerData.candidate && ownerData.candidate.filter(c => c.name !== 'CARD-UNKNOWN').map(c => (
                                                <option key={c.name} value={c.name}>{c.name} (candidate)</option>
                                            ))}
                                            {cardTeams && cardTeams.filter(t => t !== ownerData.confirmed?.name && t !== ownerData.unconfirmed?.name).map(t => (
                                                <option key={t} value={t}>{t}</option>
                                            ))}
                                        </select>
                                    </div>
                                </div>
                            )}
                        </div>

                        {/* Execution error */}
                        {execError && (
                            <div style={{ padding: '0.5rem 0.75rem', background: 'rgba(239, 68, 68, 0.1)', border: '1px solid rgba(239, 68, 68, 0.3)', borderRadius: '0.375rem', marginBottom: '0.75rem' }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                                    <AlertCircle style={{ width: '13px', height: '13px', color: '#EF4444', flexShrink: 0 }} />
                                    <span style={{ fontSize: '0.7rem', color: '#FCA5A5' }}>
                                        {execError.includes('update_token') ? 'Cannot action via API — this asset has no update token.' : execError}
                                    </span>
                                </div>
                                {execError.includes('update_token') && (
                                    <div style={{ marginTop: '0.4rem', paddingTop: '0.4rem', borderTop: '1px solid rgba(239, 68, 68, 0.2)' }}>
                                        <span style={{ fontSize: '0.65rem', color: '#94A3B8', display: 'block', marginBottom: '0.3rem' }}>
                                            Action this asset directly in CARD instead:
                                        </span>
                                        <button
                                            onClick={() => {
                                                const hostId = ownerData?.asset_id ? ownerData.asset_id.replace(/-[A-Z]+$/i, '') : ip;
                                                try {
                                                    const ta = document.createElement('textarea');
                                                    ta.value = String(hostId);
                                                    ta.style.position = 'fixed';
                                                    ta.style.opacity = '0';
                                                    document.body.appendChild(ta);
                                                    ta.select();
                                                    document.execCommand('copy');
                                                    document.body.removeChild(ta);
                                                } catch (_) { /* best effort */ }
                                                window.open('https://card.charter.com/ipn-search', '_blank');
                                            }}
                                            style={{
                                                display: 'inline-flex', alignItems: 'center', gap: '0.35rem',
                                                padding: '0.35rem 0.75rem',
                                                background: 'rgba(14, 165, 233, 0.15)',
                                                border: '1px solid rgba(14, 165, 233, 0.5)',
                                                borderRadius: '0.3rem',
                                                color: '#7DD3FC',
                                                fontSize: '0.7rem', fontWeight: '600', fontFamily: 'monospace',
                                                cursor: 'pointer',
                                                transition: 'all 0.12s',
                                            }}
                                            onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(14, 165, 233, 0.3)'; }}
                                            onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(14, 165, 233, 0.15)'; }}
                                        >
                                            <ExternalLink style={{ width: 12, height: 12 }} />
                                            Open in CARD (ID copied)
                                        </button>
                                    </div>
                                )}
                            </div>
                        )}

                        {/* Success */}
                        {execSuccess && (
                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 0.75rem', background: 'rgba(16, 185, 129, 0.1)', border: '1px solid rgba(16, 185, 129, 0.3)', borderRadius: '0.375rem', marginBottom: '0.75rem' }}>
                                <CheckCircle style={{ width: '13px', height: '13px', color: '#10B981', flexShrink: 0 }} />
                                <span style={{ fontSize: '0.7rem', color: '#6EE7B7' }}>{execSuccess}</span>
                            </div>
                        )}

                        {/* Footer */}
                        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem', marginTop: '0.5rem' }}>
                            <button onClick={onClose} style={{ ...BTN, background: '#334155', color: '#E2E8F0' }}>Close</button>
                            <button
                                onClick={handleExecute}
                                disabled={!canExecute() || executing || !!execSuccess}
                                style={{
                                    ...BTN,
                                    background: canExecute() && !executing && !execSuccess ? '#7C3AED' : '#1E293B',
                                    color: canExecute() && !executing && !execSuccess ? '#fff' : '#475569',
                                    cursor: canExecute() && !executing && !execSuccess ? 'pointer' : 'not-allowed',
                                }}
                            >
                                {executing ? 'Executing...' : `Execute ${action.charAt(0).toUpperCase() + action.slice(1)}`}
                            </button>
                        </div>
                    </>
                )}
            </div>
        </div>
    );
}