<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) exit;
if ( ! current_user_can( 'manage_options' ) ) return;

$table_id    = isset( $_GET['table_id'] ) ? absint( $_GET['table_id'] ) : 0; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
$is_edit     = $table_id > 0;
$table_title = $is_edit ? get_the_title( $table_id ) : '';
$custom_css  = $is_edit ? (string) get_post_meta( $table_id, '_cdtv_custom_css', true ) : '';
$has_header  = $is_edit ? (bool) get_post_meta( $table_id, '_cdtv_has_header', true ) : true;
$row_count   = $is_edit ? (int) get_post_meta( $table_id, '_cdtv_row_count',    true ) : 0;
$col_count   = $is_edit ? (int) get_post_meta( $table_id, '_cdtv_column_count', true ) : 0;
$shortcode   = $is_edit ? '[cdtv id="' . $table_id . '"]' : '';
$border_raw     = $is_edit ? get_post_meta( $table_id, '_cdtv_border_settings', true ) : array();
$border         = is_array( $border_raw ) ? $border_raw : array();
$b_preset       = $border['preset'] ?? 'none';
$b_style        = $border['style']  ?? 'solid';
$b_color        = $border['color']  ?? '#dddddd';
$b_width        = (int) ( $border['width']  ?? 1 );
$rows_per_page  = $is_edit ? (int) get_post_meta( $table_id, '_cdtv_rows_per_page', true ) : 0;
$scroll_mode    = $is_edit ? (string) get_post_meta( $table_id, '_cdtv_scroll_mode', true ) : 'auto';
if ( ! in_array( $scroll_mode, array( 'auto', 'always', 'off' ), true ) ) $scroll_mode = 'auto';
$reset_styles   = $is_edit ? (bool) get_post_meta( $table_id, '_cdtv_reset_styles', true ) : false;
$enable_search        = $is_edit ? (bool) get_post_meta( $table_id, '_cdtv_enable_search',       true ) : false;
$enable_sort          = $is_edit ? (bool) get_post_meta( $table_id, '_cdtv_enable_sort',         true ) : false;
$enable_excel_format  = $is_edit ? (bool) get_post_meta( $table_id, '_cdtv_enable_excel_format', true ) : false;
$is_licensed          = cdtv_is_licensed();
?>
<div class="wrap cdtv-wrap">
    <h1><?php echo $is_edit ? esc_html__( 'Edit Table', 'codede-table-viewer' ) : esc_html__( 'Add New Table', 'codede-table-viewer' ); ?></h1>
    <hr class="wp-header-end">

    <!-- Step Indicator -->
    <div class="cdtv-wizard-steps">
        <div class="cdtv-step <?php echo $is_edit ? '' : 'active'; ?>" data-step="1">
            <span class="cdtv-step-num">1</span> <?php esc_html_e( 'Upload File', 'codede-table-viewer' ); ?>
        </div>
        <div class="cdtv-step <?php echo $is_edit ? 'active' : ''; ?>" data-step="2">
            <span class="cdtv-step-num">2</span> <?php esc_html_e( 'Preview & Save', 'codede-table-viewer' ); ?>
        </div>
        <div class="cdtv-step" data-step="3">
            <span class="cdtv-step-num">3</span> <?php esc_html_e( 'Done', 'codede-table-viewer' ); ?>
        </div>
    </div>

    <!-- Step 1: Upload -->
    <div class="cdtv-wizard-panel" id="cdtv-step-1" <?php echo $is_edit ? 'style="display:none;"' : ''; ?>>
        <div class="cdtv-upload-area" id="cdtv-drop-zone">
            <span class="dashicons dashicons-upload"></span>
            <p><?php esc_html_e( 'Drag & drop your file here, or click to select.', 'codede-table-viewer' ); ?></p>
            <p class="cdtv-file-types"><?php esc_html_e( 'Supported formats: .xlsx, .xls, .csv', 'codede-table-viewer' ); ?></p>
            <input type="file" id="cdtv-file-input" accept=".xlsx,.xls,.csv" style="display:none;">
            <button class="button button-primary" id="cdtv-select-file"><?php esc_html_e( 'Select File', 'codede-table-viewer' ); ?></button>
        </div>
        <p>
            <label>
                <input type="checkbox" id="cdtv-has-header" <?php checked( $has_header ); ?>>
                <?php esc_html_e( 'First row is a header row', 'codede-table-viewer' ); ?>
            </label>
        </p>
        <div id="cdtv-upload-progress" style="display:none;">
            <span class="spinner is-active"></span>
            <?php esc_html_e( 'Uploading & parsing…', 'codede-table-viewer' ); ?>
        </div>
    </div>

    <!-- Step 2: Preview & Options -->
    <div class="cdtv-wizard-panel" id="cdtv-step-2" <?php echo $is_edit ? '' : 'style="display:none;"'; ?>>

        <?php if ( $is_edit ) : ?>
        <!-- Table Info Bar -->
        <div class="cdtv-info-bar">
            <div class="cdtv-info-stat">
                <span class="dashicons dashicons-editor-table"></span>
                <strong><?php echo esc_html( $row_count ); ?></strong>
                <span><?php esc_html_e( 'Rows', 'codede-table-viewer' ); ?></span>
            </div>
            <div class="cdtv-info-stat">
                <span class="dashicons dashicons-list-view"></span>
                <strong><?php echo esc_html( $col_count ); ?></strong>
                <span><?php esc_html_e( 'Columns', 'codede-table-viewer' ); ?></span>
            </div>
            <div class="cdtv-info-shortcode">
                <span><?php esc_html_e( 'Shortcode:', 'codede-table-viewer' ); ?></span>
                <code id="cdtv-info-shortcode-code"><?php echo esc_html( $shortcode ); ?></code>
                <button class="button button-small cdtv-copy-shortcode-inline" data-code="<?php echo esc_attr( $shortcode ); ?>">
                    <?php esc_html_e( 'Copy', 'codede-table-viewer' ); ?>
                </button>
            </div>
        </div>

        <!-- Replace File Toggle -->
        <div class="cdtv-replace-file-wrap">
            <button class="button cdtv-toggle-replace" id="cdtv-toggle-replace" type="button">
                <span class="dashicons dashicons-upload" style="vertical-align:middle;margin-right:4px;"></span>
                <?php esc_html_e( 'Replace file with new upload', 'codede-table-viewer' ); ?>
            </button>
            <div id="cdtv-replace-area" style="display:none; margin-top:12px;">
                <div class="cdtv-upload-area cdtv-upload-area--small" id="cdtv-drop-zone-replace">
                    <span class="dashicons dashicons-upload"></span>
                    <p><?php esc_html_e( 'Drop a new file here or click to select.', 'codede-table-viewer' ); ?></p>
                    <p class="cdtv-file-types"><?php esc_html_e( '.xlsx, .xls, .csv', 'codede-table-viewer' ); ?></p>
                    <input type="file" id="cdtv-file-input-replace" accept=".xlsx,.xls,.csv" style="display:none;">
                    <button class="button" id="cdtv-select-file-replace" type="button"><?php esc_html_e( 'Select File', 'codede-table-viewer' ); ?></button>
                </div>
                <p>
                    <label>
                        <input type="checkbox" id="cdtv-has-header-replace" <?php checked( $has_header ); ?>>
                        <?php esc_html_e( 'First row is a header row', 'codede-table-viewer' ); ?>
                    </label>
                </p>
                <div id="cdtv-upload-progress-replace" style="display:none;">
                    <span class="spinner is-active"></span>
                    <?php esc_html_e( 'Uploading & parsing…', 'codede-table-viewer' ); ?>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <!-- Table Settings -->
        <table class="form-table">
            <tr>
                <th><label for="cdtv-table-title"><?php esc_html_e( 'Table Title', 'codede-table-viewer' ); ?></label></th>
                <td>
                    <input type="text" id="cdtv-table-title" class="regular-text"
                        value="<?php echo esc_attr( $table_title ); ?>"
                        placeholder="<?php esc_attr_e( 'My Table', 'codede-table-viewer' ); ?>">
                </td>
            </tr>
            <?php if ( ! $is_edit ) : ?>
            <tr>
                <th><?php esc_html_e( 'Header Row', 'codede-table-viewer' ); ?></th>
                <td>
                    <label>
                        <input type="checkbox" id="cdtv-has-header-step2" checked>
                        <?php esc_html_e( 'First row is a header row', 'codede-table-viewer' ); ?>
                    </label>
                </td>
            </tr>
            <?php endif; ?>
            <tr>
                <th><label for="cdtv-custom-css"><?php esc_html_e( 'Custom CSS', 'codede-table-viewer' ); ?></label></th>
                <td>
                    <textarea id="cdtv-custom-css" class="large-text code" rows="10"
                        placeholder="/* Example: change header color */&#10;.cdtv-table thead th {&#10;    background-color: #2271b1;&#10;    color: #ffffff;&#10;}"><?php echo esc_textarea( $custom_css ); ?></textarea>
                    <p class="description">
                        <?php esc_html_e( 'Write full CSS rules using .cdtv-table as base selector. Rules are automatically scoped to this table.', 'codede-table-viewer' ); ?>
                        &nbsp;<button type="button" class="button button-small" id="cdtv-load-default-css">
                            <?php esc_html_e( '📋 Load default design', 'codede-table-viewer' ); ?>
                        </button>
                    </p>
                </td>
            </tr>

            <!-- Horizontal Scroll -->
            <tr>
                <th><?php esc_html_e( 'Horizontal Scroll', 'codede-table-viewer' ); ?></th>
                <td>
                    <div class="cdtv-scroll-options">
                        <label class="cdtv-scroll-option <?php echo 'auto' === $scroll_mode ? 'active' : ''; ?>">
                            <input type="radio" name="cdtv_scroll_mode" id="cdtv-scroll-auto" value="auto" <?php checked( $scroll_mode, 'auto' ); ?>>
                            <span class="cdtv-scroll-icon">⟺</span>
                            <span class="cdtv-scroll-label">
                                <strong><?php esc_html_e( 'Auto', 'codede-table-viewer' ); ?></strong>
                                <em><?php esc_html_e( 'Scrollbar appears only when table is wider than the page', 'codede-table-viewer' ); ?></em>
                            </span>
                        </label>
                        <label class="cdtv-scroll-option <?php echo 'always' === $scroll_mode ? 'active' : ''; ?>">
                            <input type="radio" name="cdtv_scroll_mode" id="cdtv-scroll-always" value="always" <?php checked( $scroll_mode, 'always' ); ?>>
                            <span class="cdtv-scroll-icon">↔</span>
                            <span class="cdtv-scroll-label">
                                <strong><?php esc_html_e( 'Immer an', 'codede-table-viewer' ); ?></strong>
                                <em><?php esc_html_e( 'Scrollbar always visible – visitors see immediately that they can scroll', 'codede-table-viewer' ); ?></em>
                            </span>
                        </label>
                        <label class="cdtv-scroll-option <?php echo 'off' === $scroll_mode ? 'active' : ''; ?>">
                            <input type="radio" name="cdtv_scroll_mode" id="cdtv-scroll-off" value="off" <?php checked( $scroll_mode, 'off' ); ?>>
                            <span class="cdtv-scroll-icon">✕</span>
                            <span class="cdtv-scroll-label">
                                <strong><?php esc_html_e( 'Aus', 'codede-table-viewer' ); ?></strong>
                                <em><?php esc_html_e( 'No horizontal scroll – table wraps or overflows', 'codede-table-viewer' ); ?></em>
                            </span>
                        </label>
                    </div>
                    <input type="hidden" id="cdtv-scroll-mode-val" value="<?php echo esc_attr( $scroll_mode ); ?>">
                </td>
            </tr>

            <!-- Pro Features: Search, Sort, Reset Formatting -->
            <?php if ( $is_licensed ) : ?>
            <tr>
                <th><?php esc_html_e( 'Search', 'codede-table-viewer' ); ?> <span class="cdtv-pro-badge">Pro</span></th>
                <td>
                    <label class="cdtv-toggle-label">
                        <input type="checkbox" id="cdtv-enable-search" value="1" <?php checked( $enable_search ); ?>>
                        <span><?php esc_html_e( 'Show live search field above the table', 'codede-table-viewer' ); ?></span>
                    </label>
                    <p class="description">
                        <?php esc_html_e( 'Visitors can filter all rows in real time by typing in a search field.', 'codede-table-viewer' ); ?>
                    </p>
                </td>
            </tr>
            <tr>
                <th><?php esc_html_e( 'Sort columns', 'codede-table-viewer' ); ?> <span class="cdtv-pro-badge">Pro</span></th>
                <td>
                    <label class="cdtv-toggle-label">
                        <input type="checkbox" id="cdtv-enable-sort" value="1" <?php checked( $enable_sort ); ?>>
                        <span><?php esc_html_e( 'Make column headers clickable to sort', 'codede-table-viewer' ); ?></span>
                    </label>
                    <p class="description">
                        <?php esc_html_e( 'Click any column header to sort ascending or descending. Supports text and numeric values.', 'codede-table-viewer' ); ?>
                    </p>
                </td>
            </tr>
            <tr>
                <th><?php esc_html_e( 'Excel Cell Formatting', 'codede-table-viewer' ); ?> <span class="cdtv-pro-badge">Pro</span></th>
                <td>
                    <label class="cdtv-toggle-label">
                        <input type="checkbox" id="cdtv-enable-excel-format" value="1" <?php checked( $enable_excel_format ); ?>>
                        <span><?php esc_html_e( 'Apply Excel colors, fonts &amp; styles to cells', 'codede-table-viewer' ); ?></span>
                    </label>
                    <p class="description">
                        <?php esc_html_e( 'When enabled, cell background colors, font colors, bold, italic and font sizes from your Excel file are applied directly to the table. Disable if you prefer a clean custom design.', 'codede-table-viewer' ); ?>
                    </p>
                </td>
            </tr>
            <?php else : ?>
            <tr>
                <td colspan="2">
                    <div class="cdtv-pro-teaser">
                        <strong>⚡ <?php esc_html_e( 'Pro features:', 'codede-table-viewer' ); ?></strong>
                        <?php esc_html_e( 'Live search, column sorting and full Excel formatting are available in the Pro version.', 'codede-table-viewer' ); ?>
                        <a href="<?php echo esc_url( admin_url( 'admin.php?page=cdtv-upgrade' ) ); ?>" class="button button-small" style="margin-left:8px;">
                            <?php esc_html_e( 'Upgrade to Pro →', 'codede-table-viewer' ); ?>
                        </a>
                    </div>
                </td>
            </tr>
            <?php endif; ?>

            <!-- Rows per page (Pro only – configure via Design Generator) -->
            <?php if ( $is_licensed ) : ?>
            <tr>
                <th><label for="cdtv-rows-per-page"><?php esc_html_e( 'Rows per page', 'codede-table-viewer' ); ?></label> <span class="cdtv-pro-badge">Pro</span></th>
                <td>
                    <select id="cdtv-rows-per-page">
                        <?php
                        $rpp_options = array( 0 => __( 'Show all rows', 'codede-table-viewer' ), 5 => '5', 10 => '10', 15 => '15', 20 => '20', 25 => '25', 50 => '50', 100 => '100' );
                        foreach ( $rpp_options as $val => $label ) :
                        ?>
                        <option value="<?php echo esc_attr( $val ); ?>" <?php selected( $rows_per_page, $val ); ?>><?php echo esc_html( $label ); ?></option>
                        <?php endforeach; ?>
                    </select>
                    <p class="description">
                        <?php esc_html_e( 'Rows per page can also be set in the Design Generator.', 'codede-table-viewer' ); ?>
                    </p>
                </td>
            </tr>
            <?php endif; ?>

            <!-- Border Editor -->
            <tr>
                <th><?php esc_html_e( 'Borders', 'codede-table-viewer' ); ?></th>
                <td>
                    <div class="cdtv-border-editor">

                        <!-- Preset buttons -->
                        <div class="cdtv-border-presets">
                            <button type="button" class="cdtv-border-preset <?php echo 'none' === $b_preset ? 'active' : ''; ?>" data-preset="none">
                                <span class="cdtv-border-icon cdtv-border-icon--none"></span>
                                <?php esc_html_e( 'None', 'codede-table-viewer' ); ?>
                            </button>
                            <button type="button" class="cdtv-border-preset <?php echo 'outer' === $b_preset ? 'active' : ''; ?>" data-preset="outer">
                                <span class="cdtv-border-icon cdtv-border-icon--outer"></span>
                                <?php esc_html_e( 'Outer only', 'codede-table-viewer' ); ?>
                            </button>
                            <button type="button" class="cdtv-border-preset <?php echo 'all' === $b_preset ? 'active' : ''; ?>" data-preset="all">
                                <span class="cdtv-border-icon cdtv-border-icon--all"></span>
                                <?php esc_html_e( 'All cells', 'codede-table-viewer' ); ?>
                            </button>
                        </div>

                        <!-- Options row (hidden when preset = none) -->
                        <div class="cdtv-border-options" <?php echo 'none' === $b_preset ? 'style="display:none;"' : ''; ?>>
                            <label><?php esc_html_e( 'Style', 'codede-table-viewer' ); ?>
                                <select id="cdtv-border-style">
                                    <?php foreach ( array( 'solid' => __( 'Solid', 'codede-table-viewer' ), 'dashed' => __( 'Dashed', 'codede-table-viewer' ), 'dotted' => __( 'Dotted', 'codede-table-viewer' ), 'double' => __( 'Double', 'codede-table-viewer' ) ) as $val => $label ) : ?>
                                    <option value="<?php echo esc_attr( $val ); ?>" <?php selected( $b_style, $val ); ?>><?php echo esc_html( $label ); ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </label>
                            <label><?php esc_html_e( 'Color', 'codede-table-viewer' ); ?>
                                <input type="color" id="cdtv-border-color" value="<?php echo esc_attr( $b_color ); ?>">
                            </label>
                            <label><?php esc_html_e( 'Width', 'codede-table-viewer' ); ?>
                                <select id="cdtv-border-width">
                                    <?php foreach ( array( 1 => '1px', 2 => '2px', 3 => '3px', 4 => '4px', 5 => '5px' ) as $px => $lbl ) : ?>
                                    <option value="<?php echo esc_attr( $px ); ?>" <?php selected( $b_width, $px ); ?>><?php echo esc_html( $lbl ); ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </label>
                        </div>

                        <!-- Hidden fields for form submission -->
                        <input type="hidden" id="cdtv-border-preset-val" value="<?php echo esc_attr( $b_preset ); ?>">
                    </div>
                </td>
            </tr>
        </table>

        <h3><?php esc_html_e( 'Preview', 'codede-table-viewer' ); ?></h3>
        <div id="cdtv-preview-wrap" class="cdtv-preview-area">
            <?php if ( $is_edit ) : ?>
            <p class="cdtv-loading-preview">
                <span class="spinner is-active" style="float:none;vertical-align:middle;"></span>
                <?php esc_html_e( 'Loading preview…', 'codede-table-viewer' ); ?>
            </p>
            <?php endif; ?>
        </div>

        <p class="cdtv-step2-actions">
            <button class="button button-primary" id="cdtv-save-table">
                <span class="dashicons dashicons-yes" style="vertical-align:middle;margin-right:2px;"></span>
                <?php esc_html_e( 'Save Table', 'codede-table-viewer' ); ?>
            </button>
            <?php if ( ! $is_edit ) : ?>
            <button class="button" id="cdtv-back-step1">
                <?php esc_html_e( '← Back', 'codede-table-viewer' ); ?>
            </button>
            <?php else : ?>
            <a href="<?php echo esc_url( admin_url( 'admin.php?page=cdtv-tables' ) ); ?>" class="button">
                <?php esc_html_e( '← All Tables', 'codede-table-viewer' ); ?>
            </a>
            <?php endif; ?>
        </p>

        <input type="hidden" id="cdtv-table-id"    value="<?php echo esc_attr( $table_id ); ?>">
        <input type="hidden" id="cdtv-is-edit"     value="<?php echo $is_edit ? '1' : '0'; ?>">
        <input type="hidden" id="cdtv-has-header-val" value="<?php echo $has_header ? '1' : '0'; ?>">
    </div>

    <!-- Step 3: Done -->
    <div class="cdtv-wizard-panel" id="cdtv-step-3" style="display:none;">
        <div class="cdtv-success-box">
            <span class="dashicons dashicons-yes-alt"></span>
            <h2><?php esc_html_e( 'Table saved!', 'codede-table-viewer' ); ?></h2>
            <p><?php esc_html_e( 'Copy the shortcode below and paste it anywhere in your content.', 'codede-table-viewer' ); ?></p>
            <div class="cdtv-shortcode-result">
                <code id="cdtv-result-shortcode"></code>
                <button class="button" id="cdtv-copy-result"><?php esc_html_e( 'Copy Shortcode', 'codede-table-viewer' ); ?></button>
            </div>
            <p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=cdtv-tables' ) ); ?>" class="button">
                    <?php esc_html_e( '← All Tables', 'codede-table-viewer' ); ?>
                </a>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=cdtv-import' ) ); ?>" class="button button-primary">
                    <?php esc_html_e( '+ Add Another Table', 'codede-table-viewer' ); ?>
                </a>
            </p>
        </div>
    </div>
</div>
