<?php
/**
 * Structure Viewer Pro — FlatPack tab panel view.
 *
 * Included from includes/Admin/views/page.php inside the #sv-tab-flatpack
 * sv-tab-pane. No variables need to be passed in; everything is AJAX-driven.
 *
 * Workflow:
 *   1. Upload ZIP  →  "Extract Files" button appears.
 *   2. Click "Extract Files"  →  ALL files are extracted and shown in
 *      the preview. Filter options appear inside the preview card.
 *   3. Choose filter  →  preview list updates live (client-side, no AJAX).
 *   4. Click "Run FlatPack"  →  chosen filter is sent to the server which
 *      applies it, builds the flat ZIP, and returns a download link.
 */
if ( ! defined( 'ABSPATH' ) ) { exit; }
?>

<?php /* ── Inline message container ────────────────────────────────── */ ?>
<div id="svfp-message-container"></div>

<?php /* ── Page header ─────────────────────────────────────────────── */ ?>
<div class="sv-settings-page-header">
    <h1 class="sv-page-title"><?php esc_html_e( 'FlatPack', 'structure-viewer' ); ?></h1>
    <p class="sv-page-subtitle"><?php esc_html_e( 'Upload a plugin or theme ZIP to extract and flatten all files into a single downloadable archive.', 'structure-viewer' ); ?></p>
</div>

<div class="svfp-layout">

    <?php /* ══════════════════════════════════════════════════════
           ── Left: Upload → Extract → (Filter + Preview) → Run FlatPack
           ══════════════════════════════════════════════════════ */ ?>
    <div class="svfp-main">

        <?php /* ── 1. Upload area ──────────────────────────────── */ ?>
        <div class="svfp-card" id="svfp-upload-card">
            <h2 class="svfp-card-title">
                <svg viewBox="0 0 24 24" fill="none" width="16" height="16"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                <?php esc_html_e( 'Upload ZIP File', 'structure-viewer' ); ?>
            </h2>

            <div class="svfp-upload" id="svfp-upload-area">
                <div class="svfp-upload__icon">
                    <svg viewBox="0 0 24 24" fill="none" width="36" height="36"><path d="M21 8H3M21 8v12a1 1 0 01-1 1H4a1 1 0 01-1-1V8M21 8l-2-5H5L3 8" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M10 13h4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
                </div>
                <label for="svfp_zip_file" class="svfp-upload__label">
                    <?php esc_html_e( 'Choose a ZIP file or drag it here', 'structure-viewer' ); ?>
                </label>
                <p class="svfp-upload__hint"><?php esc_html_e( 'Accepted format: .zip files only', 'structure-viewer' ); ?></p>
                <input type="file" name="svfp_zip_file" id="svfp_zip_file" accept=".zip" class="svfp-upload__input">
                <div class="svfp-upload__filename" id="svfp-filename" style="display:none;"></div>
            </div>
        </div>

        <?php /* ── 2. Progress bar ─────────────────────────────── */ ?>
        <div class="svfp-card" id="svfp-progress" style="display:none;">
            <div class="svfp-progress__bar-wrap">
                <div class="svfp-progress__bar">
                    <div class="svfp-progress__fill" id="svfp-progress-fill" style="width:0%;"></div>
                </div>
                <span class="svfp-progress__pct" id="svfp-progress-pct">0%</span>
            </div>
            <p class="svfp-progress__status" id="svfp-progress-status">
                <?php esc_html_e( 'Extracting…', 'structure-viewer' ); ?>
            </p>
        </div>

        <?php /* ── 3. File preview (with inline filter) ─────────── */ ?>
        <div class="svfp-card" id="svfp-preview" style="display:none;">

            <?php /* Header */ ?>
            <div class="svfp-preview__header">
                <h2 class="svfp-card-title">
                    <svg viewBox="0 0 24 24" fill="none" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.8"/></svg>
                    <?php esc_html_e( 'File Preview', 'structure-viewer' ); ?>
                </h2>
                <div class="svfp-preview__badges">
                    <span class="svfp-badge" id="svfp-visible-count"></span>
                    <span class="svfp-badge" id="svfp-total-size"></span>
                </div>
            </div>

            <?php /* Filter — shown inside preview card so users see the live effect */ ?>
            <div class="svfp-filter">
                <p class="svfp-filter__label-header">
                    <svg viewBox="0 0 24 24" fill="none" width="13" height="13"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <?php esc_html_e( 'Filter files to include in FlatPack', 'structure-viewer' ); ?>
                </p>
                <div class="svfp-filter__options" id="svfp-filter-options">
                    <?php /* Populated dynamically by sv-flatpack.js after ZIP analysis */ ?>
                </div>

                <div class="svfp-filter__custom" id="svfp-custom-ext" style="display:none;">
                    <input type="text" id="svfp_custom_extensions"
                        placeholder="<?php esc_attr_e( 'e.g. txt, md, json', 'structure-viewer' ); ?>"
                        class="svfp-input">
                    <p class="svfp-input-hint"><?php esc_html_e( 'Separate multiple extensions with commas', 'structure-viewer' ); ?></p>
                </div>
            </div><!-- /.svfp-filter -->

            <?php /* Search */ ?>
            <div class="svfp-preview__search">
                <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="1.9"/><path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/></svg>
                <input type="text" id="svfp-search"
                    placeholder="<?php esc_attr_e( 'Search files…', 'structure-viewer' ); ?>"
                    class="svfp-search-input">
            </div>

            <?php /* File list */ ?>
            <div class="svfp-preview__list" id="svfp-preview-list">
                <?php /* Populated by sv-flatpack.js */ ?>
            </div>

        </div><!-- /#svfp-preview -->

        <?php /* ── 4. Download success ─────────────────────────── */ ?>
        <div class="svfp-download" id="svfp-download" style="display:none;">
            <div class="svfp-download__inner">
                <svg viewBox="0 0 24 24" fill="none" width="36" height="36"><path d="M22 11.08V12a10 10 0 11-5.93-9.14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M22 4L12 14.01l-3-3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                <h3><?php esc_html_e( 'FlatPack Complete!', 'structure-viewer' ); ?></h3>
                <p><?php esc_html_e( 'Your files have been flattened and packaged successfully.', 'structure-viewer' ); ?></p>
                <a href="#" id="svfp-download-link" class="svfp-btn svfp-btn-primary" download>
                    <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <?php esc_html_e( 'Download ZIP', 'structure-viewer' ); ?>
                </a>
            </div>
        </div>

        <?php /* ── 5. Action buttons ──────────────────────────────── */ ?>
        <div class="svfp-actions">
            <button type="button" id="svfp-analyze-btn" class="svfp-btn svfp-btn-primary" style="display:none;">
                <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M21 8H3M21 8v12a1 1 0 01-1 1H4a1 1 0 01-1-1V8M21 8l-2-5H5L3 8" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M10 13h4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                <?php esc_html_e( 'Extract Files', 'structure-viewer' ); ?>
            </button>

            <button type="button" id="svfp-extract-btn" class="svfp-btn svfp-btn-primary" style="display:none;">
                <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                <?php esc_html_e( 'Run FlatPack', 'structure-viewer' ); ?>
            </button>

            <button type="button" id="svfp-reset-btn" class="svfp-btn svfp-btn-secondary" style="display:none;">
                <svg viewBox="0 0 24 24" fill="none" width="14" height="14"><path d="M1 4v6h6M23 20v-6h-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                <?php esc_html_e( 'Start Over', 'structure-viewer' ); ?>
            </button>
        </div>

    </div><!-- /.svfp-main -->

    <?php /* ══════════════════════════════════════════════════════
           ── Right: How-it-works sidebar
           ══════════════════════════════════════════════════════ */ ?>
    <div class="svfp-sidebar">
        <div class="svfp-card">
            <h2 class="svfp-card-title">
                <svg viewBox="0 0 24 24" fill="none" width="16" height="16"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.8"/><path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
                <?php esc_html_e( 'How it works', 'structure-viewer' ); ?>
            </h2>

            <ol class="svfp-steps">
                <li><strong><?php esc_html_e( 'Upload:', 'structure-viewer' ); ?></strong>&nbsp;<?php esc_html_e( 'Select a plugin or theme ZIP', 'structure-viewer' ); ?></li>
                <li><strong><?php esc_html_e( 'Extract Files:', 'structure-viewer' ); ?></strong>&nbsp;<?php esc_html_e( 'All files are listed in the preview', 'structure-viewer' ); ?></li>
                <li><strong><?php esc_html_e( 'Filter:', 'structure-viewer' ); ?></strong>&nbsp;<?php esc_html_e( 'Choose file types to include — the preview updates instantly', 'structure-viewer' ); ?></li>
                <li><strong><?php esc_html_e( 'Run FlatPack:', 'structure-viewer' ); ?></strong>&nbsp;<?php esc_html_e( 'Only the filtered files are packed', 'structure-viewer' ); ?></li>
                <li><strong><?php esc_html_e( 'Download:', 'structure-viewer' ); ?></strong>&nbsp;<?php esc_html_e( 'Get your flat ZIP file', 'structure-viewer' ); ?></li>
            </ol>

            <div class="svfp-naming-guide">
                <p class="svfp-naming-guide__heading"><?php esc_html_e( 'Smart Naming', 'structure-viewer' ); ?></p>
                <p class="svfp-naming-guide__rule">
                    <strong><?php esc_html_e( 'Unique files:', 'structure-viewer' ); ?></strong>
                    <?php esc_html_e( 'keep their original name', 'structure-viewer' ); ?>
                </p>
                <code>readme.txt → readme.txt</code>
                <p class="svfp-naming-guide__rule">
                    <strong><?php esc_html_e( 'Duplicate basenames:', 'structure-viewer' ); ?></strong>
                    <?php esc_html_e( 'get a folder prefix', 'structure-viewer' ); ?>
                </p>
                <code>assets/style.css → assets-style.css</code>
                <code>css/style.css &nbsp;&nbsp; → css-style.css</code>
            </div>
        </div>
    </div>

</div><!-- /.svfp-layout -->