<?php
/**
 * @package WavypointPopUps
 */
namespace WavypointPopUps\Pages;

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

use WavypointPopUps\Base\BaseController;

class WavyBannerMaker extends BaseController {

    public function register() {
       add_action('admin_menu', [$this, 'wavypopup_add_banner_maker_page']);
    }

    public function wavypopup_add_banner_maker_page() {
        add_menu_page(
            __('Wavy Banner Maker', 'wavypoint-pop-ups'), 
            __('Wavy Banner Maker', 'wavypoint-pop-ups'),
            'manage_options',                     
            'wavy-banner-maker',                  
            [$this, 'wavypopup_render_banner_maker_page'],
            'dashicons-format-image',             
            26                                    
        );
    }

    // Callback to render the page
    public function wavypopup_render_banner_maker_page() {
    ?>
    <h1><?php esc_html_e('Wavy Banner Maker', 'wavypoint-pop-ups'); ?></h1>
    <?php

    // If customize mode
    if ( isset( $_GET['action'], $_GET['banner_id'], $_GET['_wpnonce'] ) ) {

        if ( wp_verify_nonce( sanitize_text_field( wp_unslash( $_GET['_wpnonce'] ) ), 'wavypopup_customize_banner' ) ) {
            
            $action    = sanitize_text_field( wp_unslash( $_GET['action'] ) );
            $banner_id = intval( wp_unslash( $_GET['banner_id'] ) );

            if ( 'customize' === $action && ! empty( $banner_id ) ) {

            // Define template configurations
                $templates = [
                    1 => [
                        'img' => $this->plugin_url . 'assets/banners/banner1.png',
                        'width' => 1200,
                        'height' => 589,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'SPECIAL DEAL', 'size' => 58, 'color' => 'white', 'fontfamily' => 'Arial'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'SUPER OFFER', 'size' => 100, 'color' => 'white', 'fontfamily' => 'Arial'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'UP TO 50% OFF', 'size' => 45, 'color' => '#411F88', 'fontfamily' => 'Impact'  ],
                        ],
                        'status' => 'free',
                    ],
                    2 => [
                        'img' => $this->plugin_url . 'assets/banners/banner2.png',
                        'width' => 800,
                        'height' => 800,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'Limited Time', 'size' => 42, 'color' => 'white', 'fontfamily' => 'Arial'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'BIG SALE', 'size' => 80, 'color' => '#FFDF2E', 'fontfamily' => 'Tahoma'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'UP TO 50% OFF', 'size' => 45, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                        ],
                        'status' => 'free',
                    ],
                    3 => [
                        'img' => $this->plugin_url . 'assets/banners/banner3.png',
                        'width' => 715,
                        'height' => 610,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'SHOP NOW', 'size' => 14, 'color' => 'black', 'fontfamily' => 'Georgia'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'SUPER SALE', 'size' => 55, 'color' => 'white', 'fontfamily' => 'Georgia'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'LIMITED TIME', 'size' => 30, 'color' => 'white', 'fontfamily' => 'Georgia'  ],
                            [ 'name' => 'fourth', 'label' => 'Fourth Text', 'default' => 'BEST', 'size' => 40, 'color' => '#E5055E', 'fontfamily' => 'Georgia'  ],
                            [ 'name' => 'fifth', 'label' => 'Fifth Text', 'default' => 'OFFER', 'size' => 40, 'color' => '#E5055E', 'fontfamily' => 'Georgia'  ],
                            [ 'name' => 'sixth', 'label' => 'Sixth Text', 'default' => '40%', 'size' => 50, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                        ],
                        'status' => 'free',
                    ],
                    4 => [
                        'img' => $this->plugin_url . 'assets/banners/banner4.png',
                        'width' => 1000,
                        'height' => 571,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'TODAY ONLY', 'size' => 16, 'color' => '#B41D68', 'fontfamily' => 'Tahoma'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'BIG', 'size' => 125, 'color' => '#002170', 'fontfamily' => 'Georgia'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'SALE', 'size' => 80, 'color' => '#002170', 'fontfamily' => 'Georgia'  ],
                            [ 'name' => 'fourth', 'label' => 'Fourth Text', 'default' => 'SHOP NOW', 'size' => 16, 'color' => 'white', 'fontfamily' => 'Tahoma'  ],
                            [ 'name' => 'fifth', 'label' => 'Fifth Text', 'default' => 'UP To', 'size' => 40, 'color' => '#002170', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'sixth', 'label' => 'Sixth Text', 'default' => '70 %', 'size' => 50, 'color' => '#002170', 'fontfamily' => 'Impact'  ],
                        ],
                        'status' => 'free',
                    ],
                    5 => [
                        'img' => $this->plugin_url . 'assets/banners/banner5.png',
                        'width' => 600,
                        'height' => 756,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'SPECIAL', 'size' => 80, 'color' => 'white', 'fontfamily' => 'Tahoma'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'YEAR END SALE', 'size' => 28, 'color' => 'white', 'fontfamily' => 'Georgia'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'SUPER', 'size' => 80, 'color' => '#F5051F', 'fontfamily' => 'Georgia'  ],
                            [ 'name' => 'fourth', 'label' => 'Fourth Text', 'default' => 'OFFER', 'size' => 80, 'color' => '#F5051F', 'fontfamily' => 'Tahoma'  ],
                            [ 'name' => 'fifth', 'label' => 'Fifth Text', 'default' => 'UP To', 'size' => 40, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'sixth', 'label' => 'Sixth Text', 'default' => '70%', 'size' => 80, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'sixth', 'label' => 'Seventh Text', 'default' => 'OFF', 'size' => 40, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                        ],
                        'status' => 'pro',
                    ],
                    6 => [
                        'img' => $this->plugin_url . 'assets/banners/banner6.png',
                        'width' => 750,
                        'height' => 500,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'LIMITED TIME ONLY', 'size' => 20, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'MEGA', 'size' => 70, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'SALE', 'size' => 120, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'fourth', 'label' => 'Fourth Text', 'default' => 'SHOP NOW', 'size' => 20, 'color' => '#EB1843', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'fifth', 'label' => 'Fifth Text', 'default' => '50%', 'size' => 50, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'sixth', 'label' => 'Sixth Text', 'default' => 'OFF', 'size' => 40, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                        
                        ],
                        'status' => 'free',
                    ],
                    7 => [
                        'img' => $this->plugin_url . 'assets/banners/banner7.png',
                        'width' => 1200,
                        'height' => 457,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'WHITE', 'size' => 120, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'FRIDAY', 'size' => 70, 'color' => '#E3A20D', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'SALE', 'size' => 100, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'fourth', 'label' => 'Fourth Text', 'default' => '50% DISCOUNT', 'size' => 20, 'color' => '#E3A20D', 'fontfamily' => 'Impact'  ],
                        
                        ],
                        'status' => 'pro',
                    ],
                    8 => [
                        'img' => $this->plugin_url . 'assets/banners/banner8.png',
                        'width' => 1200,
                        'height' => 630,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'SUPER', 'size' => 100, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'SALE', 'size' => 100, 'color' => '#E3A20D', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => '50% OFF', 'size' => 60, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'fourth', 'label' => 'Fourth Text', 'default' => 'BUY NOW', 'size' => 40, 'color' => '#821ECC', 'fontfamily' => 'Impact'  ],
                        
                        ],
                        'status' => 'pro',
                    ],
                    9 => [
                        'img' => $this->plugin_url . 'assets/banners/banner9.png',
                        'width' => 750,
                        'height' => 500,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => '50% OFF', 'size' => 25, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'MEGA', 'size' => 70, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'SALE', 'size' => 70, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'fourth', 'label' => 'Fourth Text', 'default' => 'SHOP NOW', 'size' => 20, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                        
                        ],
                        'status' => 'pro',
                    ],
                    10 => [
                        'img' => $this->plugin_url . 'assets/banners/banner10.png',
                        'width' => 572,
                        'height' => 410,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => '50%', 'size' => 40, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'OFF', 'size' => 40, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'THIS WEEK ONLY', 'size' => 30, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'fourth', 'label' => 'Fourth Text', 'default' => 'SUPER SALE', 'size' => 70, 'color' => 'gold', 'fontfamily' => 'Impact'  ],
                        
                        ],
                        'status' => 'pro',
                    ],
                    11 => [
                        'img' => $this->plugin_url . 'assets/banners/banner11.png',
                        'width' => 720,
                        'height' => 411,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'SPECIAL OFFER', 'size' => 20, 'color' => '#001F3B', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'MEGA', 'size' => 80, 'color' => '#001F3B', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'SALE', 'size' => 65, 'color' => '#F9005F', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'fourth', 'label' => 'Fourth Text', 'default' => 'SHOP NOW', 'size' => 30, 'color' => '#001F3B', 'fontfamily' => 'Impact'  ],
                        
                        ],
                        'status' => 'pro',
                    ],
                    12 => [
                        'img' =>$this->plugin_url . 'assets/banners/banner12.png',
                        'width' => 750,
                        'height' => 500,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'SUPER', 'size' => 80, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'SALE', 'size' => 80, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'UP TO 50% OFF', 'size' => 30, 'color' => '#990073', 'fontfamily' => 'Impact'  ],
                        
                        
                        ],
                        'status' => 'pro',
                    ],
                    13 => [
                        'img' => $this->plugin_url . 'assets/banners/banner13.png',
                        'width' => 687,
                        'height' => 351,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'SUPER', 'size' => 80, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'SALE', 'size' => 80, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'END OF SEASON', 'size' => 35, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'fourth', 'label' => 'Fourth Text', 'default' => '50% OFF', 'size' => 75, 'color' => '#FD0A0A', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'fifth', 'label' => 'Fifth Text', 'default' => 'SHOP NOW', 'size' => 35, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                        
                        
                        ],
                        'status' => 'pro',
                    ],
                    14 => [
                        'img' => $this->plugin_url . 'assets/banners/banner14.png',
                        'width' => 589,
                        'height' => 440,
                        'inputs' => [
                            [ 'name' => 'first', 'label' => 'First Text', 'default' => 'END OF SEASON', 'size' => 30, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'second', 'label' => 'Second Text', 'default' => 'SALE', 'size' => 100, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                            [ 'name' => 'third', 'label' => 'Third Text', 'default' => 'SHOP NOW', 'size' => 35, 'color' => 'white', 'fontfamily' => 'Impact'  ],
                        
                        ],
                        'status' => 'pro',
                    ],
                ];

                if ( !isset($templates[$banner_id]) ) {
                    echo '<p>' . esc_html_e( 'Invalid banner template.', 'wavypoint-pop-ups' ) . '</p>';
                    return;
                }

                $template = $templates[$banner_id];

                if ( $template['status'] == 'pro'  ) {
                    echo '<p>' . esc_html_e( 'Invalid banner template.', 'wavypoint-pop-ups' ) . '</p>';
                    return;
                }

                // Enqueue external JS per template
                wp_enqueue_script(
                    'wavypoint-banner-' . $banner_id,
                    $this->plugin_url . 'assets/js/banner' . $banner_id . '.js',
                    ['jquery'],
                    '1.0',
                    true
                );

                // Pass data to JS
                wp_localize_script('wavypoint-banner-' . $banner_id, 'wavypointBannerData', [
                    'img'    => esc_url($template['img']),
                    'width'  => intval($template['width']),
                    'height' => intval($template['height']),
                ]);

                ?>
                <div class="wrap">
                    <h1><?php esc_html_e( 'Customize Banner', 'wavypoint-pop-ups' ); ?></h1>
                    
                    <!-- Canvas -->
                    <canvas id="bannerCanvas" 
                            width="<?php echo esc_attr($template['width']); ?>" 
                            height="<?php echo esc_attr($template['height']); ?>" 
                            style="border:1px solid #ccc;max-width:100%;"></canvas>

                    <!-- Inputs -->
                    <div style="margin-top:20px;">
                        <?php foreach ( $template['inputs'] as $input ) : ?>
                            <p>
                                <label><?php echo esc_html( $input['label'] ); ?>:</label><br>
                                <input type="text" 
                                    class="banner-input" 
                                    data-name="<?php echo esc_attr( $input['name'] ); ?>" 
                                    value="<?php echo esc_attr( $input['default'] ); ?>"
                                    style="width:50%;">
                                
                                
                                <input type="number" 
                                    class="banner-fontsize" 
                                    data-name="<?php echo esc_attr( $input['name'] ); ?>-size" 
                                    value="<?php echo esc_attr( $input['size'] ); ?>" 
                                    placeholder="Font Size (px):">
                                    <span>Font Size (px)</span>
                                
                                <?php $var = $input['fontfamily']; ?>
                                <select class="banner-fontfamily" name="font_family">
                                    <option value="Arial" <?php selected($var, 'Arial'); ?>>Arial</option>
                                    <option value="Verdana" <?php selected($var, 'Verdana'); ?>>Verdana</option>
                                    <option value="Georgia" <?php selected($var, 'Georgia'); ?>>Georgia</option>
                                    <option value="Courier New" <?php selected($var, 'Courier New'); ?>>Courier New</option>
                                    <option value="Tahoma" <?php selected($var, 'Tahoma'); ?>>Tahoma</option>
                                    <option value="Impact" <?php selected($var, 'Impact'); ?>>Impact</option>

                                    <!-- Google Fonts -->
                                    <option value="Roboto" <?php selected($var, 'Roboto'); ?>>Roboto</option>
                                    <option value="Poppins" <?php selected($var, 'Poppins'); ?>>Poppins</option>
                                    <option value="Open Sans" <?php selected($var, 'Open Sans'); ?>>Open Sans</option>
                                    <option value="Almarai" <?php selected($var, 'Almarai'); ?>>Almarai</option>
                                    <option value="Cairo" <?php selected($var, 'Cairo'); ?>>Cairo</option>
                                </select>

                                <input type="color" 
                                class="banner-fontcolor" 
                                data-name="<?php echo esc_attr( $input['name'] ); ?>-color" 
                                value="<?php echo esc_attr( $input['color'] ); ?>" >

                            
                            </p>
                        <?php endforeach; ?>
                    </div>

                    <!-- Download Button -->
                    <button id="downloadBanner" class="button button-primary">
                        <?php esc_html_e('Download Banner', 'wavypoint-pop-ups'); ?>
                    </button>
                </div>
                <?php
                return;
                
            }
        }
    }
   

    // Default grid view
    ?>
    <div class="wrap">
        <h1><?php esc_html_e( 'Choose a Banner Template', 'wavypoint-pop-ups' ); ?></h1>
        <div class="wavy-banner-grid" style="display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:20px;margin-top:20px;">
            <?php
            $banners = [
                [ 'id' => 1, 'img' => WAVYPOINT_CDN . 'banners/preview1.png', 'status' => 'free' ],
                [ 'id' => 2, 'img' => WAVYPOINT_CDN . 'banners/preview2.png', 'status' => 'free' ],
                [ 'id' => 3, 'img' => WAVYPOINT_CDN . 'banners/preview3.png', 'status' => 'free' ],
                [ 'id' => 4, 'img' => WAVYPOINT_CDN . 'banners/preview4.png', 'status' => 'free' ],
                [ 'id' => 6, 'img' => WAVYPOINT_CDN . 'banners/preview6.png', 'status' => 'free' ],
                // [ 'id' => 7, 'img' => WAVYPOINT_CDN . 'banners/preview7.png', 'status' => 'free' ],
                [ 'id' => 8, 'img' => WAVYPOINT_CDN . 'banners/preview8.png', 'status' => 'pro' ],
                [ 'id' => 9, 'img' => WAVYPOINT_CDN . 'banners/preview9.png', 'status' => 'pro' ],
                [ 'id' => 10, 'img' => WAVYPOINT_CDN . 'banners/preview10.png', 'status' => 'pro' ],
                [ 'id' => 11, 'img' => WAVYPOINT_CDN . 'banners/preview11.png', 'status' => 'pro' ],
                [ 'id' => 12, 'img' => WAVYPOINT_CDN . 'banners/preview12.png', 'status' => 'pro' ],
                [ 'id' => 13, 'img' => WAVYPOINT_CDN . 'banners/preview13.png', 'status' => 'pro' ],
                [ 'id' => 14, 'img' => WAVYPOINT_CDN . 'banners/preview14.png', 'status' => 'pro' ],
                [ 'id' => 5, 'img' => WAVYPOINT_CDN . 'banners/preview5.png', 'status' => 'pro' ],
            ];

            foreach ( $banners as $banner ) {
                if ( $banner['status'] == 'free' ) {
                      $base_url = admin_url( 'admin.php?page=wavy-banner-maker&action=customize&banner_id=' . $banner['id'] );
                      $customize_url = wp_nonce_url( $base_url, 'wavypopup_customize_banner' );
                        echo '<div class="wavy-banner-item" style="border:1px solid #ccc;padding:10px;text-align:center;background:black;box-shadow:0 2px 4px rgba(0,0,0,0.1);position:relative;">';
                        echo '<img src="' . esc_url( $banner['img'] ) . '" style="max-width:100%;height:auto;border-radius:6px;margin-bottom:30px;" />';
                        echo '<a href="' . esc_url( $customize_url ) . '">';
                        echo '<p class="banner-btn">Customize</p>';
                        echo '</a>';
                        echo '</div>';
                    
                }
                else{
                    echo '<div class="wavy-banner-item" style="border:1px solid #ccc;padding:10px;text-align:center;background:black;box-shadow:0 2px 4px rgba(0,0,0,0.1);position:relative;">';
                    echo '<img src="' . esc_url( $banner['img'] ) . '" style="max-width:100%;height:auto;border-radius:6px;margin-bottom:30px;" />';
                    echo sprintf(
                        '<a href="%s"><p class="banner-btn">%s</p></a>',
                        esc_url( 'https://www.wavypoint.com/plugins/wavypoint-pop-ups-smart-animated-visual-wordpress-popups' ),
                        esc_html__( 'Pro Only', 'wavypoint-pop-ups' )
                    );
                    echo '</div>';
                }
               
            }
            ?>
        </div>
    </div>
    <?php
    }

    
}
