<?php

namespace MovieEngine\Admin\Design\Tabs;

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

class GeneralTab {

    public static function render($options = [], $standalone = true) {
        if (empty($options)) {
            $options = get_option('movie_engine_design_settings', []);
        }
?>
        <?php if ($standalone) : ?>
            <input type="hidden" name="movie_engine_design_settings[active_sub_tab]" value="general">
        <?php endif; ?>
        <?php if ($standalone) : ?>
            <div class="movie-engine-settings-section">
                <div class="movie-engine-section-header">
                    <h2><?php esc_html_e('General Appearance', 'cine-movie-engine'); ?></h2>
                    <p class="description"><?php esc_html_e('Global design settings for your MovieEngine pages.', 'cine-movie-engine'); ?></p>
                </div>
            <?php endif; ?>

            <div class="movie-engine-card me-card-premium">
                <div class="movie-engine-card-header">
                    <h3><span class="dashicons dashicons-art"></span> <?php esc_html_e('Colors & Branding', 'cine-movie-engine'); ?></h3>
                </div>
                <div class="movie-engine-card-body">
                    <div class="movie-engine-form-group">
                        <label><?php esc_html_e('Preset Colors', 'cine-movie-engine'); ?></label>
                        <p class="movie-engine-help-text me-mb-20">
                            <?php esc_html_e('These colors will be used throughout your website. Choose between these presets or create your own custom palette.', 'cine-movie-engine'); ?>
                        </p>

                        <div class="movie-engine-color-presets me-pt-3">
                            <?php
                            $current_preset = !empty($options['color_preset']) ? $options['color_preset'] : 'netflix';
                            $presets = [
                                'netflix' => [
                                    'name' => 'Streaming Red',
                                    'colors' => ['#E50914', '#B2070F', '#FFFFFF', '#A3A3A3', '#23252c', '#141414', '#1a1b1f']
                                ],
                                'hulu' => [
                                    'name' => 'Stream Green',
                                    'colors' => ['#1CE783', '#15AB61', '#FFFFFF', '#A3A3A3', '#23252c', '#0b0c0f', '#14151a']
                                ],
                                'prime' => [
                                    'name' => 'Prime Blue',
                                    'colors' => ['#00A8E1', '#007FB2', '#FFFFFF', '#A3A3A3', '#23252c', '#0f171e', '#1b2530']
                                ],
                                'custom' => [
                                    'name' => 'Custom',
                                    'colors' => [
                                        !empty($options['primary_color']) ? $options['primary_color'] : '#E50914',
                                        !empty($options['primary_hover_color']) ? $options['primary_hover_color'] : '#B2070F',
                                        !empty($options['text_color']) ? $options['text_color'] : '#FFFFFF',
                                        !empty($options['gray_color']) ? $options['gray_color'] : '#A3A3A3',
                                        !empty($options['border_color']) ? $options['border_color'] : '#23252c',
                                        !empty($options['background_color']) ? $options['background_color'] : '#141414',
                                        !empty($options['surface_color']) ? $options['surface_color'] : '#1a1b1f'
                                    ]
                                ]
                            ];

                            foreach ($presets as $key => $preset) :
                            ?>
                                <label class="movie-engine-color-option">
                                    <input type="radio"
                                        name="movie_engine_design_settings[color_preset]"
                                        value="<?php echo esc_attr($key); ?>"
                                        <?php checked($current_preset, $key); ?>>
                                    <div class="movie-engine-color-card">
                                        <div class="movie-engine-preset-preview">
                                            <?php foreach ($preset['colors'] as $color) : ?>
                                                <span style="background-color: <?php echo esc_attr($color); ?>"></span>
                                            <?php endforeach; ?>
                                        </div>
                                        <div class="movie-engine-preset-footer">
                                            <span class="movie-engine-preset-name"><?php echo esc_html($preset['name']); ?></span>
                                            <div class="movie-engine-check-box"><span class="dashicons dashicons-yes"></span></div>
                                        </div>
                                    </div>
                                </label>
                            <?php endforeach; ?>
                        </div>
                    </div>

                    <div class="movie-engine-color-inputs" id="movie-engine-color-pickers">
                        <div class="movie-engine-color-input-row">
                            <div class="movie-engine-color-meta">
                                <label><?php esc_html_e('Primary Color', 'cine-movie-engine'); ?></label>
                                <span class="description"><?php esc_html_e('Choose a primary color', 'cine-movie-engine'); ?></span>
                            </div>
                            <div class="movie-engine-color-control">
                                <span class="color-preview" style="background-color: <?php echo esc_attr(!empty($options['primary_color']) ? $options['primary_color'] : '#E50914'); ?>"></span>
                                <input type="text" name="movie_engine_design_settings[primary_color]" value="<?php echo esc_attr(!empty($options['primary_color']) ? $options['primary_color'] : '#E50914'); ?>" class="movie-engine-color-hex">
                                <input type="color" class="movie-engine-color-picker-input" value="<?php echo esc_attr(!empty($options['primary_color']) ? $options['primary_color'] : '#E50914'); ?>">
                            </div>
                        </div>

                        <div class="movie-engine-color-input-row">
                            <div class="movie-engine-color-meta">
                                <label><?php esc_html_e('Primary Hover Color', 'cine-movie-engine'); ?></label>
                                <span class="description"><?php esc_html_e('Choose a primary hover color', 'cine-movie-engine'); ?></span>
                            </div>
                            <div class="movie-engine-color-control">
                                <span class="color-preview" style="background-color: <?php echo esc_attr(!empty($options['primary_hover_color']) ? $options['primary_hover_color'] : '#B2070F'); ?>"></span>
                                <input type="text" name="movie_engine_design_settings[primary_hover_color]" value="<?php echo esc_attr(!empty($options['primary_hover_color']) ? $options['primary_hover_color'] : '#B2070F'); ?>" class="movie-engine-color-hex">
                                <input type="color" class="movie-engine-color-picker-input" value="<?php echo esc_attr(!empty($options['primary_hover_color']) ? $options['primary_hover_color'] : '#B2070F'); ?>">
                            </div>
                        </div>

                        <div class="movie-engine-color-input-row">
                            <div class="movie-engine-color-meta">
                                <label><?php esc_html_e('Text Color', 'cine-movie-engine'); ?></label>
                                <span class="description"><?php esc_html_e('Choose a text color for your website', 'cine-movie-engine'); ?></span>
                            </div>
                            <div class="movie-engine-color-control">
                                <span class="color-preview" style="background-color: <?php echo esc_attr(!empty($options['text_color']) ? $options['text_color'] : '#FFFFFF'); ?>"></span>
                                <input type="text" name="movie_engine_design_settings[text_color]" value="<?php echo esc_attr(!empty($options['text_color']) ? $options['text_color'] : '#FFFFFF'); ?>" class="movie-engine-color-hex">
                                <input type="color" class="movie-engine-color-picker-input" value="<?php echo esc_attr(!empty($options['text_color']) ? $options['text_color'] : '#FFFFFF'); ?>">
                            </div>
                        </div>

                        <div class="movie-engine-color-input-row">
                            <div class="movie-engine-color-meta">
                                <label><?php esc_html_e('Gray', 'cine-movie-engine'); ?></label>
                                <span class="description"><?php esc_html_e('Choose a color for elements like table, card etc', 'cine-movie-engine'); ?></span>
                            </div>
                            <div class="movie-engine-color-control">
                                <span class="color-preview" style="background-color: <?php echo esc_attr(!empty($options['gray_color']) ? $options['gray_color'] : '#A3A3A3'); ?>"></span>
                                <input type="text" name="movie_engine_design_settings[gray_color]" value="<?php echo esc_attr(!empty($options['gray_color']) ? $options['gray_color'] : '#A3A3A3'); ?>" class="movie-engine-color-hex">
                                <input type="color" class="movie-engine-color-picker-input" value="<?php echo esc_attr(!empty($options['gray_color']) ? $options['gray_color'] : '#A3A3A3'); ?>">
                            </div>
                        </div>

                        <div class="movie-engine-color-input-row">
                            <div class="movie-engine-color-meta">
                                <label><?php esc_html_e('Border', 'cine-movie-engine'); ?></label>
                                <span class="description"><?php esc_html_e('Choose a border color for your website', 'cine-movie-engine'); ?></span>
                            </div>
                            <div class="movie-engine-color-control">
                                <span class="color-preview" style="background-color: <?php echo esc_attr(!empty($options['border_color']) ? $options['border_color'] : '#23252c'); ?>"></span>
                                <input type="text" name="movie_engine_design_settings[border_color]" value="<?php echo esc_attr(!empty($options['border_color']) ? $options['border_color'] : '#23252c'); ?>" class="movie-engine-color-hex">
                                <input type="color" class="movie-engine-color-picker-input" value="<?php echo esc_attr(!empty($options['border_color']) ? $options['border_color'] : '#23252c'); ?>">
                            </div>
                        </div>

                        <div class="movie-engine-color-input-row">
                            <div class="movie-engine-color-meta">
                                <label><?php esc_html_e('Background Color', 'cine-movie-engine'); ?></label>
                                <span class="description"><?php esc_html_e('Choose a main background color', 'cine-movie-engine'); ?></span>
                            </div>
                            <div class="movie-engine-color-control">
                                <span class="color-preview" style="background-color: <?php echo esc_attr(!empty($options['background_color']) ? $options['background_color'] : '#141414'); ?>"></span>
                                <input type="text" name="movie_engine_design_settings[background_color]" value="<?php echo esc_attr(!empty($options['background_color']) ? $options['background_color'] : '#141414'); ?>" class="movie-engine-color-hex">
                                <input type="color" class="movie-engine-color-picker-input" value="<?php echo esc_attr(!empty($options['background_color']) ? $options['background_color'] : '#141414'); ?>">
                            </div>
                        </div>

                        <div class="movie-engine-color-input-row">
                            <div class="movie-engine-color-meta">
                                <label><?php esc_html_e('Surface Color', 'cine-movie-engine'); ?></label>
                                <span class="description"><?php esc_html_e('Choose a color for boxes and cards', 'cine-movie-engine'); ?></span>
                            </div>
                            <div class="movie-engine-color-control">
                                <span class="color-preview" style="background-color: <?php echo esc_attr(!empty($options['surface_color']) ? $options['surface_color'] : '#1a1b1f'); ?>"></span>
                                <input type="text" name="movie_engine_design_settings[surface_color]" value="<?php echo esc_attr(!empty($options['surface_color']) ? $options['surface_color'] : '#1a1b1f'); ?>" class="movie-engine-color-hex">
                                <input type="color" class="movie-engine-color-picker-input" value="<?php echo esc_attr(!empty($options['surface_color']) ? $options['surface_color'] : '#1a1b1f'); ?>">
                            </div>
                        </div>
                    </div>

                    <div class="movie-engine-toggle-more-less me-toggle-center">
                        <span class="dashicons dashicons-minus"></span> <?php esc_html_e('Show Less', 'cine-movie-engine'); ?>
                    </div>
                </div>
            </div>

            <div class="movie-engine-card">
                <div class="movie-engine-card-header">
                    <h3><span class="dashicons dashicons-layout"></span> <?php esc_html_e('Layout & Style', 'cine-movie-engine'); ?></h3>
                </div>
                <div class="movie-engine-card-body">
                    <div class="movie-engine-form-group">
                        <label for="container_width"><?php esc_html_e('Container Max Width (px)', 'cine-movie-engine'); ?></label>
                        <input type="number"
                            id="container_width"
                            name="movie_engine_design_settings[container_width]"
                            value="<?php echo esc_attr(!empty($options['container_width']) ? $options['container_width'] : 1170); ?>"
                            class="movie-engine-input"
                            min="800"
                            max="3840">
                        <p class="movie-engine-help-text"><?php esc_html_e('Maximum width for the main content container.', 'cine-movie-engine'); ?></p>
                    </div>

                    <div class="movie-engine-form-group">
                        <label for="border_radius"><?php esc_html_e('Border Radius (px)', 'cine-movie-engine'); ?></label>
                        <input type="number"
                            id="border_radius"
                            name="movie_engine_design_settings[border_radius]"
                            value="<?php echo esc_attr(!empty($options['border_radius']) ? $options['border_radius'] : 8); ?>"
                            class="movie-engine-input"
                            min="0"
                            max="50">
                        <p class="movie-engine-help-text"><?php esc_html_e('Rounded corners for cards and buttons.', 'cine-movie-engine'); ?></p>
                    </div>
                </div>
            </div>


            <?php if ($standalone) : ?>
                <div class="movie-engine-form-actions">
                    <?php submit_button(esc_html__('Save Changes', 'cine-movie-engine'), 'primary me-btn-primary', 'submit', false); ?>
                    <button type="button" class="button button-link me-reset-section-btn" data-tab="design_general"><?php esc_html_e('Reset Section to Defaults', 'cine-movie-engine'); ?></button>
                </div>
            </div>
        <?php endif; ?>
<?php
    }
}
