/**
 * LocalSpeciesPanel — Mould species identification results.
 *
 * Reusable component. Shows the top species highlight card, a ranked
 * animated bar chart for all 6 species, and an uncertainty notice.
 * Only rendered when mould is detected by LocalCNNService.
 *
 * Props:
 *   speciesTop        { label, confidence, description, color }
 *   speciesRanked     [{ label, confidence, color, description }]
 *   speciesSummary    string
 *   isUncertain       boolean
 *   className         string — optional extra wrapper classes
 */
var LocalSpeciesPanel = function (props) {
    var speciesTop     = props.speciesTop;
    var speciesRanked  = props.speciesRanked || [];
    var speciesSummary = props.speciesSummary || '';
    var isUncertain    = props.isUncertain || false;
    var className      = props.className || '';

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

    if (!speciesTop) return null;

    return (
        <div className={'bio-bg bio-bg-30 rounded-xl border border-stone-100/50 shadow-soft overflow-hidden ' + className}>
            {/* Header */}
            <div className="px-4 pt-4 pb-1 text-center">
                <span className="text-[10px] font-black text-forest uppercase tracking-[0.15em]">Species Identification</span>
            </div>

            {/* Summary text */}
            {speciesSummary && (
                <p className="px-4 pt-2 pb-3 text-[12px] font-medium text-forest leading-relaxed text-center border-b border-sage/10">
                    {speciesSummary}
                </p>
            )}

            {/* Top species highlight */}
            <div className="mx-4 mt-3 p-4 rounded-xl border-2 bg-surface" style={{ borderColor: speciesTop.color }}>
                <p className="text-[10px] font-black text-forest uppercase tracking-[0.12em] mb-1 text-center">Most likely species</p>
                <p className="text-xl font-black text-center mb-0.5" style={{ color: speciesTop.color }}>{speciesTop.label}</p>
                <p className="text-base font-extrabold text-center mb-2" style={{ color: speciesTop.color }}>{speciesTop.confidence.toFixed(1)}%</p>
                {speciesTop.description && (
                    <p className="text-[11px] font-medium text-forest text-center leading-relaxed">{speciesTop.description}</p>
                )}
            </div>

            {/* Ranked bar chart */}
            <div className="px-4 mt-4 space-y-2.5">
                {speciesRanked.map(function (s, i) {
                    var barWidth = Math.max(s.confidence, 0.5).toFixed(1);
                    return (
                        <div
                            key={s.label}
                            className="flex items-center gap-2.5"
                            style={{ opacity: 0, animation: 'speciesBarIn 0.4s ease forwards', animationDelay: (i * 0.08) + 's' }}
                        >
                            <span className="text-[11px] font-bold text-forest w-20 text-right shrink-0">{s.label}</span>
                            <div className="flex-1 h-5 bg-forest/10 rounded-lg overflow-hidden relative">
                                <div
                                    className="h-full rounded-lg"
                                    style={{
                                        width: barWidth + '%',
                                        background: s.color,
                                        transition: 'width 0.8s cubic-bezier(0.4,0,0.2,1)'
                                    }}
                                />
                            </div>
                            <span className="text-[11px] font-extrabold w-12 shrink-0" style={{ color: s.color }}>
                                {s.confidence.toFixed(1)}%
                            </span>
                        </div>
                    );
                })}
            </div>

            {/* Uncertainty notice */}
            {isUncertain && (
                <div className="mx-4 mt-3 p-3 rounded-xl bg-[#FFF8E1] border border-[#d4a373]/20 flex items-start gap-2">
                    <span className="material-symbols-outlined text-[#d4a373] text-lg shrink-0 mt-0.5">help</span>
                    <p className="text-[11px] font-medium text-forest leading-relaxed">
                        The model cannot confidently distinguish between species. This may indicate mixed mould growth, an unusual strain, or a species not in the training data. Professional laboratory testing is recommended.
                    </p>
                </div>
            )}

            {/* About species identification — expandable */}
            <div className="px-4 mt-3 pb-4">
                <button
                    onClick={function () { setExpanded(!expanded); }}
                    className="flex items-center gap-1 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>
                    About species identification
                    <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-2 space-y-1.5 text-[11px] font-medium text-forest leading-relaxed border-t border-sage/10 pt-2">
                        <p>Species identification uses a separate AI model trained on microscopic images of 6 common mould species. The confidence scores show how closely your image matches each species in the training data.</p>
                        <p>High confidence in one species suggests a strong visual match. When confidence is spread across multiple species, the mould may be a mixed colony or a species not well represented in the training data.</p>
                        <p>This is an speculative analysis only — professional laboratory testing is recommended for definitive identification.</p>
                    </div>
                )}
            </div>
        </div>
    );
};

window.LocalSpeciesPanel = LocalSpeciesPanel;