<?php

namespace MovieEngine\Admin\Player\Tabs;

if (! defined("ABSPATH")) {
    exit; // Exit if accessed directly
}

class UITab {

    public static function render($options) {
?>
        <input type="hidden" name="movie_engine_player_settings[active_sub_tab]" value="player_ui">
        <div class="movie-engine-card">
            <div class="movie-engine-card-header">
                <h3><span class="fa-solid fa-palette"></span> <?php esc_html_e('Player UI', 'cine-movie-engine'); ?></h3>
            </div>
            <div class="movie-engine-card-body">
                <div class="movie-engine-form-group">
                    <label for="primary_color"><?php esc_html_e('Primary Color', 'cine-movie-engine'); ?></label>
                    <input type="color" id="primary_color" name="movie_engine_player_settings[primary_color]" value="<?php echo esc_attr($options['movie_engine_primary_color'] ?? ($options['primary_color'] ?? '#e50914')); ?>" class="movie-engine-color-picker">
                    <p class="movie-engine-help-text"><?php esc_html_e('This color is used for the progress bar and active controls.', 'cine-movie-engine'); ?></p>
                </div>
                <div class="movie-engine-form-group">
                    <label class="movie-engine-checkbox-label">
                        <input type="hidden" name="movie_engine_player_settings[show_replay]" value="0">
                        <input type="checkbox" name="movie_engine_player_settings[show_replay]" value="1" <?php checked($options['movie_engine_show_replay'] ?? ($options['show_replay'] ?? 0), 1); ?>>
                        <span><?php esc_html_e('Show Replay Button After Video', 'cine-movie-engine'); ?></span>
                    </label>
                    <p class="movie-engine-help-text"><?php esc_html_e('Shows a replay button when the video ends.', 'cine-movie-engine'); ?></p>
                </div>

                <div class="movie-engine-form-group">
                    <label class="movie-engine-checkbox-label">
                        <input type="hidden" name="movie_engine_player_settings[start_poster]" value="0">
                        <input type="checkbox" name="movie_engine_player_settings[start_poster]" value="1" <?php checked($options['movie_engine_start_poster'] ?? ($options['start_poster'] ?? 0), 1); ?>>
                        <span><?php esc_html_e('Enable Start Poster Image', 'cine-movie-engine'); ?></span>
                    </label>
                    <p class="movie-engine-help-text"><?php esc_html_e('Shows a poster image with a play button overlay before the video starts.', 'cine-movie-engine'); ?></p>
                </div>
            </div>
        </div>

        <div class="movie-engine-card">
            <div class="movie-engine-card-header">
                <h3><span class="fa-solid fa-image"></span> <?php esc_html_e('Watermark', 'cine-movie-engine'); ?></h3>
            </div>
            <div class="movie-engine-card-body">
                <?php
                if (has_action('movie_engine_render_pro_watermark')) {
                    do_action('movie_engine_render_pro_watermark', $options);
                } else {
                ?>
                    <div class="me-pro-notice-box">
                        <span class="dashicons dashicons-lock"></span>
                        <div class="me-pro-notice-message">
                            <strong><?php esc_html_e('Watermark', 'cine-movie-engine'); ?></strong>
                            <p><?php esc_html_e('This is a PRO feature. Upgrade to enable custom watermarks on your player.', 'cine-movie-engine'); ?></p>
                        </div>
                        <a href="<?php echo esc_url(\MovieEngine\Admin\Upgrade::get_pro_url('pricing')); ?>" target="_blank" class="button button-primary me-pro-notice-btn">
                            <?php esc_html_e('Upgrade to Pro', 'cine-movie-engine'); ?>
                        </a>
                    </div>

                    <div class="me-locked-feature">
                        <div class="movie-engine-form-group">
                            <label class="movie-engine-checkbox-label">
                                <input type="checkbox" disabled>
                                <span><?php esc_html_e('Enable Watermark', 'cine-movie-engine'); ?></span>
                            </label>
                        </div>
                        <div class="movie-engine-form-group">
                            <label for="watermark_url"><?php esc_html_e('Watermark Text or Image URL', 'cine-movie-engine'); ?></label>
                            <input type="text" class="movie-engine-input" disabled>
                        </div>
                        <div class="movie-engine-form-group">
                            <label for="watermark_pos"><?php esc_html_e('Watermark Position', 'cine-movie-engine'); ?></label>
                            <select class="movie-engine-select" disabled>
                                <option><?php esc_html_e('Top Right', 'cine-movie-engine'); ?></option>
                            </select>
                        </div>
                        <div class="movie-engine-form-group">
                            <label for="watermark_opacity"><?php esc_html_e('Watermark Opacity', 'cine-movie-engine'); ?></label>
                            <input type="range" min="0" max="100" value="80" class="movie-engine-range" disabled>
                        </div>
                        <div class="movie-engine-form-group-row" style="display: flex; gap: 20px;">
                            <div class="movie-engine-form-group" style="flex: 1;">
                                <label><?php esc_html_e('Watermark Width (px or %)', 'cine-movie-engine'); ?></label>
                                <input type="text" class="movie-engine-input" disabled placeholder="e.g. 150px">
                            </div>
                            <div class="movie-engine-form-group" style="flex: 1;">
                                <label><?php esc_html_e('Watermark Height (px or %)', 'cine-movie-engine'); ?></label>
                                <input type="text" class="movie-engine-input" disabled placeholder="e.g. auto">
                            </div>
                        </div>
                        <div class="movie-engine-form-group">
                            <label class="movie-engine-checkbox-label">
                                <input type="checkbox" disabled>
                                <span><?php esc_html_e('Dynamic Watermark (Username/Email)', 'cine-movie-engine'); ?></span>
                            </label>
                        </div>
                        <div class="movie-engine-form-group">
                            <label class="movie-engine-checkbox-label">
                                <input type="checkbox" disabled>
                                <span><?php esc_html_e('Rotating Watermark', 'cine-movie-engine'); ?></span>
                            </label>
                        </div>
                    </div>
                <?php
                }
                ?>
            </div>
        </div>
<?php
    }
}
