<% currentPage = 'campaigns' %>

<!-- Page Header - Compact & Mobile Friendly -->
<div class="d-flex align-items-center gap-3 mb-4">
    <a href="/campaigns" class="btn btn-light btn-sm" style="min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;">
        <i class="fas fa-arrow-left"></i>
    </a>
    <div class="flex-grow-1">
        <h4 class="mb-0 fw-bold" style="font-size: clamp(1rem, 4vw, 1.25rem);">
            <i class="fas fa-bullhorn me-2"></i>Create Campaign
        </h4>
        <small class="text-muted d-none d-sm-inline">Send bulk messages to your contacts</small>
    </div>
    <!-- Mobile Step Indicator -->
    <div class="d-lg-none">
        <span class="badge bg-success rounded-pill px-3 py-2" id="mobileStepBadge">
            Step 1/4
        </span>
    </div>
</div>

<!-- Wizard Steps - Desktop Only -->
<div class="wizard-steps-compact d-none d-lg-flex mb-4">
    <div class="wizard-step-compact active" data-step="1">
        <div class="step-indicator-compact">
            <span class="step-num">1</span>
            <i class="fas fa-check step-done"></i>
        </div>
        <span class="step-label">Info</span>
    </div>
    <div class="step-connector"></div>
    <div class="wizard-step-compact" data-step="2">
        <div class="step-indicator-compact">
            <span class="step-num">2</span>
            <i class="fas fa-check step-done"></i>
        </div>
        <span class="step-label">Contacts</span>
    </div>
    <div class="step-connector"></div>
    <div class="wizard-step-compact" data-step="3">
        <div class="step-indicator-compact">
            <span class="step-num">3</span>
            <i class="fas fa-check step-done"></i>
        </div>
        <span class="step-label">Message</span>
    </div>
    <div class="step-connector"></div>
    <div class="wizard-step-compact" data-step="4">
        <div class="step-indicator-compact">
            <span class="step-num">4</span>
            <i class="fas fa-check step-done"></i>
        </div>
        <span class="step-label">Preview</span>
    </div>
</div>

<form id="campaignForm">
    <div class="row g-3">
        <!-- Main Form Column -->
        <div class="col-lg-7">
            <!-- Step 1: Campaign Info -->
            <div class="step-content" data-step="1" style="display: block;">
                <div class="card shadow-sm">
                    <div class="card-body p-3">
                        <h6 class="fw-bold mb-3 d-flex align-items-center">
                            <span class="step-badge me-2">1</span>
                            Campaign Information
                        </h6>
                        
                        <!-- Campaign Name -->
                        <div class="mb-3">
                            <label class="form-label-compact">
                                <i class="fas fa-tag"></i> Campaign Name
                            </label>
                            <input type="text" class="form-control-compact" id="campaignName" 
                                   placeholder="e.g., Summer Sale 2024" required>
                            <small class="form-text-compact">
                                <i class="fas fa-info-circle"></i> Give your campaign a descriptive name
                            </small>
                        </div>

                        <!-- WhatsApp Sessions -->
                        <div class="mb-3">
                            <label class="form-label-compact">
                                <i class="fab fa-whatsapp"></i> WhatsApp Sessions
                            </label>
                            <% if (sessions.length === 0) { %>
                                <div class="alert alert-warning border-0 py-2 mb-0">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    No connected sessions. <a href="/dashboard">Connect one first</a>.
                                </div>
                            <% } else { %>
                                <div class="session-grid">
                                    <% sessions.forEach(session => { %>
                                        <label class="session-card-compact">
                                            <input type="checkbox" class="session-checkbox" value="<%= session.id %>">
                                            <div class="session-card-inner">
                                                <div class="session-icon-sm">
                                                    <i class="fab fa-whatsapp"></i>
                                                </div>
                                                <div class="session-details">
                                                    <div class="session-name-sm"><%= session.name %></div>
                                                    <div class="session-phone-sm"><%= session.phone_number || 'Not connected' %></div>
                                                </div>
                                                <div class="session-check-icon">
                                                    <i class="fas fa-check-circle"></i>
                                                </div>
                                            </div>
                                        </label>
                                    <% }); %>
                                </div>
                                <small class="form-text-compact">
                                    <i class="fas fa-info-circle"></i> Select one or more sessions to send from
                                </small>
                            <% } %>
                        </div>

                        <!-- Sending Method -->
                        <div class="mb-0">
                            <label class="form-label-compact">
                                <i class="fas fa-random"></i> Sending Method
                            </label>
                            <div class="method-grid">
                                <label class="method-card-compact selected" data-method="sequential">
                                    <div class="method-icon-sm"><i class="fas fa-list-ol"></i></div>
                                    <div class="method-details">
                                        <span class="method-name">Sequential</span>
                                        <span class="method-desc">One by one in order</span>
                                    </div>
                                    <span class="method-tag single">Single</span>
                                </label>
                                <label class="method-card-compact" data-method="random">
                                    <div class="method-icon-sm"><i class="fas fa-random"></i></div>
                                    <div class="method-details">
                                        <span class="method-name">Random</span>
                                        <span class="method-desc">Shuffle contacts & sessions</span>
                                    </div>
                                    <span class="method-tag multi">Multi</span>
                                </label>
                                <label class="method-card-compact" data-method="roundrobin">
                                    <div class="method-icon-sm"><i class="fas fa-sync-alt"></i></div>
                                    <div class="method-details">
                                        <span class="method-name">Round Robin</span>
                                        <span class="method-desc">Rotate across sessions</span>
                                    </div>
                                    <span class="method-tag multi">Multi</span>
                                </label>
                                <label class="method-card-compact" data-method="balanced">
                                    <div class="method-icon-sm"><i class="fas fa-balance-scale"></i></div>
                                    <div class="method-details">
                                        <span class="method-name">Balanced</span>
                                        <span class="method-desc">Divide evenly</span>
                                    </div>
                                    <span class="method-tag multi">Multi</span>
                                </label>
                                <label class="method-card-compact" data-method="burst">
                                    <div class="method-icon-sm"><i class="fas fa-bolt"></i></div>
                                    <div class="method-details">
                                        <span class="method-name">Burst</span>
                                        <span class="method-desc">Fast with minimal delay</span>
                                    </div>
                                    <span class="method-tag single">Single</span>
                                </label>
                            </div>
                            <input type="hidden" id="campaignMethod" value="sequential">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 2: Select Contacts -->
            <div class="step-content" data-step="2" style="display: none;">
                <div class="card shadow-sm">
                    <div class="card-body p-3">
                        <h6 class="fw-bold mb-3 d-flex align-items-center">
                            <span class="step-badge me-2">2</span>
                            Select Contact Groups
                        </h6>
                        
                        <% if (groups.length === 0) { %>
                            <div class="empty-state-compact">
                                <i class="fas fa-users"></i>
                                <p>No contact groups found</p>
                                <a href="/contacts" class="btn btn-success btn-sm">Create Group</a>
                            </div>
                        <% } else { %>
                            <div class="groups-grid">
                                <% groups.forEach(group => { %>
                                    <label class="group-card-compact">
                                        <input type="checkbox" class="group-checkbox" 
                                               value="<%= group.id %>" 
                                               data-count="<%= group.contact_count %>">
                                        <div class="group-card-inner">
                                            <div class="group-icon-sm">
                                                <i class="fas fa-folder"></i>
                                            </div>
                                            <div class="group-details">
                                                <span class="group-name-sm"><%= group.name %></span>
                                                <span class="group-count-sm"><%= group.contact_count %> contacts</span>
                                            </div>
                                            <div class="group-check-icon">
                                                <i class="fas fa-check-circle"></i>
                                            </div>
                                        </div>
                                    </label>
                                <% }); %>
                            </div>
                            
                            <!-- Selection Summary -->
                            <div class="selection-summary" id="groupsSummary" style="display: none;">
                                <div class="summary-info">
                                    <i class="fas fa-check-circle text-success"></i>
                                    <span><strong id="selectedGroupsCount">0</strong> groups (<strong id="totalContactsCount">0</strong> contacts)</span>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-danger" id="btnClearGroups">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        <% } %>
                    </div>
                </div>
            </div>

            <!-- Step 3: Compose Message -->
            <div class="step-content" data-step="3" style="display: none;">
                <div class="card shadow-sm">
                    <div class="card-body p-3">
                        <h6 class="fw-bold mb-3 d-flex align-items-center">
                            <span class="step-badge me-2">3</span>
                            Compose Message
                        </h6>
                        
                        <!-- Message Source -->
                        <div class="mb-3">
                            <label class="form-label-compact">
                                <i class="fas fa-paper-plane"></i> Message Source
                            </label>
                            <select class="form-control-compact" id="messageSource">
                                <option value="manual">✍️ Write Manually</option>
                                <option value="template">📋 Use Template</option>
                            </select>
                        </div>

                        <!-- Template Selector (Hidden by default) -->
                        <div class="mb-3" id="templateSelectorSection" style="display: none;">
                            <label class="form-label-compact">
                                <i class="fas fa-file-alt"></i> Select Template
                            </label>
                            <select class="form-control-compact" id="templateSelect">
                                <option value="">Loading templates...</option>
                            </select>
                            <small class="form-text-compact">
                                <i class="fas fa-info-circle"></i> Choose a saved template to send
                            </small>
                        </div>

                        <!-- Manual Message Section -->
                        <div id="manualMessageSection">
                            <!-- Message Type -->
                            <div class="mb-3">
                                <label class="form-label-compact">
                                    <i class="fas fa-list"></i> Message Type
                                </label>
                                <select class="form-control-compact" id="messageType">
                                    <optgroup label="Basic Messages">
                                        <option value="text">📝 Text Message</option>
                                        <option value="media">📎 Media (Image/Video/Audio/Document)</option>
                                    </optgroup>
                                    <optgroup label="Special Messages">
                                        <option value="sticker">🎨 Sticker (Auto-convert from image)</option>
                                        <option value="location">📍 Location</option>
                                        <option value="contact">👤 Contact (vCard)</option>
                                        <option value="poll">📊 Poll</option>
                                    </optgroup>
                                    <optgroup label="Privacy">
                                        <option value="viewOnceImage">👁️ View Once Image</option>
                                        <option value="viewOnceVideo">👁️ View Once Video</option>
                                        <option value="viewOnceAudio">👁️ View Once Audio</option>
                                    </optgroup>
                                </select>
                            </div>

                            <!-- Dynamic Fields Container -->
                            <div id="dynamicFields"></div>
                        </div>

                        <!-- Delay Setting -->
                        <div class="mb-0">
                            <label class="form-label-compact">
                                <i class="fas fa-clock"></i> Delay Between Messages
                            </label>
                            <div class="d-flex align-items-center gap-2">
                                <input type="number" class="form-control-compact" id="messageDelay" 
                                       value="3" min="1" max="60" style="max-width: 100px;">
                                <span class="text-muted" style="font-size: 0.875rem;">seconds</span>
                            </div>
                            <small class="form-text-compact">
                                <i class="fas fa-info-circle"></i> 3-5 seconds recommended
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 4: Preview -->
            <div class="step-content" data-step="4" style="display: none;">
                <div class="card shadow-sm">
                    <div class="card-body p-3">
                        <h6 class="fw-bold mb-3 d-flex align-items-center">
                            <span class="step-badge me-2">4</span>
                            Review & Send
                        </h6>
                        
                        <div class="preview-list">
                            <div class="preview-item-compact">
                                <span class="preview-label"><i class="fas fa-tag"></i> Name</span>
                                <span class="preview-value" id="finalCampaignName">-</span>
                            </div>
                            <div class="preview-item-compact">
                                <span class="preview-label"><i class="fab fa-whatsapp"></i> Sessions</span>
                                <span class="preview-value" id="finalSessions">-</span>
                            </div>
                            <div class="preview-item-compact">
                                <span class="preview-label"><i class="fas fa-random"></i> Method</span>
                                <span class="preview-value" id="finalMethod">-</span>
                            </div>
                            <div class="preview-item-compact">
                                <span class="preview-label"><i class="fas fa-users"></i> Recipients</span>
                                <span class="preview-value" id="finalGroups">-</span>
                            </div>
                            <div class="preview-item-compact">
                                <span class="preview-label"><i class="fas fa-comment"></i> Message</span>
                                <div class="preview-value" id="finalMessagePreview">-</div>
                            </div>
                            <div class="preview-item-compact">
                                <span class="preview-label"><i class="fas fa-clock"></i> Delay</span>
                                <span class="preview-value" id="finalDelay">-</span>
                            </div>
                        </div>
                        
                        <div class="alert alert-success border-0 py-2 mt-3 mb-0">
                            <i class="fas fa-rocket me-2"></i>
                            <strong>Ready to launch!</strong> Review the preview and send.
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Mobile Action Buttons -->
            <div class="d-lg-none mt-3">
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-light flex-grow-1 btn-prev" style="display: none; min-height: 48px;">
                        <i class="fas fa-arrow-left me-1"></i>Back
                    </button>
                    <button type="button" class="btn btn-success flex-grow-1 btn-next" style="min-height: 48px;">
                        Next<i class="fas fa-arrow-right ms-1"></i>
                    </button>
                    <button type="button" class="btn btn-success flex-grow-1" id="btnSendCampaignMobile" style="display: none; min-height: 48px;">
                        <i class="fas fa-paper-plane me-1"></i>Send
                    </button>
                </div>
            </div>
        </div>

        <!-- Preview Column -->
        <div class="col-lg-5" id="previewColumn">
            <div class="preview-sticky">
                <!-- WhatsApp Preview -->
                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-success text-white py-2 d-flex justify-content-between align-items-center">
                        <small class="fw-semibold"><i class="fab fa-whatsapp me-2"></i>Message Preview</small>
                        <button type="button" class="btn btn-sm btn-light d-lg-none" id="hidePreviewBtn" style="padding: 0.25rem 0.5rem;">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="whatsapp-preview-compact">
                        <div class="wa-message-bubble">
                            <div id="phoneMediaPreview" style="display: none;">
                                <div class="wa-media-placeholder">
                                    <i class="fas fa-image"></i>
                                </div>
                            </div>
                            <div id="previewMessage" class="wa-message-text">
                                Your message will appear here...
                            </div>
                            <div class="wa-message-time">
                                <span id="previewTime">12:00</span>
                                <i class="fas fa-check-double"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Desktop Action Buttons -->
                <div class="d-none d-lg-flex gap-2">
                    <button type="button" class="btn btn-light flex-grow-1 btn-prev" style="display: none;">
                        <i class="fas fa-arrow-left me-1"></i>Previous
                    </button>
                    <a href="/campaigns" class="btn btn-light flex-grow-1" id="btnCancel">
                        <i class="fas fa-times me-1"></i>Cancel
                    </a>
                    <button type="button" class="btn btn-success flex-grow-1 btn-next">
                        Next<i class="fas fa-arrow-right ms-1"></i>
                    </button>
                    <button type="button" class="btn btn-success flex-grow-1" id="btnSendCampaign" style="display: none;">
                        <i class="fas fa-paper-plane me-1"></i>Send Campaign
                    </button>
                </div>
                
                <!-- Mobile Back Button -->
                <div class="d-lg-none">
                    <button type="button" class="btn btn-outline-secondary w-100" id="backToFormBtn" style="min-height: 48px;">
                        <i class="fas fa-arrow-left me-1"></i>Back to Form
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Template Selector Modal -->
<div class="modal fade" id="templateSelectorModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content template-selector-modal">
            <div class="modal-header border-0 pb-2">
                <div>
                    <h5 class="modal-title mb-1">
                        <i class="fas fa-file-alt text-success me-2"></i>Choose Template
                    </h5>
                    <p class="text-muted small mb-0">Select a template for your campaign</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">
                <div class="template-search-box mb-3">
                    <i class="fas fa-search"></i>
                    <input type="text" class="form-control" id="searchCampaignTemplates"
                        placeholder="Search templates...">
                </div>
                <div id="campaignTemplatesList" class="template-list">
                    <div class="text-center py-5">
                        <div class="spinner-border text-success" role="status"></div>
                        <p class="text-muted mt-3 mb-0">Loading templates...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-2">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Cancel
                </button>
                <a href="/templates/create" class="btn btn-success">
                    <i class="fas fa-plus me-2"></i>Create New
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Mobile Preview Toggle Button (FAB) -->
<button type="button" class="btn btn-success btn-fab d-lg-none" id="togglePreviewBtn">
    <i class="fab fa-whatsapp"></i>
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<script src="/js/campaign-create.js"></script>
