var _Link_SP = ReactRouterDOM.Link;
var _useState_SP = React.useState;
var _useEffect_SP = React.useEffect;
var _useParams_SP = ReactRouterDOM.useParams;

/**
 * SpecialistProfilePage — Detailed specialist profile view.
 *
 * Loads specialist by index from the JSON data file.
 * Shows identity, badges, services, reviews, and action CTAs.
 * Route: /specialists/:id
 */
var SpecialistProfilePage = function () {
    var navigate = ReactRouterDOM.useNavigate();
    var params = _useParams_SP();
    var id = parseInt(params.id, 10);

    var dataState = _useState_SP(null);
    var specialist = dataState[0];
    var setSpecialist = dataState[1];

    var allState = _useState_SP([]);
    var allSpecialists = allState[0];
    var setAllSpecialists = allState[1];

    _useEffect_SP(function () {
        SpecialistService.load()
            .then(function (data) {
                setAllSpecialists(data);
                if (data[id]) {
                    setSpecialist(data[id]);
                    AnalyticsService.specialistProfileViewed({ specialist_category: data[id].Category || 'unknown', specialist_city: data[id].City || 'unknown' });
                }
            })
            .catch(function () {});
    }, [id]);

    // Derive services from category
    var getServices = function (cat) {
        var base = [cat];
        if (cat.indexOf('Remediation') !== -1) return base.concat(['Mould Removal', 'Structural Drying', 'Prevention Plan']);
        if (cat.indexOf('Cleaning') !== -1) return base.concat(['Surface Treatment', 'Deep Clean', 'Sanitisation']);
        if (cat.indexOf('Inspection') !== -1) return base.concat(['Visual Assessment', 'Moisture Mapping', 'Report & Recommendations']);
        if (cat.indexOf('Testing') !== -1) return base.concat(['Air Sampling', 'Surface Swabs', 'Lab Analysis']);
        if (cat.indexOf('Air Quality') !== -1) return base.concat(['HVAC Inspection', 'Particulate Testing', 'Ventilation Audit']);
        if (cat.indexOf('Lab') !== -1 || cat.indexOf('Mycology') !== -1) return base.concat(['Species Identification', 'Culture Analysis', 'Toxicity Report']);
        return base;
    };


    // Badges
    var badges = [
        { icon: 'verified_user', label: 'Licensed' },
        { icon: 'gpp_good', label: 'Insured' },
        { icon: 'history', label: 'Experienced' },
        { icon: 'health_and_safety', label: 'Safe Methods' },
    ];

    if (!specialist) {
        return (
            <Layout>
                <main className="flex-1 overflow-y-auto overflow-x-hidden pb-36">
                    <PageHeader title="Specialist" showBack={true} showMenu={true} />
                    <div className="px-6">
                        <div className="flex items-center justify-center py-20">
                            <div className="w-10 h-10 rounded-full border-4 border-primary/20 border-t-primary animate-spin"></div>
                        </div>
                    </div>
                </main>
            </Layout>
        );
    }

    var name = specialist['Company Name'];
    var services = getServices(specialist.Category);

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

                    {/* Identity Hero */}
                    <SpecialistIdentity specialist={specialist} />

                    {/* Primary Actions */}
                    <section className="flex w-full gap-3 px-0 -mt-2 mb-4">
                            {specialist.Phone && (
                                <a
                                    href={'tel:' + specialist.Phone}
                                    className="flex-1 flex items-center justify-center gap-2 bg-forest text-white rounded-xl h-12 font-bold shadow-soft btn-nature hover:bg-primary transition-colors"
                                >
                                    <span className="material-symbols-outlined text-lg">call</span>
                                    <span className="text-sm">Call Now</span>
                                </a>
                            )}
                            <button
                                onClick={function () {
                                    if (specialist) { AnalyticsService.contactProfessionalInitiated({ specialist_category: specialist.Category || 'unknown' }); }
                                    navigate('/specialists/' + id + '/contact');
                                }}
                                className="flex-1 flex items-center justify-center gap-2 bg-background-light text-forest rounded-xl h-12 font-bold btn-nature hover:text-white hover:bg-forest transition-colors border border-forest-200"
                            >
                                <span className="material-symbols-outlined text-lg">chat_bubble</span>
                                <span className="text-sm">Request Quote</span>
                            </button>
                    </section>

                    {/* Badges */}
                    <section className="py-4 overflow-x-auto no-scrollbar">
                        <div className="flex gap-8 items-center">
                            {badges.map(function (b) {
                                return (
                                    <div key={b.icon} className="flex flex-col items-center min-w-[72px]">
                                        <div className="w-11 h-11 rounded-full bg-white flex items-center justify-center mb-1">
                                            <span className="material-symbols-outlined text-forest text-lg">{b.icon}</span>
                                        </div>
                                        <span className="text-[9px] uppercase tracking-wider font-black text-forest text-center">{b.label}</span>
                                    </div>
                                );
                            })}
                        </div>
                    </section>

                    {/* Contact Details */}
                    <section className="mb-4">
                        <h3 className="text-base font-extrabold text-forest mb-3 flex items-center gap-2">
                            <span className="material-symbols-outlined text-forest text-lg">contact_page</span>
                            Contact Details
                        </h3>
                        <div className="bio-bg bio-bg-10 rounded-xl p-4 shadow-soft border border-stone-100/50 space-y-3">
                            {specialist.Address && (
                                <div className="flex items-start gap-3">
                                    <span className="material-symbols-outlined text-forest text-lg mt-0.5">location_on</span>
                                    <p className="text-sm text-forest/80 font-medium">{specialist.Address}</p>
                                </div>
                            )}
                            {specialist.Phone && (
                                <div className="flex items-center gap-3">
                                    <span className="material-symbols-outlined text-forest text-lg">call</span>
                                    <a href={'tel:' + specialist.Phone} className="text-sm text-primary font-bold">{specialist.Phone}</a>
                                </div>
                            )}
                            {specialist.Website && (
                                <div className="flex items-center gap-3">
                                    <span className="material-symbols-outlined text-forest text-lg">language</span>
                                    <a href={specialist.Website} target="_blank" rel="noopener noreferrer" className="text-sm text-primary font-bold truncate">{specialist.Website.replace(/^https?:\/\//, '').replace(/\/$/, '')}</a>
                                </div>
                            )}
                            {specialist.Email && specialist.Email.indexOf('@') !== -1 && specialist.Email.indexOf('.webp') === -1 && (
                                <div className="flex items-center gap-3">
                                    <span className="material-symbols-outlined text-forest text-lg">mail</span>
                                    <a href={'mailto:' + specialist.Email} className="text-sm text-primary font-bold">{specialist.Email}</a>
                                </div>
                            )}
                        </div>
                    </section>

                    {/* Services */}
                    <section className="mb-4">
                        <h3 className="text-base font-extrabold text-forest mb-3 flex items-center gap-2">
                            <span className="material-symbols-outlined text-forest text-lg">list_alt</span>
                            Services Offered
                        </h3>
                        <div className="flex gap-2 flex-wrap">
                            {services.map(function (svc) {
                                return (
                                    <span key={svc} className="px-3 py-1.5 rounded-full bg-forest/10 text-forest text-xs font-bold border border-forest/20">
                                        {svc}
                                    </span>
                                );
                            })}
                        </div>
                    </section>

                    {/* Reviews — hidden until real data source available */}
                    <SpecialistReviews specialistName={name} visible={false} />

                    {/* Bottom CTA */}
                    <section className="mb-4">
                        <button
                            onClick={function () { navigate('/specialists/' + id + '/contact'); }}
                            className="w-full bg-forest text-white font-extrabold py-4 rounded-xl shadow-soft btn-nature hover:bg-primary transition-colors flex items-center justify-center gap-2"
                        >
                            <span>Request a Quote</span>
                            <span className="material-symbols-outlined text-lg">send</span>
                        </button>
                    </section>
                </div>
            </main>
        </Layout>
    );
};

window.SpecialistProfilePage = SpecialistProfilePage;