var _useState_CS = React.useState;
var _useEffect_CS = React.useEffect;
var _useParams_CS = ReactRouterDOM.useParams;

/**
 * ContactSpecialistPage — Send a quote request / message to a specialist.
 *
 * Shows specialist quick-view, issue description textarea, recent scan
 * attachment grid from ScanStore, quote request toggle, and send CTA.
 * Route: /specialists/:id/contact
 */
var ContactSpecialistPage = function () {
    var navigate = ReactRouterDOM.useNavigate();
    var params = _useParams_CS();
    var id = parseInt(params.id, 10);
    var store = useScanStore();

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

    var descState = _useState_CS('');
    var description = descState[0];
    var setDescription = descState[1];

    var quoteState = _useState_CS(true);
    var requestQuote = quoteState[0];
    var setRequestQuote = quoteState[1];

    var selectedState = _useState_CS({});
    var selectedScans = selectedState[0];
    var setSelectedScans = selectedState[1];

    var sentState = _useState_CS(false);
    var sent = sentState[0];
    var setSent = sentState[1];

    var contactMethodState = _useState_CS('');
    var contactMethod = contactMethodState[0];
    var setContactMethod = contactMethodState[1];

    _useEffect_CS(function () {
        SpecialistService.load()
            .then(function (data) {
                if (data[id]) setSpecialist(data[id]);
            })
            .catch(function () {});
    }, [id]);

    var toggleScan = function (scanId) {
        setSelectedScans(function (prev) {
            var next = {};
            for (var k in prev) { next[k] = prev[k]; }
            if (next[scanId]) {
                delete next[scanId];
            } else {
                next[scanId] = true;
            }
            return next;
        });
    };

    var handleSend = function () {
        AnalyticsService.contactProfessionalSubmitted({
            specialist_category: specialist ? (specialist.Category || 'unknown') : 'unknown',
            has_scan_attached:   Object.keys(selectedScans).length > 0,
            contact_method:      contactMethod || 'not_selected',
        });
        setSent(true);
        setTimeout(function () {
            navigate('/specialists/' + id);
        }, 2000);
    };

    if (!specialist) {
        return (
            <Layout>
                <main className="flex-1 overflow-y-auto overflow-x-hidden pb-10">
                    <PageHeader title="Contact" 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'];

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

                    {/* Success Toast */}
                    {sent && (
                        <div className="mt-4 bg-primary text-white p-4 rounded-xl shadow-soft flex items-center gap-3 animate-pulse">
                            <span className="material-symbols-outlined">check_circle</span>
                            <p className="font-bold text-sm">Request sent successfully!</p>
                        </div>
                    )}

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

                    {/* Issue Details */}
                    <section className="mt-5">
                        <h3 className="text-sm font-extrabold text-forest mb-2">Describe Your Issue</h3>
                        <textarea
                            className="w-full min-h-[120px] p-4 rounded-xl border border-stone-200 bg-surface text-forest text-sm font-medium placeholder:text-sage focus:ring-2 focus:ring-primary focus:border-transparent transition-all resize-none"
                            placeholder="Briefly describe the mould issue, affected areas, and any symptoms you've noticed..."
                            value={description}
                            onChange={function (e) { setDescription(e.target.value); }}
                        ></textarea>
                    </section>

                    {/* Attach Scans */}
                    <ScanSelector
                        selected={selectedScans}
                        onToggle={toggleScan}
                        rows={3}
                        title="Attach Scans"
                    />

                    {/* Preferred Contact Method */}
                    <section className="mt-5">
                        <h3 className="text-sm font-extrabold text-forest mb-2">Preferred Contact</h3>
                        <div className="space-y-2">
                            {['Phone Call', 'Email', 'SMS'].map(function (method) {
                                return (
                                    <label key={method} className="flex items-center gap-3 p-3 rounded-xl bg-background-light border border-stone-200 cursor-pointer btn-nature hover:border-primary/50 transition-colors">
                                        <input
                                            type="radio"
                                            name="contact-method"
                                            className="w-4 h-4 text-sage focus:bg-forest focus:ring-primary"
                                            checked={contactMethod === method}
                                            onChange={function () { setContactMethod(method); }}
                                        />
                                        <span className="text-sm font-bold text-forest">{method}</span>
                                    </label>
                                );
                            })}
                        </div>
                    </section>

                    {/* Quote Request Toggle */}
                    <section className="mt-5">
                        <label
                            className="flex items-center gap-3 p-4 rounded-xl bio-bg bio-bg-40 cursor-pointer btn-nature"
                            onClick={function () { setRequestQuote(!requestQuote); }}
                        >
                            <div className={'w-5 h-5 rounded flex items-center justify-center border-2 transition-colors ' + (requestQuote ? 'bg-primary border-primary' : 'border-stone-300')}>
                                {requestQuote && <span className="material-symbols-outlined text-white text-sm">check</span>}
                            </div>
                            <div>
                                <p className="font-extrabold text-sm text-forest">Request a quote</p>
                                <p className="text-xs text-forest/50 font-medium">Receive a pricing estimate for the consultation</p>
                            </div>
                        </label>
                    </section>
                    {/* Send Request */}
                    <section className="mt-5 mb-4">
                        <button
                            onClick={handleSend}
                            disabled={sent}
                            className={'w-full font-extrabold py-4 rounded-xl shadow-soft btn-nature flex items-center justify-center gap-2 transition-all ' +
                                (sent ? 'bg-primary/50 text-white/70' : 'bg-forest text-white hover:bg-primary')}
                        >
                            <span>{sent ? 'Sent!' : 'Send Request'}</span>
                            <span className="material-symbols-outlined text-lg">{sent ? 'check' : 'send'}</span>
                        </button>
                    </section>
                </div>
            </main>
        </Layout>
    );
};

window.ContactSpecialistPage = ContactSpecialistPage;