<?php
/**
 * Template vars:
 * - $left_model
 * - $right_model
 * - $left_label
 * - $right_label
 * - $preset
 * - $background
 * - $sync_enabled
 * - $wireframe_enabled
 * - $trace_id
 * - $loading_mode
 */

if (! defined('ABSPATH')) {
    exit;
}

$modelora_left_viewer_attrs = [
    'class' => 'modelora-model-viewer modelora-compare-model',
    'camera-controls' => 'true',
    'camera-orbit' => '0deg 75deg auto',
    'camera-target' => 'auto auto auto',
    'field-of-view' => 'auto',
    'interaction-prompt' => 'none',
    'touch-action' => 'pan-y',
    'shadow-intensity' => '1',
    'loading' => $loading_mode,
    'reveal' => 'auto',
    'data-side' => 'left',
    'data-preset' => $preset,
    'data-trace-id' => $trace_id,
    'data-model-id' => (string) ($left_model['model_id'] ?? 0),
    'data-wireframe-default' => $wireframe_enabled,
];

if (! empty($left_model['success'])) {
    $modelora_left_viewer_attrs['src'] = $left_model['file_url'];
}

$modelora_right_viewer_attrs = [
    'class' => 'modelora-model-viewer modelora-compare-model',
    'camera-controls' => 'true',
    'camera-orbit' => '0deg 75deg auto',
    'camera-target' => 'auto auto auto',
    'field-of-view' => 'auto',
    'interaction-prompt' => 'none',
    'touch-action' => 'pan-y',
    'shadow-intensity' => '1',
    'loading' => $loading_mode,
    'reveal' => 'auto',
    'data-side' => 'right',
    'data-preset' => $preset,
    'data-trace-id' => $trace_id,
    'data-model-id' => (string) ($right_model['model_id'] ?? 0),
    'data-wireframe-default' => $wireframe_enabled,
];

if (! empty($right_model['success'])) {
    $modelora_right_viewer_attrs['src'] = $right_model['file_url'];
}
?>

<div
    class="modelora-compare-shell"
    data-trace-id="<?php echo esc_attr($trace_id); ?>"
    data-sync-default="<?php echo esc_attr($sync_enabled); ?>"
    data-wireframe-default="<?php echo esc_attr($wireframe_enabled); ?>"
>
    <div class="modelora-compare-controls" role="group" aria-label="Comparison Controls">
        <button type="button" class="modelora-btn" data-modelora-action="compare-sync-toggle">
            <?php echo $sync_enabled === '1' ? esc_html__('Sync On', 'modelora-3d-product-viewer') : esc_html__('Independent', 'modelora-3d-product-viewer'); ?>
        </button>
        <button type="button" class="modelora-btn" data-modelora-action="compare-wireframe-toggle"><?php esc_html_e('Wireframe', 'modelora-3d-product-viewer'); ?></button>
        <label class="modelora-compare-select-label">
            <span><?php esc_html_e('Lighting', 'modelora-3d-product-viewer'); ?></span>
            <select data-modelora-action="compare-preset" class="modelora-compare-select">
                <option value="studio" <?php selected($preset, 'studio'); ?>><?php esc_html_e('Studio', 'modelora-3d-product-viewer'); ?></option>
                <option value="outdoor" <?php selected($preset, 'outdoor'); ?>><?php esc_html_e('Outdoor', 'modelora-3d-product-viewer'); ?></option>
                <option value="dark" <?php selected($preset, 'dark'); ?>><?php esc_html_e('Dark', 'modelora-3d-product-viewer'); ?></option>
            </select>
        </label>
        <label class="modelora-compare-color-label">
            <span><?php esc_html_e('Background', 'modelora-3d-product-viewer'); ?></span>
            <input type="color" class="modelora-compare-color" data-modelora-action="compare-bg" value="<?php echo esc_attr($background); ?>" />
        </label>
    </div>

    <div class="modelora-compare-grid">
        <section class="modelora-compare-panel" data-side="left">
            <div class="modelora-compare-stage" style="--modelora-compare-bg: <?php echo esc_attr($background); ?>;">
                <div class="modelora-compare-loading" data-modelora-loading>
                    <span><?php esc_html_e('Loading model...', 'modelora-3d-product-viewer'); ?></span>
                </div>
                <?php if (! empty($left_model['success'])) : ?>
                    <model-viewer
                        <?php foreach ($modelora_left_viewer_attrs as $modelora_key => $modelora_value) : ?>
                            <?php echo esc_attr((string) $modelora_key); ?>="<?php echo esc_attr((string) $modelora_value); ?>"
                        <?php endforeach; ?>
                    ></model-viewer>
                <?php else : ?>
                    <p class="modelora-friendly-error"><?php echo esc_html((string) ($left_model['error'] ?? __('Left model could not be loaded.', 'modelora-3d-product-viewer'))); ?></p>
                <?php endif; ?>
                <button type="button" class="modelora-btn modelora-compare-fullscreen" data-modelora-action="compare-fullscreen" data-side="left"><?php esc_html_e('Fullscreen', 'modelora-3d-product-viewer'); ?></button>
            </div>
            <p class="modelora-compare-caption"><?php echo esc_html($left_label); ?></p>
        </section>

        <section class="modelora-compare-panel" data-side="right">
            <div class="modelora-compare-stage" style="--modelora-compare-bg: <?php echo esc_attr($background); ?>;">
                <div class="modelora-compare-loading" data-modelora-loading>
                    <span><?php esc_html_e('Loading model...', 'modelora-3d-product-viewer'); ?></span>
                </div>
                <?php if (! empty($right_model['success'])) : ?>
                    <model-viewer
                        <?php foreach ($modelora_right_viewer_attrs as $modelora_key => $modelora_value) : ?>
                            <?php echo esc_attr((string) $modelora_key); ?>="<?php echo esc_attr((string) $modelora_value); ?>"
                        <?php endforeach; ?>
                    ></model-viewer>
                <?php else : ?>
                    <p class="modelora-friendly-error"><?php echo esc_html((string) ($right_model['error'] ?? __('Right model could not be loaded.', 'modelora-3d-product-viewer'))); ?></p>
                <?php endif; ?>
                <button type="button" class="modelora-btn modelora-compare-fullscreen" data-modelora-action="compare-fullscreen" data-side="right"><?php esc_html_e('Fullscreen', 'modelora-3d-product-viewer'); ?></button>
            </div>
            <p class="modelora-compare-caption"><?php echo esc_html($right_label); ?></p>
        </section>
    </div>
</div>

