<?php
declare(strict_types=1);
// ==================================================
// Nuclear Fancy Pants Edition™ -- NUCLEAR+++
// File: /home/ploi/automarketer-ai.com/public/wp-content/plugins/automarketer-ai/templates/social/yelp-picker.php
// Description: Yelp business picker - shown after OAuth, before business is selected - NUCLEAR+++
// Last Edited: 2026-05-27
// ==================================================

namespace AutoMarketerAI;

defined('ABSPATH') || exit;
?>
<div class="amai-fb-connect-area">
    <div class="amai-fb-connect-shell">

        <div class="amai-fb-connect-hero">
            <div class="amai-fb-connect-icon" style="background:#FF1A1A1a;border-radius:14px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-9l7 4.5-7 4.5z" fill="#FF1A1A"/>
                </svg>
            </div>
            <h2 class="amai-fb-connect-heading">Find your Yelp Business</h2>
            <p class="amai-fb-connect-subheading">Search for your business by name and location to complete the connection.</p>
        </div>

        <div id="amai-yelp-picker-wrap" style="max-width:520px;margin:0 auto;">
            <div style="display:flex;gap:12px;margin-bottom:16px;">
                <input type="text" id="amai-yelp-search-term" placeholder="Business name" style="flex:1;padding:10px 14px;border:1.5px solid #E7DDD5;border-radius:8px;font-size:14px;font-family:inherit;">
                <input type="text" id="amai-yelp-search-location" placeholder="City, state or zip" style="flex:1;padding:10px 14px;border:1.5px solid #E7DDD5;border-radius:8px;font-size:14px;font-family:inherit;">
                <button type="button" id="amai-yelp-search-btn" style="padding:10px 20px;background:#D97757;color:white;border:none;border-radius:8px;font-size:14px;font-family:inherit;cursor:pointer;white-space:nowrap;">Search</button>
            </div>
            <div id="amai-yelp-results" style="display:none;"></div>
            <div id="amai-yelp-status" style="font-size:14px;color:#78716C;text-align:center;padding:12px 0;"></div>
        </div>

    </div>
</div>

<script>
(function () {
    var searchBtn  = document.getElementById('amai-yelp-search-btn');
    var termInput  = document.getElementById('amai-yelp-search-term');
    var locInput   = document.getElementById('amai-yelp-search-location');
    var resultsDiv = document.getElementById('amai-yelp-results');
    var statusDiv  = document.getElementById('amai-yelp-status');

    searchBtn.addEventListener('click', function () {
        var term = termInput.value.trim();
        var loc  = locInput.value.trim();
        if (term === '' || loc === '') {
            statusDiv.textContent = 'Please enter a business name and location.';
            return;
        }
        statusDiv.textContent = 'Searching...';
        resultsDiv.style.display = 'none';
        resultsDiv.innerHTML = '';

        var data = new FormData();
        data.append('action', 'amai_yelp_search');
        data.append('term', term);
        data.append('location', loc);
        data.append('_wpnonce', '<?php echo esc_js(wp_create_nonce('amai_yelp_search')); ?>');

        fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
            method: 'POST',
            body: data
        })
        .then(function (r) { return r.json(); })
        .then(function (res) {
            statusDiv.textContent = '';
            if (!res.success || !res.data || res.data.length === 0) {
                statusDiv.textContent = 'No businesses found. Try a different search.';
                return;
            }
            resultsDiv.style.display = 'block';
            resultsDiv.innerHTML = '';
            res.data.forEach(function (biz) {
                var row = document.createElement('div');
                row.style.cssText = 'display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid #E7DDD5;border-radius:10px;margin-bottom:10px;cursor:pointer;background:white;';
                row.innerHTML = (biz.image ? '<img src="' + biz.image + '" style="width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;">' : '<div style="width:44px;height:44px;border-radius:8px;background:#FF1A1A1a;flex-shrink:0;"></div>')
                    + '<div style="flex:1;min-width:0;">'
                    + '<div style="font-weight:700;font-size:14px;color:#1C1917;">' + biz.name + '</div>'
                    + '<div style="font-size:13px;color:#78716C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' + biz.address + '</div>'
                    + (biz.rating ? '<div style="font-size:12px;color:#D97757;margin-top:2px;">&#9733; ' + biz.rating + ' (' + biz.review_count + ' reviews)</div>' : '')
                    + '</div>'
                    + '<button type="button" style="padding:8px 16px;background:#D97757;color:white;border:none;border-radius:7px;font-size:13px;cursor:pointer;white-space:nowrap;">Select</button>';

                row.querySelector('button').addEventListener('click', function () {
                    selectBusiness(biz.id, biz.name);
                });
                resultsDiv.appendChild(row);
            });
        })
        .catch(function () {
            statusDiv.textContent = 'Search failed. Please try again.';
        });
    });

    function selectBusiness(id, name) {
        statusDiv.textContent = 'Connecting ' + name + '...';
        resultsDiv.style.display = 'none';

        var data = new FormData();
        data.append('action', 'amai_yelp_select_business');
        data.append('business_id', id);
        data.append('_wpnonce', '<?php echo esc_js(wp_create_nonce('amai_yelp_select_business')); ?>');

        fetch('<?php echo esc_url(admin_url('admin-ajax.php')); ?>', {
            method: 'POST',
            body: data
        })
        .then(function (r) { return r.json(); })
        .then(function (res) {
            if (res.success) {
                window.location.href = '<?php echo esc_url(admin_url('admin.php?page=automarketer-ai-social&channel=yelp&connected=1')); ?>';
            } else {
                statusDiv.textContent = 'Could not connect that business. Please try again.';
            }
        })
        .catch(function () {
            statusDiv.textContent = 'Connection failed. Please try again.';
        });
    }
}());
</script>