<?php
/**
 * TAB: APPEARANCE — Visual settings, color scheme
 *
 * @package ParcelSelector
 * @since   3.0.9
 */

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

if ( ! function_exists( 'parcselect_tab_appearance' ) ) {
function parcselect_tab_appearance() {
    $t = parcselect_admin_i18n();
    ?>
    <div class="parcelselector-section">
        <h2>&#x1F3A8; <?php echo esc_html( $t['app_title'] ); ?></h2>
        <p class="description"><?php echo esc_html( $t['app_desc'] ); ?></p>
    </div>

    <?php $current_theme = get_user_meta( get_current_user_id(), 'parcselect_admin_theme', true ) ?: 'light'; ?>
    <!-- ═══════════════ COLOR SCHEME ═══════════════ -->
    <div class="parcelselector-section">
        <h3><?php echo esc_html( $t['app_color_scheme'] ); ?></h3>
        <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin-top:15px;">
            <!-- Light Theme -->
            <div class="parcelselector-card ps-theme-card <?php echo $current_theme === 'light' ? 'ps-theme-active' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static CSS class name. ?>"
                 data-theme="light"
                 style="cursor:pointer; border:3px solid <?php echo esc_attr( $current_theme === 'light' ? '#FECC01' : '#ddd' ); ?>; position:relative;">
                <?php if($current_theme === 'light'): ?>
                    <div style="position:absolute; top:10px; right:10px; background:#FECC01; color:#000; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700;">ACTIVE</div>
                <?php endif; ?>
                <div style="display:flex; gap:8px; margin-bottom:12px;">
                    <div style="width:40px; height:40px; border-radius:6px; background:#FFFFFF; border:1px solid #ddd;"></div>
                    <div style="width:40px; height:40px; border-radius:6px; background:#FECC01;"></div>
                    <div style="width:40px; height:40px; border-radius:6px; background:#FF6600;"></div>
                    <div style="width:40px; height:40px; border-radius:6px; background:#333333;"></div>
                </div>
                <h4 style="margin:0 0 4px;">&#x2600;&#xFE0F; <?php echo esc_html( $t['app_light_theme'] ); ?></h4>
                <p style="color:#666; font-size:13px; margin:0;"><?php echo esc_html( $t['app_light_desc'] ); ?></p>
            </div>

            <!-- Dark Theme -->
            <div class="parcelselector-card ps-theme-card <?php echo $current_theme === 'dark' ? 'ps-theme-active' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static CSS class name. ?>"
                 data-theme="dark"
                 style="cursor:pointer; background:#1a1a1a; color:#eee; border:3px solid <?php echo esc_attr( $current_theme === 'dark' ? '#FECC01' : '#444' ); ?>; position:relative;">
                <?php if($current_theme === 'dark'): ?>
                    <div style="position:absolute; top:10px; right:10px; background:#FECC01; color:#000; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700;">ACTIVE</div>
                <?php endif; ?>
                <div style="display:flex; gap:8px; margin-bottom:12px;">
                    <div style="width:40px; height:40px; border-radius:6px; background:#1a1a1a; border:1px solid #444;"></div>
                    <div style="width:40px; height:40px; border-radius:6px; background:#FECC01;"></div>
                    <div style="width:40px; height:40px; border-radius:6px; background:#FF7733;"></div>
                    <div style="width:40px; height:40px; border-radius:6px; background:#EEEEEE;"></div>
                </div>
                <h4 style="margin:0 0 4px; color:#eee;">&#x1F319; <?php echo esc_html( $t['app_dark_theme'] ); ?></h4>
                <p style="color:#999; font-size:13px; margin:0;"><?php echo esc_html( $t['app_dark_desc'] ); ?></p>
            </div>
        </div>
    </div>

    <!-- ═══════════════ LOGO OPTIONS + ORDER LAYOUT (editable form) ═══════════════ -->
    <form method="post" action="options.php" style="margin-top:25px;">
        <input type="hidden" name="ps_save_group" value="parcselect_appearance_group">
        <?php
        settings_fields( 'parcselect_appearance_group' );
        $options   = get_option( 'parcselect_paczkomaty_options', array() );
        $show_logo = isset( $options['ip_select_show_logo'] )     ? $options['ip_select_show_logo']     : 'yes';
        $logo_img  = isset( $options['ip_select_show_logo_img'] ) ? $options['ip_select_show_logo_img'] : '';
        $layout    = isset( $options['ips_order_summary_layout'] ) ? $options['ips_order_summary_layout'] : 'compact';
        ?>

        <div class="parcelselector-section">
            <h3><?php echo esc_html( $t['app_logo'] ); ?></h3>
            <div class="parcelselector-card">
                <table class="form-table" role="presentation">
                    <tr>
                        <th scope="row"><?php echo esc_html( $t['app_show_logo'] ); ?></th>
                        <td>
                            <select name="parcselect_paczkomaty_options[ip_select_show_logo]">
                                <option value="yes" <?php selected( $show_logo, 'yes' ); ?>><?php esc_html_e( 'Yes', 'parcel-selector' ); ?></option>
                                <option value="no"  <?php selected( $show_logo, 'no' ); ?>><?php esc_html_e( 'No', 'parcel-selector' ); ?></option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row"><?php echo esc_html( $t['app_logo_url'] ); ?></th>
                        <td>
                            <input type="url" name="parcselect_paczkomaty_options[ip_select_show_logo_img]"
                                   value="<?php echo esc_attr( $logo_img ); ?>"
                                   class="regular-text" placeholder="https://...">
                            <?php if ( $logo_img ) : ?>
                                <br><img src="<?php echo esc_url( $logo_img ); ?>"
                                         style="max-height:40px; margin-top:8px; border:1px solid #ddd; padding:2px;"
                                         alt="Logo preview" id="ps-logo-preview">
                            <?php else : ?>
                                <img id="ps-logo-preview" style="max-height:40px; margin-top:8px; border:1px solid #ddd; padding:2px; display:none;" alt="Logo preview">
                            <?php endif; ?>
                            <p class="description"><?php esc_html_e( 'Full URL of your logo image (optional).', 'parcel-selector' ); ?></p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="parcelselector-section" style="margin-top:20px;">
            <h3><?php echo esc_html( $t['app_order_layout'] ); ?></h3>
            <div class="parcelselector-card">
                <table class="form-table" role="presentation">
                    <tr>
                        <th scope="row"><?php echo esc_html( $t['app_order_layout'] ); ?></th>
                        <td>
                            <select name="parcselect_paczkomaty_options[ips_order_summary_layout]">
                                <option value="compact"  <?php selected( $layout, 'compact' ); ?>><?php esc_html_e( 'Compact', 'parcel-selector' ); ?></option>
                                <option value="full"     <?php selected( $layout, 'full' ); ?>><?php esc_html_e( 'Full', 'parcel-selector' ); ?></option>
                                <option value="minimal"  <?php selected( $layout, 'minimal' ); ?>><?php esc_html_e( 'Minimal', 'parcel-selector' ); ?></option>
                            </select>
                            <p class="description"><?php esc_html_e( 'How the selected locker is displayed in cart / order confirmation.', 'parcel-selector' ); ?></p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <?php submit_button( $t['save_changes'] ?? 'Save Changes' ); ?>
    </form>

    <?php
    wp_add_inline_script( 'parcselect-admin-premium-js', '(function() {
        var urlInput = document.querySelector(\'[name="parcselect_paczkomaty_options[ip_select_show_logo_img]"]\');
        var preview  = document.getElementById(\'ps-logo-preview\');
        if ( urlInput && preview ) {
            urlInput.addEventListener(\'input\', function() {
                var v = this.value.trim();
                if ( v ) { preview.src = v; preview.style.display = \'\'; }
                else     { preview.style.display = \'none\'; }
            });
        }
    })();' );
}
}
