<?php
/**
 * Visual Settings Template (Solo Mode)
 *
 * Extracted from the vendor settings template — contains only the Visual
 * customization panel (colors + client-facing texts).
 *
 * @package WahraRentalsBookings
 */

defined('ABSPATH') || exit;

$vendor_id = get_current_user_id();
$vendor_settings = get_user_meta($vendor_id, '_wahrb_vendor_settings', true) ?: [];

// Handle form submission
if (isset($_POST['wahrb_visual_settings_nonce']) && wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['wahrb_visual_settings_nonce'])), 'wahrb_save_visual_settings')) {
    // Preserve existing settings, only update visual fields
    $new_settings = $vendor_settings;

    // Color customization
    $new_settings['modal_header_color'] = isset($_POST['modal_header_color']) ? sanitize_hex_color(wp_unslash($_POST['modal_header_color'])) : '#2563eb';
    $new_settings['modal_button_color'] = isset($_POST['modal_button_color']) ? sanitize_hex_color(wp_unslash($_POST['modal_button_color'])) : '#2563eb';
    $new_settings['modal_text_color'] = isset($_POST['modal_text_color']) ? sanitize_hex_color(wp_unslash($_POST['modal_text_color'])) : '#ffffff';

    // Client-facing text customization
    $new_settings['client_texts'] = [
        'book_button' => isset($_POST['client_book_button']) ? sanitize_text_field(wp_unslash($_POST['client_book_button'])) : '',
        'modal_title' => isset($_POST['client_modal_title']) ? sanitize_text_field(wp_unslash($_POST['client_modal_title'])) : '',
        'success_title' => isset($_POST['client_success_title']) ? sanitize_text_field(wp_unslash($_POST['client_success_title'])) : '',
        'success_message' => isset($_POST['client_success_message']) ? sanitize_textarea_field(wp_unslash($_POST['client_success_message'])) : '',
        'terms_text' => isset($_POST['client_terms_text']) ? sanitize_text_field(wp_unslash($_POST['client_terms_text'])) : '',
        'submit_button' => isset($_POST['client_submit_button']) ? sanitize_text_field(wp_unslash($_POST['client_submit_button'])) : '',
    ];

    update_user_meta($vendor_id, '_wahrb_vendor_settings', $new_settings);
    $vendor_settings = $new_settings;

    echo '<div class="wahrb-alert wahrb-alert-success"><span class="wahrb-alert-icon">✓</span>' . esc_html__('Settings saved successfully.', 'wahra-rentals-bookings') . '</div>';
}
?>

<form method="post" action="" class="wahrb-settings-form">
    <?php wp_nonce_field('wahrb_save_visual_settings', 'wahrb_visual_settings_nonce'); ?>

    <!-- Visual Customization Section -->
    <div class="wahrb-card">
        <div class="wahrb-card-header">
            <h3>
                <span class="wahrb-card-icon">🎨</span>
                <?php esc_html_e('Visual Customization', 'wahra-rentals-bookings'); ?>
            </h3>
        </div>
        <div class="wahrb-card-body">
            <p class="wahrb-field-help" style="margin-bottom: 1rem;">
                <?php esc_html_e('Customize reservation window colors to match your brand image.', 'wahra-rentals-bookings'); ?>
            </p>
            
            <!-- Live Preview -->
            <div class="wahrb-color-preview" id="wahrb-color-preview">
                <div class="wahrb-preview-header" id="preview-header"
                     style="background:<?php echo esc_attr($vendor_settings['modal_header_color'] ?? '#2563eb'); ?>;color:<?php echo esc_attr($vendor_settings['modal_text_color'] ?? '#ffffff'); ?>;">
                    <?php esc_html_e('Header preview', 'wahra-rentals-bookings'); ?>
                </div>
                <div class="wahrb-preview-body">
                    <button type="button" class="wahrb-preview-btn" id="preview-button"
                            style="background:<?php echo esc_attr($vendor_settings['modal_button_color'] ?? '#2563eb'); ?>;color:<?php echo esc_attr($vendor_settings['modal_text_color'] ?? '#ffffff'); ?>;">
                        <?php esc_html_e('Example button', 'wahra-rentals-bookings'); ?>
                    </button>
                </div>
            </div>

            <!-- Color Controls -->
            <div class="wahrb-color-controls-grid">
                <!-- Header Color -->
                <div class="wahrb-color-control">
                    <span class="wahrb-color-label">🎨 <?php esc_html_e('Header', 'wahra-rentals-bookings'); ?></span>
                    <input type="color"
                           name="modal_header_color"
                           id="modal_header_color"
                           class="wahrb-color-swatch"
                           value="<?php echo esc_attr($vendor_settings['modal_header_color'] ?? '#2563eb'); ?>">
                    <input type="text"
                           id="header-color-hex"
                           class="wahrb-color-hex"
                           value="<?php echo esc_attr($vendor_settings['modal_header_color'] ?? '#2563eb'); ?>">
                </div>

                <!-- Button Color -->
                <div class="wahrb-color-control">
                    <span class="wahrb-color-label">🔘 <?php esc_html_e('Button', 'wahra-rentals-bookings'); ?></span>
                    <input type="color"
                           name="modal_button_color"
                           id="modal_button_color"
                           class="wahrb-color-swatch"
                           value="<?php echo esc_attr($vendor_settings['modal_button_color'] ?? '#2563eb'); ?>">
                    <input type="text"
                           id="button-color-hex"
                           class="wahrb-color-hex"
                           value="<?php echo esc_attr($vendor_settings['modal_button_color'] ?? '#2563eb'); ?>">
                </div>

                <!-- Text Color -->
                <div class="wahrb-color-control">
                    <span class="wahrb-color-label">✏️ <?php esc_html_e('Text', 'wahra-rentals-bookings'); ?></span>
                    <input type="color"
                           name="modal_text_color"
                           id="modal_text_color"
                           class="wahrb-color-swatch"
                           value="<?php echo esc_attr($vendor_settings['modal_text_color'] ?? '#ffffff'); ?>">
                    <input type="text"
                           id="text-color-hex"
                           class="wahrb-color-hex"
                           value="<?php echo esc_attr($vendor_settings['modal_text_color'] ?? '#ffffff'); ?>">
                </div>
            </div>
        </div>
    </div>

    <!-- Client Display Texts Section -->
    <div class="wahrb-card" style="margin-top: 20px;">
        <div class="wahrb-card-header">
            <h3>
                <span class="wahrb-card-icon">💬</span>
                <?php esc_html_e('Client Display Texts', 'wahra-rentals-bookings'); ?>
            </h3>
        </div>
        <div class="wahrb-card-body">
            <p class="wahrb-field-help" style="margin-bottom: 1rem;">
                <?php esc_html_e('Customize the texts displayed to clients in the booking interface. Leave empty to use default values.', 'wahra-rentals-bookings'); ?>
            </p>
            
            <?php 
            $client_texts = $vendor_settings['client_texts'] ?? [];
            ?>
            
            <div class="wahrb-fields-grid">
                <!-- Book Button Text -->
                <div class="wahrb-field">
                    <label for="client_book_button">
                        <?php esc_html_e('Book Button', 'wahra-rentals-bookings'); ?>
                    </label>
                    <input type="text" 
                           id="client_book_button" 
                           name="client_book_button" 
                           value="<?php echo esc_attr($client_texts['book_button'] ?? ''); ?>"
                           placeholder="<?php esc_attr_e('Book Now', 'wahra-rentals-bookings'); ?>"
                           class="wahrb-input wahrb-input-full">
                </div>
                
                <!-- Modal Title -->
                <div class="wahrb-field">
                    <label for="client_modal_title">
                        <?php esc_html_e('Modal Title', 'wahra-rentals-bookings'); ?>
                    </label>
                    <input type="text" 
                           id="client_modal_title" 
                           name="client_modal_title" 
                           value="<?php echo esc_attr($client_texts['modal_title'] ?? ''); ?>"
                           placeholder="<?php esc_attr_e('Booking Request', 'wahra-rentals-bookings'); ?>"
                           class="wahrb-input wahrb-input-full">
                </div>
                
                <!-- Success Title -->
                <div class="wahrb-field">
                    <label for="client_success_title">
                        <?php esc_html_e('Success Title', 'wahra-rentals-bookings'); ?>
                    </label>
                    <input type="text" 
                           id="client_success_title" 
                           name="client_success_title" 
                           value="<?php echo esc_attr($client_texts['success_title'] ?? ''); ?>"
                           placeholder="<?php esc_attr_e('Request sent!', 'wahra-rentals-bookings'); ?>"
                           class="wahrb-input wahrb-input-full">
                </div>
                
                <!-- Submit Button -->
                <div class="wahrb-field">
                    <label for="client_submit_button">
                        <?php esc_html_e('Submit Button', 'wahra-rentals-bookings'); ?>
                    </label>
                    <input type="text" 
                           id="client_submit_button" 
                           name="client_submit_button" 
                           value="<?php echo esc_attr($client_texts['submit_button'] ?? ''); ?>"
                           placeholder="<?php esc_attr_e('Send request', 'wahra-rentals-bookings'); ?>"
                           class="wahrb-input wahrb-input-full">
                </div>
                
                <!-- Terms Text -->
                <div class="wahrb-field wahrb-field-full">
                    <label for="client_terms_text">
                        <?php esc_html_e('Terms Checkbox Text', 'wahra-rentals-bookings'); ?>
                    </label>
                    <input type="text" 
                           id="client_terms_text" 
                           name="client_terms_text" 
                           value="<?php echo esc_attr($client_texts['terms_text'] ?? ''); ?>"
                           placeholder="<?php esc_attr_e('I accept the booking terms and conditions', 'wahra-rentals-bookings'); ?>"
                           class="wahrb-input wahrb-input-full">
                </div>
                
                <!-- Success Message -->
                <div class="wahrb-field wahrb-field-full">
                    <label for="client_success_message">
                        <?php esc_html_e('Success Message', 'wahra-rentals-bookings'); ?>
                    </label>
                    <textarea id="client_success_message" 
                              name="client_success_message" 
                              rows="3"
                              placeholder="<?php esc_attr_e('The owner will contact you very soon to confirm your booking.', 'wahra-rentals-bookings'); ?>"
                              class="wahrb-input wahrb-input-full"><?php echo esc_textarea($client_texts['success_message'] ?? ''); ?></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="wahrb-form-actions" style="margin-top: 20px;">
        <button type="submit" class="wahrb-btn wahrb-btn-primary wahrb-btn-lg">
            <?php esc_html_e('Save settings', 'wahra-rentals-bookings'); ?>
        </button>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Color picker synchronization
    function updatePreview() {
        var headerColor = document.getElementById('modal_header_color').value;
        var buttonColor = document.getElementById('modal_button_color').value;
        var textColor = document.getElementById('modal_text_color').value;
        var previewHeader = document.getElementById('preview-header');
        var previewButton = document.getElementById('preview-button');
        if (previewHeader) {
            previewHeader.style.backgroundColor = headerColor;
            previewHeader.style.color = textColor;
        }
        if (previewButton) {
            previewButton.style.backgroundColor = buttonColor;
            previewButton.style.color = textColor;
        }
    }

    // Bind native color inputs to hex text + preview
    document.querySelectorAll('.wahrb-color-swatch').forEach(function(swatch) {
        var hex = swatch.nextElementSibling;
        swatch.addEventListener('input', function() {
            hex.value = this.value;
            updatePreview();
        });
    });

    // Bind hex text inputs back to native color + preview
    document.querySelectorAll('.wahrb-color-hex').forEach(function(hex) {
        var swatch = hex.previousElementSibling;
        hex.addEventListener('input', function() {
            if (/^#[0-9A-Fa-f]{6}$/.test(this.value)) {
                swatch.value = this.value;
                updatePreview();
            }
        });
    });

    // Initial preview update
    updatePreview();
});
</script>
