var Link = ReactRouterDOM.Link;

/**
 * RecentScans — Horizontal scrollable list of recent scan cards.
 * Reads from ScanStore context. Shows empty state when no scans exist.
 * Props: limit (number) — Max scans to show (default: 10)
 */
var RecentScans = function (props) {
    var limit = props.limit || 10;
    var navigate = ReactRouterDOM.useNavigate();
    var store = useScanStore();
    var scans = store.scans.slice(0, limit);

    return (
        <section className="flex flex-col gap-4 -mx-6 mb-2">
            <div className="px-6 flex justify-between items-end">
                <h3 className="text-xl font-extrabold text-forest">Recent Scans</h3>
                {scans.length > 0 && (
                    <Link to="/scans" className="text-sm font-bold text-forest hover:underline">See All</Link>
                )}
            </div>
            {scans.length === 0 ? (
                <div className="px-6" onClick={() => navigate('/analysis')}>
                    <div className="bio-bg bio-bg-40 rounded-xl p-6 border border-stone-100/50 btn-nature cursor-pointer group hover:bg-forest transition-all duration-300">
                        <div className="w-14 h-14 rounded-full bg-accent/20 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-semibold  group-hover:text-primary mb-1 transition-colors">No scans yet</p>
                        <p className="text-xs text-muted">Click or tap here or use the camera button to scan your first area for mould.</p>
                    </div>
                </div>
            ) : (
                <div className="flex overflow-x-auto no-scrollbar px-6 pb-4">
                    <div className="pl-2 flex overflow-x-auto gap-4 snap-x">
                        {scans.map(function (scan) {
                            var sev = SeverityConfig.get(scan.severity);
                            var badgeText = SeverityConfig.badgeText(scan.severity);
                            return (
                                <div key={scan.id} onClick={function () { navigate('/scan/' + scan.id); }} className="cursor-pointer snap-start flex-none w-[140px] bg-surface rounded-xl shadow-soft overflow-hidden flex flex-col group btn-nature">
                                    <div className="h-[100px] w-full bg-background-light relative">
                                        {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-muted text-3xl">image</span>
                                            </div>
                                        )}
                                        <div className={'absolute top-2 right-2 backdrop-blur-sm px-2 py-1 rounded-sm flex items-center gap-1 shadow-sm ' + sev.badgeBg}>
                                            <span className={'material-symbols-outlined text-[12px] ' + badgeText}>{sev.icon}</span>
                                            <span className={'text-[10px] font-bold ' + badgeText}>{sev.label}</span>
                                        </div>
                                    </div>
                                    <div className="p-3 transition-colors group-hover:bg-forest">
                                        <p className="font-extrabold text-sm truncate text-forest group-hover:text-white">{scan.roomName || scan.verdict || scan.fileName}</p>
                                        <p className="text-xs font-semibold text-muted group-hover:text-accent/60">{FormatUtils.shortDate(scan.timestamp)}</p>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            )}
        </section>
    );
};

window.RecentScans = RecentScans;