import React from 'react';
import { X } from 'lucide-react';

const TEAL = '#14B8A6';

const SECTION_FIELDS = [
    { key: 'asset_types', label: 'Asset Types' },
    { key: 'asset_types_in_scope', label: 'Asset Types In Scope' },
    { key: 'application_types_in_scope', label: 'Application Types In Scope' },
    { key: 'environment_in_scope', label: 'Environment In Scope' },
    { key: 'status_in_scope', label: 'Status In Scope' },
    { key: 'instance_types_in_scope', label: 'Instance Types In Scope' },
    { key: 'criticality_levels_in_scope', label: 'Criticality Levels In Scope' },
    { key: 'exclusions', label: 'Exclusions' },
    { key: 'special_conditions', label: 'Special Conditions' },
    { key: 'data_sources_required', label: 'Data Sources Required' },
    { key: 'business_justification', label: 'Business Justification' },
    { key: 'notes', label: 'Notes' },
];

export default function MetricInfoPanel({ metricId, definition, summaryEntries, onClose }) {
    const handleBackdropClick = (e) => {
        if (e.target === e.currentTarget) {
            onClose();
        }
    };

    const title = definition
        ? definition.metric_title
        : (summaryEntries && summaryEntries.length > 0 ? summaryEntries[0].description : metricId);

    return (
        <div
            onClick={handleBackdropClick}
            style={{
                position: 'fixed',
                inset: 0,
                zIndex: 60,
                background: 'rgba(10, 14, 39, 0.92)',
                backdropFilter: 'blur(8px)',
                display: 'flex',
                alignItems: 'flex-start',
                justifyContent: 'flex-end',
                padding: '0',
            }}
        >
            <div style={{
                width: '100%',
                maxWidth: '480px',
                height: '100vh',
                overflowY: 'auto',
                background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
                borderLeft: `1px solid ${TEAL}30`,
                boxShadow: '0 0 40px rgba(0,0,0,0.7)',
                padding: '1.75rem',
                position: 'relative',
            }}>
                {/* Close button */}
                <button
                    onClick={onClose}
                    style={{
                        position: 'absolute',
                        top: '1rem',
                        right: '1rem',
                        background: 'none',
                        border: '1px solid rgba(100,116,139,0.3)',
                        borderRadius: '0.25rem',
                        padding: '0.3rem',
                        cursor: 'pointer',
                        color: '#64748B',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        transition: 'all 0.15s',
                    }}
                    onMouseEnter={e => { e.currentTarget.style.color = '#E2E8F0'; e.currentTarget.style.borderColor = 'rgba(100,116,139,0.6)'; }}
                    onMouseLeave={e => { e.currentTarget.style.color = '#64748B'; e.currentTarget.style.borderColor = 'rgba(100,116,139,0.3)'; }}
                >
                    <X style={{ width: '16px', height: '16px' }} />
                </button>

                {/* Metric ID */}
                <div style={{
                    fontFamily: 'monospace',
                    fontSize: '0.72rem',
                    color: TEAL,
                    textTransform: 'uppercase',
                    letterSpacing: '0.1em',
                    marginBottom: '0.375rem',
                }}>
                    Metric {metricId}
                </div>

                {/* Title */}
                <h3 style={{
                    fontFamily: 'monospace',
                    fontSize: '1.05rem',
                    fontWeight: '700',
                    color: '#E2E8F0',
                    margin: '0 0 1.5rem 0',
                    lineHeight: 1.4,
                    paddingRight: '2rem',
                }}>
                    {title}
                </h3>

                {!definition ? (
                    <div style={{
                        padding: '1rem',
                        background: 'rgba(15,23,42,0.6)',
                        border: '1px solid rgba(100,116,139,0.2)',
                        borderRadius: '0.375rem',
                        color: '#94A3B8',
                        fontSize: '0.8rem',
                        fontFamily: 'monospace',
                    }}>
                        No detailed definition available.
                        {summaryEntries && summaryEntries.length > 0 && (
                            <div style={{ marginTop: '0.75rem', color: '#CBD5E1', fontSize: '0.78rem' }}>
                                {summaryEntries[0].description}
                            </div>
                        )}
                    </div>
                ) : (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                        {SECTION_FIELDS.map(({ key, label }) => (
                            <div key={key}>
                                <div style={{
                                    fontFamily: 'monospace',
                                    fontSize: '0.6rem',
                                    fontWeight: '600',
                                    color: '#475569',
                                    textTransform: 'uppercase',
                                    letterSpacing: '0.1em',
                                    marginBottom: '0.3rem',
                                }}>
                                    {label}
                                </div>
                                <div style={{
                                    fontSize: '0.8rem',
                                    color: definition[key] ? '#CBD5E1' : '#475569',
                                    fontFamily: 'monospace',
                                    lineHeight: 1.5,
                                    padding: '0.4rem 0.6rem',
                                    background: 'rgba(15,23,42,0.4)',
                                    borderRadius: '0.25rem',
                                    border: '1px solid rgba(255,255,255,0.04)',
                                }}>
                                    {definition[key] || '—'}
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}

// Exported for testing — the list of field keys rendered by the panel
MetricInfoPanel.RENDERED_FIELD_KEYS = SECTION_FIELDS.map(f => f.key);
