{% extends "base.html" %}

{% block title %}Campaigns - SMS Campaign Manager{% endblock %}

{% block content %}
<div x-data="campaignsApp" x-init="init()" class="p-6">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Create Campaign Section -->
        <div class="border rounded-lg p-4">
            <h2 class="text-xl font-semibold mb-4">Create Campaign</h2>

            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Campaign Name</label>
                    <input type="text" x-model="campaignName"
                           placeholder="e.g., Weekend Volunteer Outreach"
                           class="w-full px-3 py-2 border rounded-lg">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-2">
                        Use Saved Template
                        <button @click="console.log('Available templates:', savedTemplates); console.log('Selected template ID:', selectedTemplate); console.log('Current message:', messageTemplate)"
                                class="px-2 py-1 text-xs bg-gray-200 text-gray-700 rounded hover:bg-gray-300">Debug</button>
                    </label>
                    <select x-model="selectedTemplate" @change="loadTemplate($event.target.value)" class="w-full px-3 py-2 border rounded-lg mb-2">
                        <option value="">-- Select a saved template --</option>
                        <template x-for="template in savedTemplates" :key="template.id">
                            <option :value="template.id" x-text="`${template.name} (${template.category})`"></option>
                        </template>
                    </select>
                    <div x-show="selectedTemplate && messageTemplate" class="text-sm text-green-600 mb-2 flex justify-between items-center">
                        <span>✓ Template loaded successfully</span>
                        <button @click="clearTemplate()" class="text-xs text-gray-500 hover:text-gray-700 underline">
                            Clear Template
                        </button>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Message Template <span class="text-gray-500">(Use {name}, {phone}, {date}, {time} for variables)</span>
                    </label>
                    <textarea x-model="messageTemplate"
                              @input="onMessageTemplateChange()"
                              placeholder="Hi {name}! Hope all is well. I am wondering if you got my last email..."
                              class="w-full px-3 py-2 border rounded-lg h-24"></textarea>
                    <div x-show="messageTemplate && messageTemplate.includes('{name}')" class="mt-2 p-2 bg-gray-100 rounded text-sm">
                        <span class="font-medium text-gray-600">Preview:</span>
                        <span x-text="messageTemplate.replace('{name}', 'John')"></span>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Recipients CSV</label>
                    <input type="file" @change="handleFileUpload($event)"
                           accept=".csv"
                           class="w-full px-3 py-2 border rounded-lg">
                    <div x-show="uploadedFile" class="mt-2 text-sm text-green-600">
                        ✓ <span x-text="uploadedFile"></span>
                    </div>
                </div>

                <!-- Contact Preview Section -->
                <div x-show="contactsPreview.length > 0" class="border rounded-lg p-4 bg-blue-50">
                    <h3 class="font-semibold text-blue-800 mb-2">📋 Contacts Preview</h3>
                    <div class="text-sm text-blue-600 mb-2">
                        Total: <span x-text="totalContacts"></span> contacts loaded
                    </div>
                    <div class="max-h-40 overflow-y-auto space-y-1">
                        <template x-for="(contact, index) in contactsPreview" :key="`preview-${index}`">
                            <div class="text-sm bg-white p-2 rounded border">
                                <span class="font-medium" x-text="contact.name || 'No Name'"></span> -
                                <span class="text-gray-600" x-text="contact.phone"></span>
                                <div x-show="contact.preview_message" class="text-xs text-gray-500 mt-1">
                                    Preview: <span x-text="(contact.preview_message || '').substring(0, 50) + '...'"></span>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div x-show="totalContacts > contactsPreview.length" class="text-xs text-blue-500 mt-2">
                        ... and <span x-text="totalContacts - contactsPreview.length"></span> more contacts
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Use Saved List</label>
                    <select x-model="selectedList" @change="loadSavedList($event.target.value)" class="w-full px-3 py-2 border rounded-lg">
                        <option value="">-- Select a saved list --</option>
                        <template x-for="(list, index) in savedLists" :key="`list-${index}-${list.id || ''}`">
                            <option :value="list.id" x-text="`${list.name} (${list.total_contacts || 0} contacts)`"></option>
                        </template>
                    </select>
                </div>

                <div class="flex gap-2">
                    <button @click="saveTemplate()"
                            class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
                        Save Template
                    </button>
                    <button @click="testSMS()"
                            class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600">
                        Test SMS
                    </button>
                    <button @click="startCampaign()"
                            :disabled="!campaignReady"
                            class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 disabled:opacity-50">
                        Start Campaign
                    </button>
                </div>
            </div>
        </div>

        <!-- Campaign Status Section -->
        <div class="space-y-4">
            <!-- Analytics -->
            <div class="border rounded-lg p-4">
                <h3 class="font-semibold mb-3">Campaign Analytics</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div class="text-center">
                        <div class="text-2xl font-bold text-blue-600" x-text="analytics.total_sent || 0"></div>
                        <div class="text-sm text-gray-600">Total Sent</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-green-600" x-text="analytics.responses || 0"></div>
                        <div class="text-sm text-gray-600">Responses</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-yellow-600" x-text="analytics.follow_ups || 0"></div>
                        <div class="text-sm text-gray-600">Follow-ups Needed</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-purple-600" x-text="analytics.opt_outs || 0"></div>
                        <div class="text-sm text-gray-600">Opt-outs</div>
                    </div>
                </div>
            </div>

            <!-- Response Types -->
            <div class="border rounded-lg p-4">
                <h3 class="font-semibold mb-3">Response Types</h3>
                <div x-show="!responseTypes.length" class="text-gray-500 text-sm">
                    No responses yet
                </div>
                <div class="space-y-2">
                    <template x-for="type in responseTypes" :key="type.type">
                        <div class="flex justify-between items-center">
                            <span x-text="type.type" class="text-sm"></span>
                            <span x-text="type.count" class="font-medium"></span>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Recent Campaigns -->
            <div class="border rounded-lg p-4">
                <h3 class="font-semibold mb-3">Recent Campaigns</h3>
                <div x-show="!recentCampaigns.length" class="text-gray-500 text-sm">
                    No recent campaigns
                </div>
                <div class="space-y-2">
                    <template x-for="(campaign, index) in recentCampaigns" :key="`campaign-${index}-${campaign.id || ''}`">
                        <div class="border-b pb-2">
                            <div class="font-medium" x-text="campaign.name"></div>
                            <div class="text-sm text-gray-600">
                                <span x-text="campaign.sent_count || 0"></span> sent •
                                <span x-text="formatDate(campaign.created_at)"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/campaigns.js?v={{ cache_version }}"></script>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('campaignsApp', () => {
            const app = campaignsApp();
            app.phoneIP = window.PHONE_IP;
            return app;
        });
    });
</script>
{% endblock %}