<?php

namespace MovieEngine\Admin\ImportExport;

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

    public static function render() {
        $nonce = wp_create_nonce('movie_engine_import_export_nonce');
?>
        <div class="movie-engine-settings-wrapper me-import-export-redesign">
            <div class="movie-engine-settings-header me-transfer-hero">
                <div class="me-hero-gradient"></div>
                <div class="movie-engine-header-content">
                    <div class="movie-engine-header-left">
                        <span class="movie-engine-logo">
                            <span class="fa-solid fa-right-left"></span>
                            <h1><?php esc_html_e('Transfer Center', 'cine-movie-engine'); ?></h1>
                        </span>
                        <p class="me-hero-subtitle"><?php esc_html_e('Securely backup your configurations or migrate your entire MovieEngine setup to a new environment.', 'cine-movie-engine'); ?></p>
                    </div>
                </div>
            </div>

            <div class="movie-engine-settings-container" style="display: block; padding: 0;">
                <?php settings_errors('movie_engine_import'); ?>

                <div class="movie-engine-dashboard-grid" style="grid-template-columns: repeat(2, 1fr); gap: 30px;">
                    <div class="movie-engine-card me-transfer-card export">
                        <div class="me-card-accent"></div>
                        <div class="movie-engine-card-header">
                            <div class="me-header-inner">
                                <div class="me-icon-container">
                                    <span class="fa-solid fa-file-export"></span>
                                </div>
                                <h3><?php esc_html_e('Package Settings', 'cine-movie-engine'); ?></h3>
                            </div>
                        </div>
                        <div class="movie-engine-card-body">
                            <p class="me-description"><?php esc_html_e('Create a snapshot of all your functional settings, design tweaks, and API credentials.', 'cine-movie-engine'); ?></p>

                            <ul class="me-transfer-features">
                                <li><i class="fa-solid fa-check"></i> <?php esc_html_e('All Design Colors & Layouts', 'cine-movie-engine'); ?></li>
                                <li><i class="fa-solid fa-check"></i> <?php esc_html_e('API Keys & Service Configs', 'cine-movie-engine'); ?></li>
                                <li><i class="fa-solid fa-check"></i> <?php esc_html_e('Payment Gateway Settings', 'cine-movie-engine'); ?></li>
                            </ul>

                            <form method="post" action="" class="me-mt-auto">
                                <?php wp_nonce_field('movie_engine_export_action', 'movie_engine_export_nonce'); ?>
                                <input type="hidden" name="movie_engine_export" value="1">
                                <button type="submit" class="me-btn-primary me-w-100 me-py-4 me-flex-center me-gap-3">
                                    <span class="fa-solid fa-cloud-arrow-down"></span>
                                    <?php esc_html_e('Generate Export File', 'cine-movie-engine'); ?>
                                </button>
                            </form>
                        </div>
                    </div>

                    <div class="movie-engine-card me-transfer-card import">
                        <div class="me-card-accent"></div>
                        <div class="movie-engine-card-header">
                            <div class="me-header-inner">
                                <div class="me-icon-container">
                                    <span class="fa-solid fa-file-import"></span>
                                </div>
                                <h3><?php esc_html_e('Restore Snapshot', 'cine-movie-engine'); ?></h3>
                            </div>
                        </div>
                        <div class="movie-engine-card-body">
                            <p class="me-description"><?php esc_html_e('Upload an existing configuration file to instantly apply it to this WordPress installation.', 'cine-movie-engine'); ?></p>

                            <form method="post" enctype="multipart/form-data" class="movie-engine-import-form me-h-100 me-flex-column">
                                <?php wp_nonce_field('movie_engine_import_action', 'movie_engine_import_nonce'); ?>
                                <div class="movie-engine-upload-area me-mb-4" id="me-import-dropzone">
                                    <div class="me-upload-icon">
                                        <span class="fa-solid fa-cloud-arrow-up"></span>
                                    </div>
                                    <div class="me-upload-text">
                                        <strong><?php esc_html_e('Click or Drag & Drop', 'cine-movie-engine'); ?></strong>
                                        <span><?php esc_html_e('Supported Format: .json', 'cine-movie-engine'); ?></span>
                                    </div>
                                    <input type="file" name="movie_engine_import_file" id="movie-engine-import-file" accept=".json" style="position: absolute; inset: 0; opacity: 0; cursor: pointer;">
                                </div>

                                <button type="submit" name="movie_engine_import_submit" class="me-btn-import me-w-100 me-py-4 me-flex-center me-gap-3">
                                    <span class="fa-solid fa-rotate-right"></span>
                                    <?php esc_html_e('Execute Restoration', 'cine-movie-engine'); ?>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="me-guidance-section me-mt-5">
                    <div class="me-guidance-grid">
                        <div class="me-guidance-item">
                            <div class="me-guidance-num">01</div>
                            <div class="me-guidance-content">
                                <h4><?php esc_html_e('Backup First', 'cine-movie-engine'); ?></h4>
                                <p><?php esc_html_e('Always create a database backup before importing a configuration snapshot.', 'cine-movie-engine'); ?></p>
                            </div>
                        </div>
                        <div class="me-guidance-item">
                            <div class="me-guidance-num">02</div>
                            <div class="me-guidance-content">
                                <h4><?php esc_html_e('File Security', 'cine-movie-engine'); ?></h4>
                                <p><?php esc_html_e('Export files contain sensitive API data. Store them in an encrypted location.', 'cine-movie-engine'); ?></p>
                            </div>
                        </div>
                        <div class="me-guidance-item">
                            <div class="me-guidance-num">03</div>
                            <div class="me-guidance-content">
                                <h4><?php esc_html_e('Settings Only', 'cine-movie-engine'); ?></h4>
                                <p><?php esc_html_e('This tool only migrates plugin settings, not your actual movies or video files.', 'cine-movie-engine'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<?php
    }
}
