var _useState = React.useState;
var _useCallback = React.useCallback;
var _useMemo = React.useMemo;
var _useEffect = React.useEffect;

var ROOM_TYPES = AppConstants.ROOM_TYPES;

/**
 * ScansPage — Scan history with search, lozenge filters, and inline scan editing.
 *
 * Filter modes: all | property | room | date | severity
 * Edit: inline form per scan for property, room, observations, notes.
 * Delete: confirmation dialog, persisted via ScanStore → IndexedDB.
 * 
 * PERFORMANCE FIX: Added search debouncing, memoized filtering, and optimized string operations.
 */
var ScansPage = function () {
    var manageProperty = useFeatureFlag('MANAGE_PROPERTY');
    var navigate = ReactRouterDOM.useNavigate();
    var store = useScanStore();
    var scans = store.scans;
    var properties = store.getProperties();

    // --- Filter + search state (optimized) ---
    var filterState = _useState('all');
    var activeFilter = filterState[0];
    var setActiveFilter = filterState[1];
    
    // PERFORMANCE FIX: Separate immediate and debounced search queries
    var searchState = _useState('');
    var searchQuery = searchState[0];
    var setSearchQuery = searchState[1];
    
    var debouncedSearchState = _useState('');
    var debouncedSearchQuery = debouncedSearchState[0];
    var setDebouncedSearchQuery = debouncedSearchState[1];

    // PERFORMANCE FIX: Debounce search input (300ms delay)
    _useEffect(function() {
        var timer = setTimeout(function() {
            setDebouncedSearchQuery(searchQuery);
        }, 300);
        return function() {
            clearTimeout(timer);
        };
    }, [searchQuery]);

    // --- Edit scan state ---
    var editIdState = _useState(null);
    var editScanId = editIdState[0];
    var setEditScanId = editIdState[1];

    var esPropertyState = _useState(null);
    var esPropertyId = esPropertyState[0]; var setEsPropertyId = esPropertyState[1];
    var esRoomState = _useState('');
    var esRoom = esRoomState[0]; var setEsRoom = esRoomState[1];
    var esOdourState = _useState(null);
    var esOdour = esOdourState[0]; var setEsOdour = esOdourState[1];
    var esTextureState = _useState([]);
    var esTextures = esTextureState[0]; var setEsTextures = esTextureState[1];
    var esSevState = _useState(0);
    var esSev = esSevState[0]; var setEsSev = esSevState[1];
    var esNotesState = _useState('');
    var esNotes = esNotesState[0]; var setEsNotes = esNotesState[1];

    // --- Delete confirmation ---
    var confirmState = _useState(null);
    var confirmDelete = confirmState[0]; var setConfirmDelete = confirmState[1];

    var inputClass = 'bg-surface border-none rounded-xl text-sm p-3 shadow-soft ring-1 ring-sage/20 focus:ring-2 focus:ring-primary font-semibold text-forest placeholder:text-forest/60 placeholder:font-medium w-full';

    var ALL_FILTERS = [
        { key: 'all', label: 'All Scans', 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 FILTERS = manageProperty ? ALL_FILTERS : ALL_FILTERS.filter(function (f) { return f.key !== 'property'; });

    // PERFORMANCE FIX: Pre-compute searchable content for each scan to avoid repeated operations
    var scansWithSearchData = _useMemo(function() {
        return scans.map(function(scan) {
            var searchableFields = [];
            
            // Add basic scan fields
            if (scan.roomName) searchableFields.push(scan.roomName.toLowerCase());
            if (scan.verdict) searchableFields.push(scan.verdict.toLowerCase());
            if (scan.fileName) searchableFields.push(scan.fileName.toLowerCase());
            
            // Add property data if managing properties
            if (manageProperty && scan.propertyId) {
                var prop = store.getPropertyById(scan.propertyId);
                if (prop) {
                    if (prop.name) searchableFields.push(prop.name.toLowerCase());
                    if (prop.address) searchableFields.push(prop.address.toLowerCase());
                }
            }
            
            // Add severity keywords
            var keywords = GroupingUtils.SEVERITY_KEYWORDS[scan.severity];
            if (keywords) {
                for (var k = 0; k < keywords.length; k++) {
                    searchableFields.push(keywords[k]);
                }
            }
            
            return {
                scan: scan,
                searchText: searchableFields.join(' ') // Pre-joined for faster searching
            };
        });
    }, [scans, manageProperty, store]);

    // PERFORMANCE FIX: Optimized search function with memoized results
    var filteredScans = _useMemo(function() {
        if (!debouncedSearchQuery.trim()) {
            return scans; // Return original array when no search
        }
        
        var query = debouncedSearchQuery.toLowerCase().trim();
        var results = [];
        
        for (var i = 0; i < scansWithSearchData.length; i++) {
            var item = scansWithSearchData[i];
            if (item.searchText.indexOf(query) >= 0) {
                results.push(item.scan);
            }
        }
        
        return results;
    }, [scans, scansWithSearchData, debouncedSearchQuery]);

    // --- Grouping (delegates to GroupingUtils — CR-05) ---
    var groupByRoom = GroupingUtils.groupByRoom;
    var groupByDate = GroupingUtils.groupByDate;
    var groupBySeverity = GroupingUtils.groupBySeverity;
    var groupByProperty = function (scanList) {
        return GroupingUtils.groupByProperty(scanList, store.getPropertyById);
    };

    // --- Edit scan handlers ---
    var startEditScan = _useCallback(function (scan) {
        setEditScanId(scan.id);
        setEsPropertyId(scan.propertyId || null);
        setEsRoom(scan.roomName || '');
        setEsOdour(scan.odourLevel || null);
        setEsTextures(scan.surfaceTextures || []);
        setEsSev(scan.severityRating || 0);
        setEsNotes(scan.notes || '');
    }, []);

    var cancelEditScan = _useCallback(function () {
        setEditScanId(null);
    }, []);

    var saveEditScan = _useCallback(function () {
        store.updateScan(editScanId, {
            propertyId: esPropertyId,
            roomName: esRoom || null,
            odourLevel: esOdour,
            surfaceTextures: esTextures,
            severityRating: esSev,
            notes: esNotes,
        });
        setEditScanId(null);
    }, [editScanId, esPropertyId, esRoom, esOdour, esTextures, esSev, esNotes, store]);

    var toggleEsTexture = _useCallback(function (tex) {
        setEsTextures(function (prev) {
            var idx = prev.indexOf(tex);
            if (idx >= 0) return prev.slice(0, idx).concat(prev.slice(idx + 1));
            return prev.concat([tex]);
        });
    }, []);

    var handleConfirmDelete = _useCallback(function () {
        if (!confirmDelete) return;
        store.deleteScan(confirmDelete.id);
        if (editScanId === confirmDelete.id) setEditScanId(null);
        setConfirmDelete(null);
    }, [confirmDelete, editScanId, store]);

    // --- Render: inline edit form ---
    var renderEditForm = function (scan) {
        return (
            <div className="bio-bg bio-bg-50 rounded-xl p-4 space-y-4 border border-sage/10">
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                        <span className="material-symbols-outlined text-forest text-lg">edit</span>
                        <span className="text-sm font-extrabold text-forest">Edit Scan Details</span>
                    </div>
                    <button onClick={cancelEditScan} className="text-[10px] font-black text-forest uppercase tracking-widest btn-nature">Cancel</button>
                </div>

                {/* Property — gated by MANAGE_PROPERTY flag */}
                {manageProperty && (
                <div className="space-y-1.5">
                    <label className="text-[10px] font-black text-forest uppercase tracking-[0.15em]">Property</label>
                    <select className={inputClass + ' appearance-none'} value={esPropertyId || ''} onChange={function (e) { setEsPropertyId(e.target.value || null); }}>
                        <option value="">Unassigned</option>
                        {properties.map(function (p) {
                            return <option key={p.id} value={p.id}>{p.name || p.address || 'Unnamed'}{p.isPrimary ? ' (Primary)' : ''}</option>;
                        })}
                    </select>
                </div>
                )}

                {/* Room */}
                <div className="space-y-1.5">
                    <label className="text-[10px] font-black text-forest uppercase tracking-[0.15em]">Room</label>
                    <Typeahead options={ROOM_TYPES} placeholder="Search rooms..." value={esRoom} onChange={setEsRoom} />
                </div>

                {/* Odour / Texture / Severity / Notes */}
                <ScanObservationForm
                    odour={esOdour}
                    onOdourChange={setEsOdour}
                    textures={esTextures}
                    onTextureToggle={toggleEsTexture}
                    severityRating={esSev}
                    onSeverityChange={setEsSev}
                    notes={esNotes}
                    onNotesChange={setEsNotes}
                    compact={true}
                />

                {/* Actions */}
                <div className="flex gap-2">
                    <button onClick={saveEditScan} className="flex-1 bg-forest text-white font-extrabold py-3 rounded-xl shadow-clay flex items-center justify-center gap-2 btn-nature hover:brightness-110 transition-all">
                        <span className="material-symbols-outlined text-lg">check_circle</span> Save Changes
                    </button>
                    <button onClick={function () { setConfirmDelete({ id: scan.id }); }} className="py-3 px-4 rounded-xl border border-warning/30 text-warning btn-nature">
                        <span className="material-symbols-outlined text-lg">delete</span>
                    </button>
                </div>
            </div>
        );
    };

    // --- Render: scan card ---
    var renderScanCard = function (scan) {
        var sev = SeverityConfig.get(scan.severity);
        var isEditing = editScanId === scan.id;
        var propLabel = '';
        if (manageProperty && scan.propertyId) {
            var prop = store.getPropertyById(scan.propertyId);
            if (prop) propLabel = prop.name || prop.address || '';
        }

        return (
            <div key={scan.id}>
                <div className="group bio-bg bio-bg-10 rounded-xl shadow-soft border border-stone-100/50 overflow-hidden hover:bg-forest transition-all duration-300 btn-nature">
                    <div className="flex items-center gap-4 p-4">
                        {/* Thumbnail + info — navigates to detail */}
                        <div onClick={function () { navigate('/scan/' + scan.id); }} className="flex items-center gap-4 flex-1 min-w-0 cursor-pointer">
                            <div className="w-14 h-14 rounded-xl overflow-hidden bg-background-light shrink-0">
                                {scan.thumbnail ? (
                                    <img alt={scan.fileName} 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>
                                )}
                            </div>
                            <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}</h4>
                                <p className="text-sm font-semibold text-forest group-hover:text-accent/60 transition-colors">{scan.percentage}% • {FormatUtils.timeAgo(scan.timestamp)}</p>
                                {manageProperty && propLabel && <p className="text-[10px] font-bold text-forest truncate group-hover:text-white/40 transition-colors">{propLabel}</p>}
                            </div>
                        </div>
                        {/* Severity + edit button */}
                        <div className="flex items-center gap-2 shrink-0">
                            <div className="text-right">
                                <div className={sev.text + ' font-extrabold group-hover:text-white transition-colors'}>{sev.label}</div>
                                <div className="text-[10px] text-forest font-black uppercase tracking-tighter group-hover:text-accent/60 transition-colors">Severity</div>
                            </div>
                            <button
                                onClick={function () { isEditing ? cancelEditScan() : startEditScan(scan); }}
                                className={'flex items-center justify-center size-9 rounded-xl transition-all btn-nature ' + (isEditing ? 'bg-forest text-white' : 'bg-background-light text-forest/50 hover:text-forest hover:bg-primary')}
                            >
                                <span className="material-symbols-outlined text-[18px]">{isEditing ? 'close' : 'edit'}</span>
                            </button>
                        </div>
                    </div>

                    {/* Inline edit form */}
                    {isEditing && (
                        <div className="px-4 pb-4">
                            {renderEditForm(scan)}
                        </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">
                <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>
        );
    };

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

    return (
        <Layout hideNav={false}>
            <main className="flex-1 overflow-y-auto overflow-x-hidden pb-36">
                <PageHeader title="Scans" showMenu={true} titleClass="font-extrabold text-xl text-forest tracking-tight" />
                <div className="px-6 mt-4 space-y-4">

                {/* Delete confirmation */}
                <ConfirmDialog
                    isOpen={!!confirmDelete}
                    onConfirm={handleConfirmDelete}
                    onCancel={function () { setConfirmDelete(null); }}
                    title="Delete Scan?"
                    description="This scan and its observations will be permanently removed."
                />

                {/* Search */}
                <div className="relative">
                    <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={searchQuery} 
                        onChange={function (e) { setSearchQuery(e.target.value); }} 
                    />
                    {searchQuery && (
                        <button onClick={function () { setSearchQuery(''); setDebouncedSearchQuery(''); }} 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>
                {debouncedSearchQuery && (
                    <p className="text-xs font-semibold text-forest px-1">{filteredScans.length} result{filteredScans.length !== 1 ? 's' : ''} for "<span className="font-bold text-forest">{debouncedSearchQuery}</span>"</p>
                )}

                {/* Filter lozenges */}
                <div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
                    {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">
                        <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>
                )}

                {/* Content */}
                {scans.length === 0 ? (
                    <div onClick={function () { navigate('/analysis'); }} className="bio-bg bio-bg-10 rounded-xl shadow-soft p-8 border border-stone-100/50 text-center btn-nature cursor-pointer group hover:bg-forest transition-all duration-300">
                        <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-3">
                            <span className="material-symbols-outlined text-primary text-2xl">add_a_photo</span>
                        </div>
                        <p className="text-sm font-extrabold text-forest mb-1 group-hover:text-white transition-colors">No scans yet</p>
                        <p className="text-xs font-medium text-forest group-hover:text-accent/60 transition-colors">Click or tap here or the camera button to scan your first area for mould.</p>
                    </div>
                ) : filteredScans.length === 0 ? (
                    <div className="bg-surface rounded-xl shadow-soft p-8 border border-stone-100/50 text-center">
                        <span className="material-symbols-outlined text-forest text-4xl mb-2">search_off</span>
                        <p className="text-sm font-extrabold text-forest mb-1">No matching scans</p>
                        <p className="text-xs font-medium text-forest">Try a different search term or filter.</p>
                    </div>
                ) : (
                    <div>
                        {activeFilter === 'all' && (<div className="space-y-3">{filteredScans.map(function (scan) { return renderScanCard(scan); })}</div>)}
                        {activeFilter === 'property' && renderGroupedList(groupByProperty(filteredScans), false)}
                        {activeFilter === 'room' && renderGroupedList(groupByRoom(filteredScans).map(function (r) { return { label: r.roomName, scans: r.scans }; }), false)}
                        {activeFilter === 'date' && renderGroupedList(groupByDate(filteredScans), false)}
                        {activeFilter === 'severity' && renderGroupedList(groupBySeverity(filteredScans), true)}
                    </div>
                )}
                </div>
            </main>
        </Layout>
    );
};

window.ScansPage = ScansPage;