document.addEventListener('DOMContentLoaded', () => {
    const app = document.getElementById('app');
    
    // Main app structure
    app.innerHTML = `
        <custom-navbar></custom-navbar>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
            <!-- Templates list column -->
            <div class="md:col-span-1">
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-bold text-gray-800">Templates</h2>
                        <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center">
                            <i data-feather="plus" class="w-4 h-4 mr-2"></i>
                            New
                        </button>
                    </div>
                    
                    <div class="relative mb-4">
                        <i data-feather="search" class="absolute left-3 top-3 text-gray-400"></i>
                        <input type="text" placeholder="Search templates..." 
                            class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                    </div>
                    
                    <div class="space-y-2 mb-4">
                        <button class="px-3 py-1 text-sm rounded-full bg-primary-100 text-primary-800">All</button>
                        <button class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-800">Approved</button>
                        <button class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-800">Pending</button>
                        <button class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-800">Rejected</button>
                    </div>
                    
                    <div class="space-y-3 h-[500px] overflow-y-auto">
                        <!-- Template cards will be inserted here -->
                        <custom-template-card 
                            name="purchase_confirmation" 
                            status="approved" 
                            category="transactional"
                            language="pt_BR"
                        ></custom-template-card>
                        
                        <custom-template-card 
                            name="checkout_abandoned" 
                            status="approved" 
                            category="marketing"
                            language="pt_BR"
                        ></custom-template-card>
                        
                        <custom-template-card 
                            name="special_promotion" 
                            status="pending" 
                            category="marketing"
                            language="pt_BR"
                        ></custom-template-card>
                    </div>
                </div>
            </div>
            
            <!-- Template editor column -->
            <div class="md:col-span-2">
                <div class="bg-white rounded-xl shadow-sm p-6 template-editor">
                    <div class="text-center py-12">
                        <div class="mx-auto w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center mb-4">
                            <i data-feather="zap" class="text-primary-500"></i>
                        </div>
                        <h3 class="text-lg font-medium mb-2">No template selected</h3>
                        <p class="text-gray-500 mb-4">Select a template from the list or create a new one</p>
                        <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg">
                            Create New Template
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Initialize feather icons
    feather.replace();
});

// Sample data for templates
const templates = [
    {
        id: "purchase_confirmation",
        name: "purchase_confirmation",
        language: "pt_BR",
        components: [
            {
                type: "HEADER",
                format: "TEXT",
                text: "Compra Confirmada! 🔆",
            },
            {
                type: "BODY",
                text: "E aí, campeão da energia limpa! Sua compra do kit solar {{1}} foi confirmada. Valor total: R$ {{2}}. Prepare-se para revolucionar sua forma de consumir energia! Acompanhe o status do seu pedido #{{3}} pelo nosso app.",
                example: {
                    body_text: [["Premium 450W", "15.990,00", "YS-78945"]],
                },
            },
            {
                type: "FOOTER",
                text: "Yello Solar - Energia que não cai. Igual a gente.",
            },
        ],
        status: "APPROVED",
        category: "transactional",
    },
    // More templates...
];