<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Simplified booking form - uses Square native booking widget
 */
?>

<?php
$yatoon_booking_template = sanitize_key((string) get_option('yatoon_booking_template', 'beauty'));
if (!in_array($yatoon_booking_template, array('clean', 'beauty', 'luxury'), true)) {
    $yatoon_booking_template = 'beauty';
}
?>
<div class="sbs-booking-container sbs-hybrid-mode yatoon-template-<?php echo esc_attr($yatoon_booking_template); ?>">
    <!-- Services Section - managed by WordPress -->
    <section class="sbs-services-section">
        <h2 class="sbs-section-title"><?php esc_html_e('Services', 'yatoon-booking-system'); ?></h2>

        <?php if (get_option('yatoon_ai_service_helper_enabled', '1') === '1') : ?>
            <?php
            $yatoon_ai_available = class_exists('YATOON_AI') && YATOON_AI::is_text_available();
            $yatoon_ai_status    = class_exists('YATOON_AI') ? YATOON_AI::status_message() : __('AI requires WordPress 7.0 or newer.', 'yatoon-booking-system');
                $yatoon_ai_display_mode = get_option('yatoon_ai_display_mode', 'collapsed');
                $yatoon_ai_frontend_title = trim((string) get_option('yatoon_ai_frontend_title', __('AI Style Assistant', 'yatoon-booking-system')));
                if ($yatoon_ai_frontend_title === '') { $yatoon_ai_frontend_title = __('AI Style Assistant', 'yatoon-booking-system'); }
                $yatoon_ai_font_size = min(24, max(11, absint(get_option('yatoon_ai_frontend_font_size', 14))));
                $yatoon_ai_text_color = sanitize_hex_color(get_option('yatoon_ai_frontend_text_color', '#111827')) ?: '#111827';
                $yatoon_ai_bg_color = sanitize_hex_color(get_option('yatoon_ai_frontend_bg_color', '#f8fafc')) ?: '#f8fafc';
                $yatoon_ai_privacy_note = trim((string) get_option('yatoon_ai_privacy_note', __('Privacy note: Please avoid sensitive, medical, or payment details.', 'yatoon-booking-system')));
                $yatoon_ai_style_attr = sprintf('--yatoon-ai-title-size:%dpx;--yatoon-ai-title-color:%s;--yatoon-ai-toggle-bg:%s;', $yatoon_ai_font_size, $yatoon_ai_text_color, $yatoon_ai_bg_color);
            ?>
            <div class="yatoon-ai-helper yatoon-ai-collapsible <?php echo $yatoon_ai_display_mode === 'collapsed' ? 'is-collapsed' : 'is-expanded'; ?>" id="yatoon-ai-service-helper" style="<?php echo esc_attr($yatoon_ai_style_attr); ?>">
                <div class="yatoon-ai-helper-header">
                    <strong><?php echo esc_html($yatoon_ai_frontend_title); ?></strong>
                        <button type="button" class="yatoon-ai-collapse" aria-label="<?php esc_attr_e('Collapse AI Assistant', 'yatoon-booking-system'); ?>">&times;</button>
                    <span><?php esc_html_e('Tell us the style, length, occasion, budget, or concerns you have. Our AI assistant will suggest services from this menu.', 'yatoon-booking-system'); ?></span>
                </div>
                    <?php if ($yatoon_ai_display_mode === 'collapsed') : ?>
                    <button type="button" class="yatoon-ai-toggle" aria-expanded="false"><?php echo esc_html($yatoon_ai_frontend_title); ?></button>
                    <?php endif; ?>
                    <div class="yatoon-ai-helper-body">
                <?php if (!$yatoon_ai_available) : ?>
                    <p class="yatoon-ai-notice"><?php echo esc_html($yatoon_ai_status); ?></p>
                <?php endif; ?>
                <textarea id="yatoon-ai-service-need" rows="2" placeholder="<?php esc_attr_e('Example: soft pink almond nails for a wedding, medium length, with simple nail art', 'yatoon-booking-system'); ?>" <?php disabled(!$yatoon_ai_available); ?>></textarea>
                    <?php if ($yatoon_ai_privacy_note !== '') : ?>
                        <p class="yatoon-ai-privacy-note"><?php echo esc_html($yatoon_ai_privacy_note); ?></p>
                    <?php endif; ?>
                <div class="yatoon-ai-helper-actions">
                    <button type="button" class="sbs-btn" id="yatoon-ai-service-submit" <?php disabled(!$yatoon_ai_available); ?>><?php esc_html_e('Ask AI for Recommendations', 'yatoon-booking-system'); ?></button>
                    <span id="yatoon-ai-service-status" aria-live="polite"></span>
                </div>
                <div class="yatoon-ai-result" id="yatoon-ai-service-result" style="display:none;"></div>
                                </div>
                </div>
        <?php endif; ?>
        
        <?php
        // Get all unique categories
        $categories = array('Featured');
        foreach ($services as $service) {
            if ($service->category && !in_array($service->category, $categories)) {
                $categories[] = $service->category;
            }
        }
        ?>
        
        <div class="sbs-category-tabs">
            <?php foreach ($categories as $index => $category) : ?>
                <button type="button" 
                        class="sbs-category-tab <?php echo $index === 0 ? 'active' : ''; ?>" 
                        data-category="<?php echo esc_attr($category); ?>">
                    <?php echo esc_html($category); ?>
                </button>
            <?php endforeach; ?>
        </div>
        
        <div class="sbs-services-list">
            <?php if (!empty($services)) : ?>
                <?php foreach ($services as $service) : 
                    $category = $service->category ?: 'Featured';
                    // phpcs:disable WordPress.DB.DirectDatabaseQuery.DirectQuery, WordPress.DB.DirectDatabaseQuery.NoCaching, WordPress.DB.PreparedSQL.InterpolatedNotPrepared, PluginCheck.Security.DirectDB.UnescapedDBParameter
                    $has_options = $wpdb->get_var($wpdb->prepare(
                        "SELECT COUNT(*) FROM {$wpdb->prefix}yatoon_service_options WHERE service_id = %d",
                        $service->id
                    )) > 0;
                ?>
                    <div class="sbs-service-item"
                         data-category="<?php echo esc_attr($category); ?>"
                         data-service-id="<?php echo esc_attr($service->id); ?>"
                         data-square-id="<?php echo esc_attr($service->square_id); ?>">
                        <div class="sbs-service-content">
                            <div class="sbs-service-info">
                                <h3 class="sbs-service-name"><?php echo esc_html($service->name); ?></h3>
                                <div class="sbs-service-meta">
                                    <span class="sbs-duration"><?php echo esc_html($service->duration_minutes); ?> min</span>
                                </div>
                                <div class="sbs-service-price">
                                    <?php if ($has_options) : ?>
                                        from $<?php echo number_format($service->price, 0); ?>
                                    <?php else : ?>
                                        $<?php echo number_format($service->price, 0); ?>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <button type="button" class="sbs-book-btn" data-square-id="<?php echo esc_attr($service->square_id); ?>">
                                <?php esc_html_e('Book', 'yatoon-booking-system'); ?>
                            </button>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else : ?>
                <p class="sbs-no-services"><?php esc_html_e('No services available.', 'yatoon-booking-system'); ?></p>
            <?php endif; ?>
        </div>
    </section>

    <!-- Square Native Booking Widget -->
    <div id="sbs-square-widget-container" style="display: none;">
        <button type="button" class="sbs-back-to-services">← <?php esc_html_e('Back to Services', 'yatoon-booking-system'); ?></button>
        <div id="square-appointments-widget"></div>
    </div>
</div>

<style>
/* Fresha-style Services List */
.sbs-hybrid-mode {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.sbs-section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000;
}

.sbs-category-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sbs-category-tab {
    padding: 8px 20px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.sbs-category-tab:hover {
    background: #f3f4f6;
}

.sbs-category-tab.active {
    background: #000;
    border-color: #000;
    color: #fff;
}

.sbs-services-list {
    display: flex;
    flex-direction: column;
}

.sbs-service-item {
    border-bottom: 1px solid #e5e7eb;
    padding: 20px 0;
    transition: background 0.2s;
}

.sbs-service-item:first-child {
    border-top: 1px solid #e5e7eb;
}

.sbs-service-item:hover {
    background: #f9fafb;
}

.sbs-service-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sbs-service-info {
    flex: 1;
}

.sbs-service-name {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 0 0 8px 0;
}

.sbs-service-meta {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 4px;
}

.sbs-service-price {
    font-size: 14px;
    color: #6b7280;
}

.sbs-book-btn {
    padding: 8px 24px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    transition: all 0.2s;
}

.sbs-book-btn:hover {
    background: #FF69B4;
    border-color: #FF69B4;
    color: #fff;
}

.sbs-back-to-services {
    margin-bottom: 20px;
    padding: 10px;
    background: none;
    border: none;
    font-size: 16px;
    color: #6b7280;
    cursor: pointer;
}

.sbs-back-to-services:hover {
    color: #000;
}

/* Square Widget Container */
#square-appointments-widget {
    min-height: 600px;
}

@media (max-width: 768px) {
    .sbs-service-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .sbs-book-btn {
        width: 100%;
    }
}
</style>

<script>
jQuery(document).ready(function($) {
    // Category filtering
    $('.sbs-category-tab').on('click', function() {
        $('.sbs-category-tab').removeClass('active');
        $(this).addClass('active');
        
        const category = $(this).data('category');
        
        $('.sbs-service-item').each(function() {
            if (category === 'Featured' || $(this).data('category') === category) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
    
    // Book button - Open Square widget
    $('.sbs-book-btn').on('click', function() {
        const serviceSquareId = $(this).data('square-id');
        
        // Hide services list
        $('.sbs-services-section').hide();
        
        // Show Square widget
        $('#sbs-square-widget-container').show();
        
        // Initialize Square widget with pre-selected service
        // Note: Square widget URL format
        const widgetUrl = 'https://square.site/book/<?php echo esc_js(get_option('yatoon_square_booking_widget_id', 's5gplmudidnxck')); ?>/<?php echo esc_js(get_option('yatoon_square_location_id')); ?>';
        
        // Load Square widget iframe
        $('#square-appointments-widget').html(
            '<iframe src="' + widgetUrl + '" style="width: 100%; height: 800px; border: none;"></iframe>'
        );
    });
    
    // Back to services
    $('.sbs-back-to-services').on('click', function() {
        $('#sbs-square-widget-container').hide();
        $('.sbs-services-section').show();
    });
});
</script>
