var _Link_SD = ReactRouterDOM.Link;
var _useState_SD = React.useState;
var _useEffect_SD = React.useEffect;
var _useMemo_SD = React.useMemo;

/**
 * SpecialistDirectoryPage — Browse local mould specialists.
 *
 * Loads real provider data from services/specialists-sydney-hills-district.json.
 * Features: search, category filter lozenges, provider cards with ratings.
 * Route: /specialists
 */
var SpecialistDirectoryPage = function () {
    var navigate = ReactRouterDOM.useNavigate();

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

    var filterState = _useState_SD('All');
    var activeFilter = filterState[0];
    var setActiveFilter = filterState[1];

    var dataState = _useState_SD([]);
    var specialists = dataState[0];
    var setSpecialists = dataState[1];

    var loadingState = _useState_SD(true);
    var loading = loadingState[0];
    var setLoading = loadingState[1];

    var locationState = _useState_SD('');
    var localArea = locationState[0];
    var setLocalArea = locationState[1];

    // Load specialist data
    _useEffect_SD(function () {
        SpecialistService.load()
            .then(function (data) {
                setSpecialists(data);
                setLoading(false);
                AnalyticsService.findProfessionalViewed({ search_query: '', category_filter: 'All', result_count: data.length });
            })
            .catch(function () { setLoading(false); });
    }, []);

    // Derive unique categories
    var categories = _useMemo_SD(function () {
        var cats = {};
        specialists.forEach(function (s) { cats[s.Category] = true; });
        return ['All'].concat(Object.keys(cats).sort());
    }, [specialists]);

    // Filter + search
    var filtered = _useMemo_SD(function () {
        var list = specialists;
        if (activeFilter !== 'All') {
            list = list.filter(function (s) { return s.Category === activeFilter; });
        }
        if (search.trim()) {
            var q = search.toLowerCase();
            list = list.filter(function (s) {
                return (s['Company Name'] || '').toLowerCase().indexOf(q) !== -1 ||
                       (s.Category || '').toLowerCase().indexOf(q) !== -1 ||
                       (s.City || '').toLowerCase().indexOf(q) !== -1;
            });
        }
        return list;
    }, [specialists, activeFilter, search]);

    // Category icon map — sourced from AppConstants
    var categoryIcon = function (cat) {
        return (AppConstants.SPECIALIST_CATEGORY_ICONS || {})[cat] || 'support_agent';
    };

    // ─── Specialist Card ──────────────────────────────────────────────────────────
    var SpecialistCard = function (props) {
        var s = props.specialist;
        var idx = props.index;
        var rating = SpecialistRating.getRating(s['Company Name']);
        var reviews = SpecialistRating.getReviewCount(s['Company Name']);
        var icon = categoryIcon(s.Category);

        return (
            <div className="bio-bg bio-bg-20 rounded-2xl p-4 shadow-soft border border-stone-100/50 flex flex-col gap-3 group hover:bg-forest transition-all duration-300">
                <div className="flex gap-4">
                    {/* Category icon circle */}
                    <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center shrink-0 group-hover:bg-primary/20 transition-colors">
                        <span
                            className="material-symbols-outlined text-primary text-2xl"
                            style={{ fontVariationSettings: "'FILL' 1" }}
                        >{icon}</span>
                    </div>
                    <div className="flex flex-col flex-1 min-w-0">
                        <div className="flex justify-between items-start gap-2">
                            <div className="min-w-0">
                                <h4 className="font-extrabold text-sm text-forest leading-tight truncate group-hover:text-white transition-colors">{s['Company Name']}</h4>
                                <p className="text-primary text-xs font-bold mt-0.5">{s.Category}</p>
                            </div>
                            {parseFloat(rating) >= 4.5 && (
                                <div className="bg-primary/10 text-primary px-2 py-0.5 rounded-lg flex items-center gap-1 shrink-0 group-hover:bg-primary/20">
                                    <span className="material-symbols-outlined text-[12px]" style={{ fontVariationSettings: "'FILL' 1" }}>verified</span>
                                    <span className="text-[9px] font-black uppercase tracking-wider">Top Rated</span>
                                </div>
                            )}
                        </div>
                        <div className="flex items-center gap-3 mt-2">
                            <div className="flex items-center gap-1 text-terracotta">
                                <span className="material-symbols-outlined text-sm" style={{ fontVariationSettings: "'FILL' 1" }}>star</span>
                                <span className="text-xs font-bold">{rating}</span>
                                <span className="text-forest text-[10px]">({reviews})</span>
                            </div>
                            {s.City && (
                                <div className="flex items-center gap-1 text-muted group-hover:text-accent/60 transition-colors">
                                    <span className="material-symbols-outlined text-sm">location_on</span>
                                    <span className="text-xs">{s.City}</span>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
                <button
                    onClick={function () { navigate('/specialists/' + idx); }}
                    className="w-full bg-forest text-white py-2.5 rounded-xl font-bold text-sm btn-nature hover:bg-primary transition-colors group-hover:bg-primary"
                >
                    View Profile
                </button>
            </div>
        );
    };

    return (
        <Layout>
            <main className="flex-1 overflow-y-auto overflow-x-hidden pb-36">
                <PageHeader title="Specialists" showBack={true} showMenu={true} />
                <div className="px-6">

                    {/* Location Picker */}
                    <LocationPicker onLocationChange={setLocalArea} />

                    {/* Search */}
                    <div className="mt-4 mb-3">
                        <label className="flex h-12 w-full">
                            <div className="flex w-full items-stretch rounded-xl shadow-soft">
                                <div className="text-sage flex items-center justify-center pl-4 bg-surface rounded-l-xl">
                                    <span className="material-symbols-outlined">search</span>
                                </div>
                                <input
                                    className="flex w-full min-w-0 flex-1 rounded-r-xl bg-surface text-forest font-medium placeholder:text-sage px-4 text-sm border-none focus:outline-none focus:ring-2 focus:ring-primary"
                                    placeholder="Search specialists, suburbs..."
                                    value={search}
                                    onChange={function (e) { setSearch(e.target.value); }}
                                />
                            </div>
                        </label>
                    </div>

                    {/* Category Filters */}
                    <div className="flex gap-2 pb-4 overflow-x-auto no-scrollbar">
                        {categories.map(function (cat) {
                            var isActive = cat === activeFilter;
                            return (
                                <button
                                    key={cat}
                                    onClick={function () { setActiveFilter(cat); }}
                                    className={
                                        'flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-full px-4 text-xs font-bold btn-nature transition-all ' +
                                        (isActive
                                            ? 'bg-forest text-white shadow-soft'
                                            : 'bg-surface border border-stone-200 text-forest/70 hover:border-primary/50')
                                    }
                                >
                                    {cat !== 'All' && (
                                        <span className={'material-symbols-outlined text-sm ' + (isActive ? 'text-white' : 'text-forest/50')}>{categoryIcon(cat)}</span>
                                    )}
                                    <span>{cat}</span>
                                </button>
                            );
                        })}
                    </div>

                    {/* Results Header */}
                    <div className="flex items-center justify-between mb-3">
                        <div>
                            <h3 className="text-forest font-extrabold text-base">Local Service Providers</h3>
                            {localArea && (
                                <p className="text-xs font-medium text-forest flex items-center gap-1 mt-0.5">
                                    <span className="material-symbols-outlined text-[12px]">location_on</span>
                                    {localArea}
                                </p>
                            )}
                        </div>
                        <span className="text-forest text-xs font-bold">{filtered.length} Found</span>
                    </div>

                    {/* Loading */}
                    {loading && (
                        <div className="flex items-center justify-center py-16">
                            <div className="w-10 h-10 rounded-full border-4 border-primary/20 border-t-primary animate-spin"></div>
                        </div>
                    )}

                    {/* Results */}
                    {!loading && (
                        <div className="space-y-3 pb-4">
                            {filtered.length === 0 && (
                                <div className="text-center py-12">
                                    <span className="material-symbols-outlined text-4xl text-forest mb-2">search_off</span>
                                    <p className="text-sm font-bold text-forest">No specialists found</p>
                                    <p className="text-xs text-forest mt-1">Try adjusting your search or filters</p>
                                </div>
                            )}
                            {filtered.map(function (s, i) {
                                return <SpecialistCard key={i} specialist={s} index={specialists.indexOf(s)} />;
                            })}
                        </div>
                    )}
                </div>
            </main>
        </Layout>
    );
};

window.SpecialistDirectoryPage = SpecialistDirectoryPage;