var _useState_LP = React.useState;
var _useEffect_LP = React.useEffect;
var _useCallback_LP = React.useCallback;

/**
 * LocationPicker — Reusable location selection component.
 *
 * Displays the user's detected or manually entered location.
 * Supports GPS via GeoLocationService and manual address search
 * via OpenStreetMap Nominatim forward geocoding.
 *
 * Props:
 *   onLocationChange (function) — Called with displayName string when location updates
 */
var LocationPicker = function (props) {
    var onLocationChange = props.onLocationChange;

    var locationState = _useState_LP('');
    var location = locationState[0];
    var setLocation = locationState[1];

    var expandedState = _useState_LP(false);
    var expanded = expandedState[0];
    var setExpanded = expandedState[1];

    var loadingState = _useState_LP(false);
    var detecting = loadingState[0];
    var setDetecting = loadingState[1];

    var manualState = _useState_LP('');
    var manualQuery = manualState[0];
    var setManualQuery = manualState[1];

    var searchingState = _useState_LP(false);
    var searching = searchingState[0];
    var setSearching = searchingState[1];

    var errorState = _useState_LP('');
    var error = errorState[0];
    var setError = errorState[1];

    // Auto-detect on mount
    _useEffect_LP(function () {
        detectLocation();
    }, []);

    var updateLocation = _useCallback_LP(function (displayName) {
        setLocation(displayName);
        if (onLocationChange) onLocationChange(displayName);
    }, [onLocationChange]);

    var detectLocation = function () {
        setDetecting(true);
        setError('');
        GeoLocationService.getLocalArea()
            .then(function (geo) {
                updateLocation(geo.displayName);
                setDetecting(false);
                setExpanded(false);
            })
            .catch(function (err) {
                setError(err.message || 'Could not detect location.');
                setDetecting(false);
            });
    };

    var searchAddress = function () {
        if (!manualQuery.trim()) return;
        setSearching(true);
        setError('');
        var url = 'https://nominatim.openstreetmap.org/search' +
            '?q=' + encodeURIComponent(manualQuery.trim()) +
            '&format=json&addressdetails=1&limit=1';

        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(function (res) {
                if (!res.ok) throw new Error('Search failed');
                return res.json();
            })
            .then(function (results) {
                if (!results || results.length === 0) {
                    setError('No results found. Try a different address.');
                    setSearching(false);
                    return;
                }
                var r = results[0];
                var parsed = GeoLocationService.parseAddress(r);
                var displayName = parsed.displayName || manualQuery;
                updateLocation(displayName);
                setManualQuery('');
                setSearching(false);
                setExpanded(false);
            })
            .catch(function () {
                setError('Search failed. Please try again.');
                setSearching(false);
            });
    };

    var handleKeyDown = function (e) {
        if (e.key === 'Enter') searchAddress();
    };

    return (
        <section className="mt-4 mb-3">
            <div className="bio-bg bio-bg-30 p-4 rounded-xl shadow-soft border border-stone-100/50">
                {/* Header row */}
                <div className="flex items-center justify-between mb-1">
                    <span className="text-[10px] font-black text-forest/50 uppercase tracking-[0.15em]">Your Location</span>
                </div>

                {/* Current location display */}
                <div className="flex items-center gap-2">
                    <span className="material-symbols-outlined text-forest text-lg" style={{ fontVariationSettings: "'FILL' 1" }}>location_on</span>
                    {detecting ? (
                        <span className="text-sm font-bold text-forest/60">Detecting location...</span>
                    ) : location ? (
                        <span className="text-sm font-bold text-forest">{location}</span>
                    ) : (
                        <span className="text-sm font-bold text-forest/50">Location not set</span>
                    )}
                    <button
                        onClick={function () { setExpanded(!expanded); setError(''); }}
                        className="p-1 rounded-full hover:bg-forest/10 transition-colors ml-auto shrink-0"
                    >
                        <span className="material-symbols-outlined text-forest text-lg">{expanded ? 'close' : 'edit'}</span>
                    </button>
                </div>

                {/* Expandable picker */}
                {expanded && (
                    <div className="mt-3 space-y-2">
                        {/* Use current location button */}
                        <button
                            onClick={detectLocation}
                            disabled={detecting}
                            className="flex items-center gap-3 w-full p-3 bg-surface rounded-xl border border-stone-100/50 btn-nature hover:bg-forest hover:text-white group transition-all text-left"
                        >
                            <span
                                className="material-symbols-outlined text-primary group-hover:text-white transition-colors"
                                style={{ fontVariationSettings: "'FILL' 1" }}
                            >my_location</span>
                            <div>
                                <p className="font-bold text-sm text-forest group-hover:text-white transition-colors">
                                    {detecting ? 'Detecting...' : 'Use My Current Location'}
                                </p>
                                <p className="text-[10px] text-forest/50 group-hover:text-accent/60 transition-colors">GPS detection</p>
                            </div>
                            {detecting && (
                                <div className="ml-auto w-5 h-5 rounded-full border-2 border-primary/30 border-t-primary animate-spin shrink-0"></div>
                            )}
                        </button>

                        {/* Manual address search */}
                        <div className="relative">
                            <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-forest/40 text-lg pointer-events-none">search</span>
                            <input
                                type="text"
                                className="w-full pl-10 pr-16 py-3 bg-surface border border-stone-100/50 rounded-xl text-sm font-medium text-forest placeholder:text-forest/40 focus:outline-none focus:ring-2 focus:ring-primary"
                                placeholder="Enter suburb or address..."
                                value={manualQuery}
                                onChange={function (e) { setManualQuery(e.target.value); }}
                                onKeyDown={handleKeyDown}
                            />
                            {manualQuery.trim() && (
                                <button
                                    onClick={searchAddress}
                                    disabled={searching}
                                    className="absolute right-2 top-1/2 -translate-y-1/2 bg-forest text-white px-3 py-1.5 rounded-lg text-xs font-bold btn-nature hover:bg-primary transition-colors"
                                >
                                    {searching ? '...' : 'Go'}
                                </button>
                            )}
                        </div>

                        {/* Error message */}
                        {error && (
                            <p className="text-xs font-medium text-terracotta flex items-center gap-1 px-1">
                                <span className="material-symbols-outlined text-sm">warning</span>
                                {error}
                            </p>
                        )}
                    </div>
                )}
            </div>
        </section>
    );
};

window.LocationPicker = LocationPicker;