{% extends "base.html" %}

{% block title %}Contact Lists - SMS Campaign Manager{% endblock %}

{% block content %}
<div x-data="listsApp" x-init="init()" class="p-6">
    <div class="max-w-6xl mx-auto">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">📋 Contact Lists</h2>

        <!-- Upload CSV Section -->
        <div class="mb-8 p-6 border rounded-lg bg-green-50">
            <h3 class="font-semibold text-gray-700 mb-4">Upload New Contact List</h3>
            <div class="flex flex-col md:flex-row gap-4">
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">CSV File</label>
                    <input type="file" @change="handleListUpload($event)"
                           accept=".csv"
                           class="w-full px-3 py-2 border rounded-lg">
                </div>
                <div class="flex-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">List Name (optional)</label>
                    <input type="text" x-model="listUploadName"
                           placeholder="Leave blank for auto-generated name"
                           class="w-full px-3 py-2 border rounded-lg">
                </div>
            </div>
            <div x-show="listUploadPreview.length > 0" class="mt-4 p-4 bg-white rounded border">
                <h4 class="font-medium mb-2">Preview (<span x-text="listUploadPreview.length"></span> contacts)</h4>
                <div class="max-h-40 overflow-y-auto space-y-2">
                    <template x-for="(contact, index) in listUploadPreview" :key="`preview-${index}`">
                        <div class="text-sm bg-gray-50 p-2 rounded border flex justify-between">
                            <div>
                                <span class="font-medium" x-text="contact.name || 'No Name'"></span>
                                <span class="text-gray-600 ml-2" x-text="contact.phone"></span>
                            </div>
                        </div>
                    </template>
                </div>
                <button @click="saveListFromPreview()"
                        class="mt-3 bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
                    Save List
                </button>
            </div>
        </div>

        <!-- Lists Display -->
        <div>
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-semibold text-gray-700">Saved Lists</h3>
                <button @click="loadSavedLists()" class="text-blue-600 hover:text-blue-800 text-sm">
                    🔄 Refresh
                </button>
            </div>

            <div x-show="!savedLists || savedLists.length === 0" class="text-gray-500 text-center py-8 border rounded-lg">
                No contact lists saved yet. Upload a CSV file above to get started!
            </div>

            <div x-show="savedLists && savedLists.length > 0" class="grid grid-cols-1 gap-4">
                <template x-for="list in savedLists" :key="list.id">
                    <div class="border rounded-lg p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex justify-between items-start mb-3">
                            <div class="flex-1">
                                <div class="flex items-center gap-2 mb-2">
                                    <h4 class="font-medium text-gray-800" x-text="list.name"></h4>
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
                                          x-text="`${list.total_contacts} contacts`"></span>
                                </div>
                                <p class="text-sm text-gray-600" x-text="`From: ${list.original_filename}`"></p>
                            </div>
                        </div>

                        <div class="flex justify-between items-center text-xs text-gray-500 mb-3">
                            <span>Used <span x-text="list.usage_count || 0"></span> times</span>
                            <span>Created <span x-text="formatDate(list.created_at)"></span></span>
                            <span x-show="list.last_used_at">Last used: <span x-text="formatDate(list.last_used_at)"></span></span>
                        </div>

                        <div class="flex gap-2">
                            <button @click="viewListContacts(list)"
                                    class="text-blue-600 hover:text-blue-800 text-sm px-3 py-1 border border-blue-200 rounded hover:bg-blue-50">
                                👁 View
                            </button>
                            <button @click="useListForCampaign(list)"
                                    class="text-green-600 hover:text-green-800 text-sm px-3 py-1 border border-green-200 rounded hover:bg-green-50">
                                📤 Use for Campaign
                            </button>
                            <button @click="downloadList(list)"
                                    class="text-purple-600 hover:text-purple-800 text-sm px-3 py-1 border border-purple-200 rounded hover:bg-purple-50">
                                💾 Download
                            </button>
                            <button @click="deleteContactList(list.id, list.name)"
                                    class="text-red-600 hover:text-red-800 text-sm px-3 py-1 border border-red-200 rounded hover:bg-red-50">
                                🗑 Delete
                            </button>
                        </div>
                    </div>
                </template>
            </div>

            <!-- List Detail Modal -->
            <div x-show="viewingList" x-cloak class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                <div class="bg-white rounded-lg p-6 max-w-4xl max-h-[80vh] w-full mx-4 overflow-hidden flex flex-col">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-semibold">
                            <span x-text="viewingList ? viewingList.name : ''"></span>
                            <span class="text-sm font-normal text-gray-600">
                                (<span x-text="viewingList ? viewingList.total_contacts : 0"></span> contacts)
                            </span>
                        </h3>
                        <button @click="viewingList = null" class="text-gray-500 hover:text-gray-700">✕</button>
                    </div>

                    <div class="flex-1 overflow-y-auto">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <template x-for="(contact, index) in viewingListContacts" :key="`contact-${index}`">
                                <div class="border rounded p-3 bg-gray-50">
                                    <div class="font-medium" x-text="contact.name || 'No Name'"></div>
                                    <div class="text-gray-600" x-text="contact.phone"></div>
                                    <div x-show="contact.email" class="text-gray-500 text-sm" x-text="contact.email"></div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="mt-4 pt-4 border-t flex justify-end gap-2">
                        <button @click="viewingList = null"
                                class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/lists.js?v={{ cache_version }}"></script>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('listsApp', () => listsApp());
    });
</script>
{% endblock %}