<?php
$editingEmail = (($editTemplate['type'] ?? 'email') === 'email');
$stats = $templateLibraryStats ?? ['total' => count($templates ?? []), 'email' => 0, 'sms' => 0, 'theme' => 0];
?>
<section class="workspace-hero">
    <div>
        <h2>Email Theme Creator</h2>
        <p>Design commercial-grade email themes in a larger canvas-first workspace with popup build tools, a docked live preview, and reusable templates that stay connected to Campaign Studio, Mail Center, and one-to-one sends.</p>
    </div>
    <div class="workspace-actions">
        <a class="btn secondary small" href="index.php?route=templates/library">Open Template Library</a>
        <a class="btn secondary small" href="index.php?route=messages/campaignStudio">Campaign Studio</a>
        <a class="btn secondary small" href="index.php?route=messages/mailCenter">Mail Center</a>
    </div>
</section>

<section class="theme-pro-shell-page">
    <div class="card theme-pro-studio-card">
        <div class="toolbar">
            <h2><?= !empty($editTemplate) ? 'Edit Template' : 'Create Template' ?></h2>
            <span class="badge"><?= !empty($editTemplate) ? 'Library item' : 'Workspace-first builder' ?></span>
        </div>

        <div class="theme-pro-brief-card">
            <div class="theme-pro-brief-copy">
                <span class="theme-pro-kicker">Quick start</span>
                <h3>Start with structure, then open tools only when you need them</h3>
                <p>Use the canvas as your primary workspace. Blocks, Brand &amp; Layout, and Advanced HTML/CSS open in popup tools so the editor stays clean and more professional.</p>
            </div>
            <div class="theme-pro-step-row">
                <div class="theme-pro-step is-active"><span>1</span><strong>Quick start</strong><small>Choose preset + add basics</small></div>
                <div class="theme-pro-step"><span>2</span><strong>Blocks</strong><small>Open the popup block drawer</small></div>
                <div class="theme-pro-step"><span>3</span><strong>Brand &amp; Layout</strong><small>Adjust width, colors, type</small></div>
                <div class="theme-pro-step"><span>4</span><strong>Preview</strong><small>Use the bottom dock or pop-out</small></div>
                <div class="theme-pro-step"><span>5</span><strong>Save</strong><small>Store it in Template Library</small></div>
            </div>
        </div>

        <div class="theme-pro-top-guide">
            <div class="theme-pro-guide-item">
                <strong>Workspace mode</strong>
                <span class="small muted">Popup tools keep the center canvas open and easier to design in.</span>
            </div>
            <div class="theme-pro-guide-item">
                <strong>Live edit preview</strong>
                <span class="small muted">Preview updates while you edit and can also pop out to a separate window.</span>
            </div>
            <div class="theme-pro-guide-item">
                <strong>Library ready</strong>
                <span class="small muted"><?= (int)$stats['total'] ?> saved templates, <?= (int)$stats['theme'] ?> theme layouts, and quick reopen from Workspace.</span>
            </div>
        </div>

        <form method="post" action="index.php?route=templates/save" enctype="multipart/form-data" id="email-theme-form-v3" data-template-creator-v2 data-image-upload-url="index.php?route=templates/uploadImage">
            <?= csrf_input() ?>
            <input type="hidden" name="id" value="<?= (int)($editTemplate['id'] ?? 0) ?>">
            <input type="hidden" name="theme_json" id="theme-json" value="<?= e((string)($editTemplate['theme_json'] ?? '')) ?>">
            <input type="hidden" name="theme_preset" id="theme-preset-hidden" value="<?= e((string)($editTemplate['theme_preset'] ?? 'newsletter')) ?>">

            <div class="theme-mode-toggle" role="tablist" aria-label="Template type">
                <label class="theme-mode-pill">
                    <input type="radio" name="type" value="email" <?= $editingEmail ? 'checked' : '' ?>>
                    <span>Email Theme Creator</span>
                </label>
                <label class="theme-mode-pill">
                    <input type="radio" name="type" value="sms" <?= !$editingEmail ? 'checked' : '' ?>>
                    <span>SMS/MMS Quick Template</span>
                </label>
            </div>

            <div class="form-grid three mt-12 theme-pro-meta-grid">
                <label>
                    <span class="small muted">Template name</span>
                    <input name="name" id="template-name" placeholder="Quarterly Product Launch" value="<?= e((string)($editTemplate['name'] ?? '')) ?>" required>
                </label>
                <label>
                    <span class="small muted">Email subject</span>
                    <input name="subject" id="template-subject" placeholder="Subject line for email sends" value="<?= e((string)($editTemplate['subject'] ?? '')) ?>">
                </label>
                <label data-email-only>
                    <span class="small muted">Preview text</span>
                    <input name="preview_text" id="template-preview-text" placeholder="Short inbox preview line" value="<?= e((string)($editTemplate['preview_text'] ?? '')) ?>">
                </label>
            </div>

            <div class="theme-email-shell theme-pro-email-shell" data-template-type-panel="email">
                <div class="theme-pro-commandbar mt-12">
                    <div class="theme-pro-commandbar-copy">
                        <strong>Template workspace</strong>
                        <div class="small muted">Keep the focus on the canvas. Open Blocks, Brand &amp; Layout, Advanced Code, and Preview only when you need them.</div>
                    </div>
                    <div class="theme-pro-commandbar-actions">
                        <label>
                            <span class="small muted">Preset</span>
                            <select id="theme-preset-select">
                                <option value="newsletter">Newsletter</option>
                                <option value="announcement">Announcement</option>
                                <option value="promotion">Promotion</option>
                                <option value="event">Event invite</option>
                                <option value="retention">Retention</option>
                                <option value="custom">Custom</option>
                            </select>
                        </label>
                        <span class="badge color-blue" id="theme-builder-status">Builder synced</span>
                        <button type="button" class="btn secondary small" data-theme-window-open="blocks">Blocks</button>
                        <button type="button" class="btn secondary small" data-theme-window-open="settings">Brand &amp; Layout</button>
                        <button type="button" class="btn secondary small" data-theme-window-open="code">Advanced HTML/CSS</button>
                        <button type="button" class="btn secondary small" id="theme-toggle-preview-dock">Hide Preview</button>
                        <button type="button" class="btn secondary small" id="theme-open-preview-window">Pop-out Preview</button>
                        <button type="button" class="btn secondary small" id="theme-copy-html">Copy HTML</button>
                        <button type="button" class="btn secondary small" id="theme-rebuild-html">Rebuild from Canvas</button>
                    </div>
                </div>

                <div class="theme-pro-workspace mt-12">
                    <section class="theme-pro-canvas-stage">
                        <div class="theme-pro-stage-head">
                            <div>
                                <strong>Design canvas</strong>
                                <div class="small muted">Drag sections to reorder, click a block to edit it, or use the popup tools to add layout components and theme controls.</div>
                            </div>
                            <div class="theme-pro-stage-actions">
                                <div class="theme-pro-stat-pill">
                                    <span class="small muted">Blocks</span>
                                    <strong id="theme-section-count">0</strong>
                                </div>
                                <div class="theme-pro-stat-pill">
                                    <span class="small muted">Selected</span>
                                    <strong id="theme-selected-label">None</strong>
                                </div>
                                <button type="button" class="btn danger small" id="theme-clear-canvas">Clear Canvas</button>
                            </div>
                        </div>
                        <div id="theme-canvas" class="theme-v2-canvas theme-pro-canvas"></div>
                    </section>

                    <aside class="theme-pro-right-rail">
                        <div class="theme-pro-outline-card">
                            <div class="theme-v2-panel-head">
                                <div>
                                    <strong>Structure outline</strong>
                                    <div class="small muted">Select any block quickly without losing your place on the canvas.</div>
                                </div>
                            </div>
                            <div id="theme-structure-outline" class="theme-pro-outline-list"></div>
                        </div>
                        <div class="theme-pro-inspector-card">
                            <div class="theme-v2-panel-head">
                                <div>
                                    <strong>Block inspector</strong>
                                    <div class="small muted">Edit the selected section here while the canvas stays visible.</div>
                                </div>
                            </div>
                            <div id="theme-section-inspector"></div>
                        </div>
                    </aside>
                </div>

                <section class="theme-pro-preview-dock is-open mt-12" id="theme-preview-dock">
                    <div class="theme-pro-preview-head">
                        <div>
                            <strong>Live preview</strong>
                            <div class="small muted">Review the rendered email at the bottom of the page or pop it out into a separate live preview window.</div>
                        </div>
                        <div class="theme-pro-preview-actions">
                            <div class="theme-pro-view-toggle" role="tablist" aria-label="Preview size">
                                <button type="button" class="is-active" data-theme-preview-device="desktop">Desktop</button>
                                <button type="button" data-theme-preview-device="mobile">Mobile</button>
                            </div>
                            <button type="button" class="btn secondary small" id="theme-preview-popout-secondary">Pop-out Preview</button>
                            <button type="button" class="btn secondary small" id="theme-preview-collapse">Collapse</button>
                        </div>
                    </div>
                    <div class="theme-pro-preview-frame-wrap" data-preview-device="desktop">
                        <iframe id="theme-preview-frame" title="Email theme preview"></iframe>
                    </div>
                </section>
            </div>

            <div class="theme-sms-shell mt-12" data-template-type-panel="sms">
                <div class="toolbar compact-toolbar"><strong>SMS/MMS template</strong><span class="badge">Quick template</span></div>
                <textarea name="sms_body_text" id="sms-body" rows="10" placeholder="Hi {{first_name}}, thanks for reaching out. Reply STOP to unsubscribe."><?= e((string)((($editTemplate['type'] ?? '') === 'sms') ? ($editTemplate['body'] ?? '') : '')) ?></textarea>
                <div class="small muted">Use merge variables like {{first_name}}, {{company}}, and {{unsubscribe_url}}.</div>
            </div>

            <div class="mt-12">
                <label class="small muted">Optional media or attachment</label>
                <input type="file" name="media_file">
                <?php if (!empty($editTemplate['media_path'])): ?>
                    <div class="small muted mt-12">Current file: <?= e((string)$editTemplate['media_path']) ?></div>
                <?php endif; ?>
            </div>

            <div class="actions-cell mt-12">
                <button class="btn primary"><?= !empty($editTemplate) ? 'Update Template' : 'Save Template' ?></button>
                <a class="btn secondary" href="index.php?route=templates/library">Template Library</a>
                <?php if (!empty($editTemplate)): ?><a class="btn secondary" href="index.php?route=templates/index">Cancel Edit</a><?php endif; ?>
            </div>

            <div class="theme-pro-window theme-pro-window--blocks" data-theme-window="blocks" data-theme-window-preset="left" hidden aria-hidden="true">
                <div class="theme-pro-window-head" data-theme-window-drag>
                    <div class="theme-pro-window-meta">
                        <strong>Blocks</strong>
                        <small>Drag blocks into the canvas or click to add after the selected section. Keep the drawer open, minimize it, or move it anywhere on screen.</small>
                    </div>
                    <div class="theme-pro-window-actions">
                        <span class="theme-pro-window-badge">Canvas linked</span>
                        <button type="button" class="btn secondary small" data-theme-window-minimize>Minimize</button>
                        <button type="button" class="btn secondary small" data-theme-window-close>Close</button>
                    </div>
                </div>
                <div class="theme-pro-window-body">
                    <div class="theme-pro-popup-grid">
                        <div class="theme-pro-popup-group">
                            <div class="theme-pro-group-label">Core layout</div>
                            <div class="theme-v2-palette-grid theme-pro-block-grid">
                                <button type="button" class="theme-v2-palette-item" data-theme-palette-item data-section="hero" draggable="true">
                                    <strong>Hero</strong>
                                    <span>Headline, intro, CTA</span>
                                </button>
                                <button type="button" class="theme-v2-palette-item" data-theme-palette-item data-section="text" draggable="true">
                                    <strong>Text</strong>
                                    <span>Copy block</span>
                                </button>
                                <button type="button" class="theme-v2-palette-item" data-theme-palette-item data-section="columns" draggable="true">
                                    <strong>Two Column</strong>
                                    <span>Side-by-side content</span>
                                </button>
                            </div>
                        </div>
                        <div class="theme-pro-popup-group">
                            <div class="theme-pro-group-label">Visual + action</div>
                            <div class="theme-v2-palette-grid theme-pro-block-grid">
                                <button type="button" class="theme-v2-palette-item" data-theme-palette-item data-section="image" draggable="true">
                                    <strong>Image</strong>
                                    <span>Banner or visual</span>
                                </button>
                                <button type="button" class="theme-v2-palette-item" data-theme-palette-item data-section="cta" draggable="true">
                                    <strong>CTA</strong>
                                    <span>Focused action panel</span>
                                </button>
                            </div>
                        </div>
                        <div class="theme-pro-popup-group">
                            <div class="theme-pro-group-label">Utilities</div>
                            <div class="theme-v2-palette-grid theme-pro-block-grid">
                                <button type="button" class="theme-v2-palette-item" data-theme-palette-item data-section="divider" draggable="true">
                                    <strong>Divider</strong>
                                    <span>Spacing rule</span>
                                </button>
                                <button type="button" class="theme-v2-palette-item" data-theme-palette-item data-section="footer" draggable="true">
                                    <strong>Footer</strong>
                                    <span>Support and unsubscribe</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="theme-pro-window theme-pro-window--settings" data-theme-window="settings" data-theme-window-preset="right" hidden aria-hidden="true">
                <div class="theme-pro-window-head" data-theme-window-drag>
                    <div class="theme-pro-window-meta">
                        <strong>Brand &amp; Layout</strong>
                        <small>Adjust width, typography, color, and shape in a floating design control window that works live with the editor.</small>
                    </div>
                    <div class="theme-pro-window-actions">
                        <span class="theme-pro-window-badge">Live controls</span>
                        <button type="button" class="btn secondary small" data-theme-window-minimize>Minimize</button>
                        <button type="button" class="btn secondary small" data-theme-window-close>Close</button>
                    </div>
                </div>
                <div class="theme-pro-window-body">
                    <div class="theme-v2-settings-grid theme-pro-settings-grid">
                        <label>
                            <span class="small muted">Content width</span>
                            <input type="number" id="theme-width" min="480" max="760" step="10" value="640">
                        </label>
                        <label>
                            <span class="small muted">Font family</span>
                            <select id="theme-font-family">
                                <option value="Arial, Helvetica, sans-serif">Arial</option>
                                <option value="'Helvetica Neue', Arial, sans-serif">Helvetica Neue</option>
                                <option value="Georgia, 'Times New Roman', serif">Georgia</option>
                                <option value="Tahoma, Verdana, sans-serif">Tahoma</option>
                                <option value="'Trebuchet MS', Arial, sans-serif">Trebuchet MS</option>
                            </select>
                        </label>
                        <label>
                            <span class="small muted">Canvas background</span>
                            <input type="color" id="theme-body-bg" value="#eef2f7">
                        </label>
                        <label>
                            <span class="small muted">Card background</span>
                            <input type="color" id="theme-card-bg" value="#ffffff">
                        </label>
                        <label>
                            <span class="small muted">Text color</span>
                            <input type="color" id="theme-text-color" value="#1f2937">
                        </label>
                        <label>
                            <span class="small muted">Accent color</span>
                            <input type="color" id="theme-accent-color" value="#1f5b92">
                        </label>
                        <label>
                            <span class="small muted">Button text</span>
                            <input type="color" id="theme-button-text-color" value="#ffffff">
                        </label>
                        <label>
                            <span class="small muted">Section radius</span>
                            <input type="number" id="theme-radius" min="0" max="32" step="2" value="18">
                        </label>
                    </div>
                </div>
            </div>

            <div class="theme-pro-window" data-theme-window="code" hidden aria-hidden="true">
                <div class="theme-pro-window-head" data-theme-window-drag>
                    <div class="theme-pro-window-meta">
                        <strong id="theme-code-window-title">Advanced HTML + CSS</strong>
                        <small>Live code editing in a draggable, minimizable window that stays linked to the canvas and preview.</small>
                    </div>
                    <div class="theme-pro-window-actions">
                        <span class="theme-pro-window-badge">Live preview linked</span>
                        <button type="button" class="btn secondary small" data-theme-window-minimize>Minimize</button>
                        <button type="button" class="btn secondary small" data-theme-window-close>Close</button>
                    </div>
                </div>
                <div class="theme-pro-window-body">
                    <div class="theme-v2-code-grid theme-pro-code-grid">
                        <div class="theme-v2-code-card">
                            <div class="toolbar compact-toolbar"><strong>HTML markup</strong><span class="badge">Editable</span></div>
                            <textarea name="theme_body_html" id="theme-body" rows="16" placeholder="Canvas-generated HTML will appear here. You can also paste in your own custom email markup."><?= e((string)($editTemplate['theme_html'] ?? (($editTemplate['type'] ?? 'email') === 'email' ? ($editTemplate['body'] ?? '') : ''))) ?></textarea>
                            <div class="small muted">Typing here switches the preview into custom HTML mode until you click <strong>Rebuild from Canvas</strong>.</div>
                        </div>
                        <div class="theme-v2-code-card">
                            <div class="toolbar compact-toolbar"><strong>Theme CSS</strong><span class="badge">Built-in editor</span></div>
                            <textarea name="theme_css" id="theme-css" rows="16" placeholder="Add CSS classes for typography, spacing, or responsive tweaks."><?= e((string)($editTemplate['theme_css'] ?? '')) ?></textarea>
                            <div class="small muted">CSS is saved with the template and stays available in Campaign Studio and Mail Center previews.</div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>

<script>
window.__EMAIL_THEME_CREATOR_V2__ = <?= json_encode($templateEditorState ?? [], JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>;
</script>
<script src="assets/js/template_creator_v2.js?v=16.8.2"></script>
