var _useState_SS = React.useState;
var _useMemo_SS = React.useMemo;

/**
 * ScanSelector — Reusable scan selection component.
 *
 * Combines ScansPage filter lozenges (All/Property/Room/Date/Severity) + search
 * with ReportsPage-style scan cards in a scrollable, fixed-height container.
 *
 * Props:
 *   selected   (object)   — Map of selected scan IDs { [id]: true }
 *   onToggle   (function) — Called with scanId when a card is tapped
 *   rows       (number)   — Number of card rows visible (default: 3). Each row ~96px.
 *   title      (string)   — Section heading (default: "Attach Scans")
 */
var ScanSelector = function (props) {
    var selected = props.selected || {};
    var onToggle = props.onToggle;
    var rows = props.rows || 3;
    var title = props.title || 'Attach Scans';

    var store = useScanStore();
    var scans = store.scans;
    var properties = store.getProperties();

    var searchState = _useState_SS('');
    var search = searchState[0];
    var setSearch = searchState[1];

    var filterState = _useState_SS('all');
    var activeFilter = filterState[0];
    var setActiveFilter = filterState[1];

    var FILTERS = [
        { key: 'all', label: 'All', icon: 'list' },
        { key: 'property', label: 'Property', icon: 'apartment' },
        { key: 'room', label: 'Room', icon: 'door_open' },
        { key: 'date', label: 'Date', icon: 'calendar_today' },
        { key: 'severity', label: 'Severity', icon: 'warning' },
    ];

    var sevKeywords = GroupingUtils.SEVERITY_KEYWORDS;

    // Search filter
    var matchesScan = function (scan, query) {
        if (!query) return true;
        var q = query.toLowerCase();
        if (scan.roomName && scan.roomName.toLowerCase().indexOf(q) >= 0) return true;
        if (scan.verdict && scan.verdict.toLowerCase().indexOf(q) >= 0) return true;
        if (scan.fileName && scan.fileName.toLowerCase().indexOf(q) >= 0) return true;
        if (scan.propertyId) {
            var prop = store.getPropertyById(scan.propertyId);
            if (prop) {
                if (prop.name && prop.name.toLowerCase().indexOf(q) >= 0) return true;
                if (prop.address && prop.address.toLowerCase().indexOf(q) >= 0) return true;
            }
        }
        for (var sev in sevKeywords) {
            var keywords = sevKeywords[sev];
            for (var k = 0; k < keywords.length; k++) {
                if (keywords[k].indexOf(q) >= 0 && scan.severity === sev) return true;
            }
        }
        return false;
    };

    var filteredScans = _useMemo_SS(function () {
        var list = [];
        for (var i = 0; i < scans.length; i++) {
            if (matchesScan(scans[i], search)) list.push(scans[i]);
        }
        return list;
    }, [scans, search]);

    // Grouping helpers — delegate to GroupingUtils (CR-05)
    var groupByProperty = function (scanList) {
        return GroupingUtils.groupByProperty(scanList, store.getPropertyById);
    };

    var groupByRoom = function (scanList) {
        var groups = GroupingUtils.groupByRoom(scanList);
        return groups.map(function (r) { return { label: r.roomName, scans: r.scans }; });
    };

    var groupByDate = GroupingUtils.groupByDate;
    var groupBySeverity = GroupingUtils.groupBySeverity;

    var selectedCount = Object.keys(selected).length;

    // Card height: thumbnail ~72px + padding/gap ~24px = ~96px per row
    var containerHeight = (rows * 96) + 'px';

    // Scan card — ReportsPage bento style with selection overlay
    var renderCard = function (scan) {
        var sev = SeverityConfig.get(scan.severity);
        var badgeText = SeverityConfig.badgeText(scan.severity);
        var isSelected = !!selected[scan.id];
        var propLabel = '';
        if (scan.propertyId) {
            var prop = store.getPropertyById(scan.propertyId);
            if (prop) propLabel = prop.name || prop.address || '';
        }

        return (
            <div
                key={scan.id}
                onClick={function () { onToggle(scan.id); }}
                className={
                    'group relative cursor-pointer bio-bg bio-bg-10 rounded-xl shadow-soft overflow-hidden btn-nature transition-all duration-300 hover:bg-forest ' +
                    (isSelected ? 'border-2 border-primary ring-1 ring-primary/30' : 'border border-stone-100/50')
                }
            >
                <div className="flex items-center gap-4 p-4">
                    {/* Thumbnail */}
                    <div className="w-14 h-14 rounded-xl overflow-hidden bg-background-light shrink-0 relative">
                        {scan.thumbnail ? (
                            <img alt="" className="w-full h-full object-cover" src={scan.thumbnail} />
                        ) : (
                            <div className="w-full h-full flex items-center justify-center">
                                <span className="material-symbols-outlined text-forest">image</span>
                            </div>
                        )}
                        {/* Severity badge */}
                        <div className={'absolute top-1 right-1 px-1 py-0.5 rounded-sm flex items-center gap-0.5 ' + sev.badgeBg}>
                            <span className={'material-symbols-outlined text-[10px] ' + badgeText}>{sev.icon}</span>
                        </div>
                    </div>

                    {/* Info */}
                    <div className="flex-1 min-w-0">
                        <h4 className="font-extrabold text-forest truncate group-hover:text-white transition-colors">{scan.roomName || scan.verdict || scan.fileName || 'Scan'}</h4>
                        <p className="text-sm font-semibold text-forest group-hover:text-accent/60 transition-colors">{scan.percentage}% • {FormatUtils.timeAgo(scan.timestamp)}</p>
                        {propLabel && <p className="text-[10px] font-bold text-forest truncate group-hover:text-white/40 transition-colors">{propLabel}</p>}
                    </div>

                    {/* Selection indicator */}
                    <div className={'w-7 h-7 rounded-full flex items-center justify-center shrink-0 transition-colors ' + (isSelected ? 'bg-primary' : 'border-2 border-stone-300 group-hover:border-white/40')}>
                        {isSelected && <span className="material-symbols-outlined text-white text-sm">check</span>}
                    </div>
                </div>
            </div>
        );
    };

    // Group header
    var renderGroupHeader = function (label, count, sevKey) {
        var sevCfg = sevKey ? SeverityConfig.get(sevKey) : null;
        return (
            <div className="flex items-center justify-between px-1 pt-2">
                <h4 className={'font-extrabold ' + (sevCfg ? sevCfg.text : 'text-forest')}>{label}</h4>
                <span className="text-[10px] font-black text-forest uppercase tracking-widest">{count} scan{count !== 1 ? 's' : ''}</span>
            </div>
        );
    };

    // Grouped list renderer
    var renderGroupedList = function (groups, sevColoured) {
        return groups.map(function (group) {
            return (
                <div key={group.label} className="space-y-2">
                    {renderGroupHeader(group.label, group.scans.length, sevColoured ? group.severity : null)}
                    {group.scans.map(function (scan) { return renderCard(scan); })}
                </div>
            );
        });
    };

    if (scans.length === 0) return null;

    return (
        <section className="mt-5">
            {/* Header */}
            <div className="flex items-center justify-between mb-2">
                <h3 className="text-sm font-extrabold text-forest">{title}</h3>
                <span className="text-[10px] font-bold text-forest">{selectedCount} selected</span>
            </div>

            {/* Search */}
            <div className="relative mb-2">
                <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-forest text-lg pointer-events-none">search</span>
                <input
                    type="text"
                    className="w-full bg-surface border-none rounded-xl text-sm py-3 pl-10 pr-10 shadow-soft ring-1 ring-sage/20 focus:ring-2 focus:ring-primary font-semibold text-forest placeholder:text-forest/60 placeholder:font-medium"
                    placeholder="Search by property, room, severity..."
                    value={search}
                    onChange={function (e) { setSearch(e.target.value); }}
                />
                {search && (
                    <button onClick={function () { setSearch(''); }} className="absolute right-3 top-1/2 -translate-y-1/2 text-forest hover:text-forest transition-colors">
                        <span className="material-symbols-outlined text-lg">close</span>
                    </button>
                )}
            </div>

            {/* Filter lozenges */}
            <div className="flex gap-2 overflow-x-auto no-scrollbar pb-1 mb-2">
                {FILTERS.map(function (f) {
                    var isActive = activeFilter === f.key;
                    return (
                        <button
                            key={f.key}
                            onClick={function () { setActiveFilter(f.key); }}
                            className={
                                'flex items-center gap-1.5 px-4 py-2.5 rounded-xl text-xs font-bold whitespace-nowrap transition-all btn-nature shrink-0 ' +
                                (isActive
                                    ? 'bg-forest text-white shadow-clay'
                                    : 'bg-surface border border-stone-100/50 text-forest shadow-soft hover:bg-forest hover:text-white')
                            }
                        >
                            <span className="material-symbols-outlined text-[16px]">{f.icon}</span>
                            {f.label}
                        </button>
                    );
                })}
            </div>

            {/* Total Scans header */}
            {activeFilter === 'all' && filteredScans.length > 0 && (
                <div className="flex items-center justify-between px-1 mb-2">
                    <h4 className="font-extrabold text-forest">Total Scans</h4>
                    <span className="text-[10px] font-black text-forest uppercase tracking-widest">{filteredScans.length} scan{filteredScans.length !== 1 ? 's' : ''}</span>
                </div>
            )}

            {/* Scrollable card list */}
            <div className="overflow-y-auto overflow-x-hidden rounded-xl" style={{ maxHeight: containerHeight }}>
                {filteredScans.length === 0 ? (
                    <div className="text-center py-8">
                        <span className="material-symbols-outlined text-2xl text-forest/30 mb-1">search_off</span>
                        <p className="text-xs font-bold text-forest/50">No matching scans</p>
                    </div>
                ) : (
                    <div className="space-y-2">
                        {activeFilter === 'all' && filteredScans.map(function (scan) { return renderCard(scan); })}
                        {activeFilter === 'property' && renderGroupedList(groupByProperty(filteredScans), false)}
                        {activeFilter === 'room' && renderGroupedList(groupByRoom(filteredScans), false)}
                        {activeFilter === 'date' && renderGroupedList(groupByDate(filteredScans), false)}
                        {activeFilter === 'severity' && renderGroupedList(groupBySeverity(filteredScans), true)}
                    </div>
                )}
            </div>
        </section>
    );
};

window.ScanSelector = ScanSelector;