/**
 * FrequencySpectrumBar — Image frequency energy distribution visualisation.
 *
 * Reusable component. Shows how visual detail is distributed across three
 * frequency bands (low/mid/high) as a segmented colour bar.
 *
 * Props:
 *   freqSpectrum  { low, mid, high, signature, description } — from LocalCNNService
 *   className     string — optional extra wrapper classes
 */
var FrequencySpectrumBar = function (props) {
    var freq = props.freqSpectrum;
    var className = props.className || '';

    var expandedState = React.useState(false);
    var expanded = expandedState[0];
    var setExpanded = expandedState[1];

    if (!freq) return null;

    var lowPct  = (freq.low  * 100).toFixed(0);
    var midPct  = (freq.mid  * 100).toFixed(0);
    var highPct = (freq.high * 100).toFixed(0);

    var signatureLabel = {
        TEXTURED:     'Multi-scale texture — consistent with mould growth patterns',
        UNIFORM:      'Low-frequency dominant — smooth surface',
        NEAR_UNIFORM: 'Near-uniform surface — low texture, possible plain wall',
        NOISY:        'High-frequency dominant — noise or fine grain',
        MIXED:        'Mixed frequency profile',
        FLAT:         'No frequency content detected'
    }[freq.signature] || freq.description || '';

    return (
        <div className={'bio-bg bio-bg-20 rounded-xl border border-stone-100/50 shadow-soft p-4 ' + className}>
            <div className="flex items-center justify-between mb-2">
                <span className="text-[10px] font-black text-forest uppercase tracking-[0.15em]">Frequency Spectrum</span>
                <span className={'text-[10px] font-bold px-2 py-0.5 rounded-full ' + (freq.signature === 'TEXTURED' ? 'bg-primary/15 text-primary' : 'bg-forest/10 text-forest')}>
                    {freq.signature}
                </span>
            </div>

            {/* Segmented bar — blue / amber / red matching reference app */}
            <div className="flex h-3 rounded-full overflow-hidden bg-forest/10 mb-1.5">
                <div style={{ width: lowPct + '%', background: '#3b82f6', transition: 'width 0.8s cubic-bezier(0.4,0,0.2,1)' }} />
                <div style={{ width: midPct + '%', background: '#f59e0b', transition: 'width 0.8s cubic-bezier(0.4,0,0.2,1)' }} />
                <div style={{ width: highPct + '%', background: '#ef4444', transition: 'width 0.8s cubic-bezier(0.4,0,0.2,1)' }} />
            </div>

            {/* Legend row */}
            <div className="flex justify-between text-[10px] font-bold text-forest mb-2">
                <span style={{ color: '#3b82f6' }}>Low {lowPct}%</span>
                <span style={{ color: '#f59e0b' }}>Mid {midPct}%</span>
                <span style={{ color: '#ef4444' }}>High {highPct}%</span>
            </div>

            {/* Signature label */}
            <p className="text-[11px] font-semibold text-forest text-center mb-2">{signatureLabel}</p>

            {/* Expandable explainer */}
            <button
                onClick={function () { setExpanded(!expanded); }}
                className="flex items-center gap-1 mx-auto text-[11px] font-bold text-forest hover:text-primary transition-colors btn-nature"
                aria-expanded={expanded}
            >
                <span className="material-symbols-outlined text-sm">info</span>
                What does this mean?
                <span className={'material-symbols-outlined text-sm transition-transform ' + (expanded ? 'rotate-180' : '')} style={{ transition: 'transform 0.2s' }}>expand_more</span>
            </button>

            {expanded && (
                <div className="mt-3 space-y-2 text-[11px] font-medium text-forest leading-relaxed border-t border-sage/20 pt-3">
                    <p>The bar shows how your image's visual detail is distributed across three scales:</p>
                    <p><span className="inline-block w-2 h-2 rounded-full mr-1 align-middle" style={{ background: '#3b82f6' }} /><strong className="text-forest">Low (blue)</strong> — Smooth, gradual changes like plain walls or even dust.</p>
                    <p><span className="inline-block w-2 h-2 rounded-full mr-1 align-middle" style={{ background: '#f59e0b' }} /><strong className="text-forest">Mid (amber)</strong> — Textures at the scale of mould growth — colony edges, branching structures.</p>
                    <p><span className="inline-block w-2 h-2 rounded-full mr-1 align-middle" style={{ background: '#ef4444' }} /><strong className="text-forest">High (red)</strong> — Very fine detail like sharp edges or camera grain.</p>
                    <p>Mould creates detail at <em>multiple</em> scales, so images with energy spread across amber and red are more likely to contain real mould patterns.</p>
                </div>
            )}
        </div>
    );
};

window.FrequencySpectrumBar = FrequencySpectrumBar;