<section class="workspace-hero">
    <div>
        <h2>Campaign Studio</h2>
        <p>Design commercial-grade campaigns with the drag-and-drop email builder, advanced preflight checks, multi-variant testing, and launch controls.</p>
    </div>
    <div class="workspace-actions">
        <a class="btn secondary small" href="index.php?route=messages/campaignDashboard">Campaign Dashboard</a>
        <a class="btn secondary small" href="index.php?route=messages/campaignReports">Campaign Reports</a>
    </div>
</section>

<section>
    <div class="card commercial-campaign-card">
        <div class="toolbar"><h2>Commercial Campaign</h2><span class="badge">V15.5</span></div>
        <div class="commercial-campaign-overview">
            <div class="campaign-overview-copy">
                <p class="small muted">Keep campaign planning, design, readiness, and launch controls together in one commercial campaign workspace.</p>
                <ul class="clean-list small compact-list">
                    <li>Drag-and-drop builder blocks with live preview and raw HTML fallback.</li>
                    <li>Control, Variant A, and Variant B testing for commercial email launches.</li>
                    <li>Preflight checks that catch provider, audience, subject, and content issues before queueing.</li>
                    <li>Deliverability-first release planning centered on system health and recovery visibility.</li>
                </ul>
            </div>
            <div class="studio-readiness-inline">
                <div class="toolbar compact-toolbar"><strong>Studio Readiness</strong><span class="badge">Launch prep</span></div>
                <div class="metric-strip">
                    <div class="metric-chip"><strong><?= !empty($providerStatus['smtp']['configured']) ? 'Ready' : 'Fix' ?></strong><span class="small muted"><?= e(($providerStatus['smtp']['label'] ?? 'Mail') . ' status') ?></span></div>
                    <div class="metric-chip"><strong><?= !empty($providerStatus['twilio']['configured']) ? 'Ready' : 'Fix' ?></strong><span class="small muted">Twilio status</span></div>
                    <div class="metric-chip"><strong><?= number_format((float)($healthSummary['bounce_rate'] ?? 0), 1) ?>%</strong><span class="small muted">recent bounce rate</span></div>
                </div>
                <div class="alert-list">
                    <?php foreach (array_slice(($deliverabilityAlerts ?? []), 0, 3) as $alert): ?>
                        <article class="alert-tile <?= e($alert['severity']) ?>"><strong><?= e($alert['title']) ?></strong><div class="small muted"><?= e($alert['detail']) ?></div></article>
                    <?php endforeach; ?>
                </div>
                <ul class="feature-list small">
                    <li>Use Campaign Dashboard for delivery, bounce, queue backlog, suppression, and trend monitoring.</li>
                    <li>Use Campaign Reports for recovery queue work and detailed campaign reports after launch.</li>
                    <li>System Health + Deliverability Center remains the strongest next move for trust and reliability.</li>
                </ul>
            </div>
        </div>

        <div class="toolbar section-toolbar"><h3>Campaign Studio</h3><span class="badge">Builder</span></div>
        <form method="post" action="index.php?route=messages/createCampaign" id="campaign-form">
            <?= csrf_input() ?>
            <div class="form-grid three">
                <input name="name" placeholder="Campaign name" required>
                <select name="channel" id="campaign-channel"><option value="email">Email</option><option value="sms">SMS</option></select>
                <select name="template_id" id="campaign-template"><option value="">Choose template</option><?php foreach (($templates ?? []) as $template): ?><option value="<?= (int)$template['id'] ?>" data-type="<?= e($template['type']) ?>"><?= e($template['name']) ?> (<?= e($template['type']) ?>)</option><?php endforeach; ?></select>
            </div>

            <div class="composer-shell mt-12">
                <div>
                    <div class="builder-palette">
                        <button type="button" class="btn secondary small builder-add" data-block="hero">+ Hero</button>
                        <button type="button" class="btn secondary small builder-add" data-block="heading">+ Heading</button>
                        <button type="button" class="btn secondary small builder-add" data-block="text">+ Text</button>
                        <button type="button" class="btn secondary small builder-add" data-block="image">+ Image</button>
                        <button type="button" class="btn secondary small builder-add" data-block="cta">+ CTA</button>
                        <button type="button" class="btn secondary small builder-add" data-block="divider">+ Divider</button>
                        <button type="button" class="btn secondary small builder-add" data-block="spacer">+ Spacer</button>
                    </div>
                    <input type="hidden" name="builder_json" id="campaign-builder-json">
                    <div id="builder-canvas" class="builder-canvas builder-dropzone"></div>
                    <div class="small muted">Drag blocks to reorder. The builder keeps the raw HTML editor below in sync.</div>

                    <div class="form-grid three mt-12">
                        <input name="segment_name" placeholder="Segment label">
                        <select name="segment_id"><option value="">Saved segment</option><?php foreach (($segments ?? []) as $segment): ?><option value="<?= (int)$segment['id'] ?>"><?= e($segment['name']) ?></option><?php endforeach; ?></select>
                        <select name="contact_list_id" id="campaign-contact-list"><option value="">Saved contact list</option><?php foreach (($contactLists ?? []) as $list): ?><option value="<?= (int)$list['id'] ?>" data-channel="<?= e($list['channel']) ?>"><?= e($list['name']) ?> (<?= e(strtoupper($list['channel'])) ?>)</option><?php endforeach; ?></select>
                    </div>
                    <div class="form-grid two">
                        <input name="recipient_filter" placeholder="Contact tag filter">
                        <input name="scheduled_at" type="datetime-local">
                    </div>
                    <div class="form-grid two">
                        <label class="permission-pill"><input type="checkbox" name="send_time_optimization" value="1"> <span>Send-time optimization</span></label>
                        <div class="small muted">Use the deliverability center to decide whether to stage or launch immediately.</div>
                    </div>
                    <input name="subject_override" id="campaign-subject" placeholder="Subject override for email">
                    <textarea name="body_override" id="campaign-body" rows="8" placeholder="Fallback HTML / raw editor. Builder blocks keep this field updated."></textarea>

                    <details class="mt-12" open>
                        <summary><strong>Multi-variant testing</strong></summary>
                        <div class="form-grid two mt-12">
                            <label class="permission-pill"><input type="checkbox" name="ab_enabled" value="1"> <span>Enable control + A/B split</span></label>
                            <div class="small muted">Run a control version plus Variant A and Variant B content to compare opens, clicks, and bounce behavior.</div>
                            <input name="variant_a_subject" placeholder="Variant A subject (email)">
                            <input name="variant_b_subject" placeholder="Variant B subject (email)">
                            <textarea name="variant_a_body" rows="5" placeholder="Variant A body"></textarea>
                            <textarea name="variant_b_body" rows="5" placeholder="Variant B body"></textarea>
                        </div>
                    </details>

                    <details class="mt-12">
                        <summary><strong>Launch controls</strong></summary>
                        <div class="form-grid three mt-12">
                            <label class="permission-pill"><input type="checkbox" name="recurring_enabled" value="1"> <span>Recurring campaign</span></label>
                            <select name="recurring_rule"><option value="daily">Daily</option><option value="weekly">Weekly</option><option value="monthly">Monthly</option></select>
                            <select name="submit_mode">
                                <option value="queue">Queue / schedule immediately</option>
                                <option value="approval">Save for approval</option>
                                <option value="draft">Save as draft</option>
                            </select>
                        </div>
                    </details>
                </div>
                <div class="stacked-panel">
                    <div class="preview-box">
                        <div class="toolbar compact-toolbar"><strong>Live preview</strong><span class="badge">Drag-and-drop</span></div>
                        <div id="campaign-preview">Choose a template or add builder blocks to preview the campaign body here.</div>
                    </div>
                    <div class="preflight-card" id="campaign-preflight-panel">
                        <div class="toolbar compact-toolbar"><strong>Campaign preflight</strong><span class="badge">Commercial-grade</span></div>
                        <div id="campaign-preflight-summary" class="small muted">Checks update while you compose.</div>
                        <div id="campaign-preflight-list" class="preflight-list"></div>
                    </div>
                </div>
            </div>
            <button class="btn primary mt-12">Save Campaign</button>
        </form>
    </div>
</section>

<section class="grid two">
    <div class="card">
        <div class="toolbar"><h2>Recent Campaign Queue</h2><span class="badge">Quick access</span></div>
        <table>
            <thead><tr><th>Name</th><th>Channel</th><th>Status</th><th>Approval</th><th></th></tr></thead>
            <tbody>
            <?php foreach (($campaigns ?? []) as $campaign): ?>
                <tr>
                    <td><?= e($campaign['name']) ?></td>
                    <td><?= e(strtoupper($campaign['channel'])) ?></td>
                    <td><?= e($campaign['status']) ?></td>
                    <td><?= e($campaign['approval_status'] ?? 'not_required') ?></td>
                    <td class="actions-cell"><a class="btn secondary small" href="index.php?route=messages/report&id=<?= (int)$campaign['id'] ?>">Report</a></td>
                </tr>
            <?php endforeach; ?>
            <?php if (empty($campaigns)): ?><tr><td colspan="5" class="muted">No campaigns yet.</td></tr><?php endif; ?>
            </tbody>
        </table>
    </div>
    <div class="card">
        <div class="toolbar"><h2>Design Goals</h2><span class="badge">Commercial-grade</span></div>
        <ul class="clean-list small">
            <li>Drag-and-drop email builder with reusable blocks and live preview.</li>
            <li>Advanced analytics charts for deliverability, volume, and comparison.</li>
            <li>Campaign preflight checks that catch provider, audience, subject, and content issues.</li>
            <li>Multi-variant testing using control, Variant A, and Variant B.</li>
            <li>Deliverability-first release planning centered on system health and recovery visibility.</li>
        </ul>
    </div>
</section>

<script>
window.__TEMPLATES__ = <?= $templateJson ?>;
window.__CAMPAIGN_CONTEXT__ = <?= $campaignContextJson ?>;
</script>
