import React, { useState, useEffect, useCallback } from 'react';
import { X, MessageSquare, Send, Loader, AlertCircle, Clock, Shield } from 'lucide-react';

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 }) {
    const [detail, setDetail]       = useState(null);
    const [loading, setLoading]     = useState(true);
    const [error, setError]         = useState(null);
    const [noteText, setNoteText]   = useState('');
    const [noteMetric, setNoteMetric] = useState('');
    const [submitting, setSubmitting] = useState(false);
    const [noteError, setNoteError] = useState(null);

    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 note metric to first active failing metric
            const firstActive = (data.metrics || []).find(m => m.status === 'active');
            if (firstActive) setNoteMetric(firstActive.metric_id);
        } catch (err) {
            setError(err.message);
        } finally {
            setLoading(false);
        }
    }, [hostname]);

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

    const handleAddNote = async () => {
        if (!noteText.trim() || !noteMetric) 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_id: noteMetric, 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 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} />
                                ))}
                            </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>
                        )}

                        {/* 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>
                            )}
                            {detail.notes.map(n => (
                                <div key={n.id} 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: 'center', marginBottom: '0.3rem' }}>
                                        <MetricChip metricId={n.metric_id} category={activeMetrics.find(m => m.metric_id === n.metric_id)?.category || ''} />
                                        <span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace' }}>
                                            {n.created_by && `${n.created_by} · `}{n.created_at?.slice(0, 10)}
                                        </span>
                                    </div>
                                    <div style={{ fontSize: '0.8rem', color: '#CBD5E1', lineHeight: 1.5 }}>{n.note}</div>
                                </div>
                            ))}

                            {/* Add note */}
                            <div style={{ marginTop: 'auto', paddingTop: '0.75rem', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
                                {activeMetrics.length > 1 && (
                                    <select
                                        value={noteMetric}
                                        onChange={e => setNoteMetric(e.target.value)}
                                        style={{
                                            width: '100%', marginBottom: '0.5rem',
                                            background: 'rgba(15,23,42,0.8)', border: '1px solid rgba(20,184,166,0.25)',
                                            borderRadius: '0.25rem', color: '#CBD5E1',
                                            padding: '0.4rem 0.5rem', fontSize: '0.75rem', fontFamily: 'monospace',
                                        }}>
                                        {activeMetrics.map(m => (
                                            <option key={m.metric_id} value={m.metric_id}>{m.metric_id} — {m.category}</option>
                                        ))}
                                    </select>
                                )}
                                <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() || submitting}
                                        style={{
                                            padding: '0.5rem 0.625rem', flexShrink: 0,
                                            background: noteText.trim() ? `${TEAL}20` : 'transparent',
                                            border: `1px solid ${noteText.trim() ? TEAL : 'rgba(20,184,166,0.2)'}`,
                                            borderRadius: '0.375rem', color: noteText.trim() ? TEAL : '#334155',
                                            cursor: noteText.trim() ? '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>
        </>
    );
}

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 }) {
    const color = resolved ? '#475569' : categoryColor(metric.category);
    const extra = metric.extra || {};

    // 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 ? '0.4rem' : 0, lineHeight: 1.4 }}>
                    {metric.metric_desc.length > 100 ? metric.metric_desc.slice(0, 100) + '…' : metric.metric_desc}
                </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>
    );
}