document.addEventListener('DOMContentLoaded', () => {
    // Add any global JavaScript functionality here
    console.log('Mystic Void Explorer initialized');
    
    // Example: Toggle dark mode
    const toggleDarkMode = () => {
        document.documentElement.classList.toggle('dark');
    };
});
// Example component interaction
class VoidExplorer {
    constructor() {
        this.init();
    }
    
    init() {
        console.log('Void exploration systems online');
        
        // Initialize solar registration form if on that page
        if (window.location.pathname.includes('solar-registration')) {
            this.initSolarRegistration();
        }
    }
    initSolarRegistration() {
        console.log('Solar registration system initializing...');
        
        // Form state
        const formData = {
            company_id: '',
            property_type: 'RESIDENTIAL_SINGLE_FAMILY',
            monthly_consumption: '',
            consumption_profile: 'MEDIUM',
            roof_area: '',
            roof_type: 'FLAT',
            roof_orientation: 'SOUTH',
            roof_age: 0,
            roof_condition: 'good',
            shading_issues: 'none',
            electrical_capacity: '',
            current_energy_rate: '',
            preferred_installation_timeline: '3_months',
            budget_range: '20k-50k',
            financing_interest: 'loan',
            property_address: '',
            property_city: '',
            property_state: '',
            property_country: 'Brazil',
            utility_company: '',
            net_metering_eligible: true,
            previous_solar_consideration: false,
            solar_installation_year: null,
            energy_goals: [],
            financing_preferences: [],
            installer_preference: [],
        };

        let currentStep = 1;
        const totalSteps = 3;

        // DOM elements
        const form = document.getElementById('registration-form');
        const stepCounter = document.getElementById('step-counter');
        const progressBar = document.getElementById('progress-bar');
        const nextButton = document.getElementById('next-button');
        const submitButton = document.getElementById('submit-button');
        const backButtonContainer = document.getElementById('back-button-container');

        // Step containers
        const step1 = document.getElementById('step-1');
        const step2 = document.getElementById('step-2');
        const step3 = document.getElementById('step-3');

        // Render step 1
        step1.innerHTML = `
            <h3 class="text-lg font-semibold">Informações do Imóvel</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-sm font-medium text-gray-700">Tipo de Propriedade *</label>
                    <select name="property_type" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <option value="RESIDENTIAL_SINGLE_FAMILY">Residencial Unifamiliar</option>
                        <option value="RESIDENTIAL_MULTI_FAMILY">Residencial Multifamiliar</option>
                        <option value="COMMERCIAL_SMALL">Comercial Pequeno</option>
                        <option value="COMMERCIAL_MEDIUM">Comercial Médio</option>
                        <option value="COMMERCIAL_LARGE">Comercial Grande</option>
                        <option value="INDUSTRIAL">Industrial</option>
                        <option value="AGRICULTURAL">Agrícola</option>
                        <option value="INSTITUTIONAL">Institucional</option>
                    </select>
                </div>

                <div>
                    <label class="text-sm font-medium text-gray-700">Consumo Mensal (kWh)</label>
                    <input type="text" name="monthly_consumption" placeholder="ex: 400" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                </div>
            </div>

            <!-- Additional step 1 fields would be added here -->
        `;

        // Render step 2
        step2.innerHTML = `
            <h3 class="text-lg font-semibold">Informações Energéticas e Financeiras</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-sm font-medium text-gray-700">Capacidade Elétrica (kW)</label>
                    <input type="text" name="electrical_capacity" placeholder="ex: 25" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                </div>

                <div>
                    <label class="text-sm font-medium text-gray-700">Tarifa de Energia Atual (R$/kWh)</label>
                    <input type="text" name="current_energy_rate" placeholder="ex: 0.85" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                </div>
            </div>

            <!-- Additional step 2 fields would be added here -->
        `;

        // Render step 3
        step3.innerHTML = `
            <h3 class="text-lg font-semibold">Objetivos e Preferências</h3>
            
            <div>
                <label class="text-sm font-medium text-gray-700">Objetivos de Energia</label>
                <div class="mt-1 space-y-2">
                    <div class="flex items-center">
                        <input id="goal-reduce_cost" name="energy_goals" type="checkbox" value="reduce_cost" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <label for="goal-reduce_cost" class="ml-2 block text-sm text-gray-900">Reduzir custos</label>
                    </div>
                    <!-- Additional checkboxes would be added here -->
                </div>
            </div>

            <!-- Additional step 3 fields would be added here -->
        `;

        // Event listeners
        nextButton.addEventListener('click', () => {
            currentStep++;
            updateForm();
        });

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            // Collect all form data
            const formElements = form.elements;
            for (let i = 0; i < formElements.length; i++) {
                const element = formElements[i];
                if (element.name) {
                    if (element.type === 'checkbox') {
                        if (element.checked) {
                            if (!formData[element.name]) {
                                formData[element.name] = [];
                            }
                            formData[element.name].push(element.value);
                        }
                    } else {
                        formData[element.name] = element.value;
                    }
                }
            }
            
            console.log('Form submitted:', formData);
            alert('Cadastro enviado com sucesso!');
            // In a real app, you would send this data to your backend
        });

        function updateForm() {
            // Update step counter
            stepCounter.textContent = `Passo ${currentStep} de ${totalSteps}`;
            
            // Update progress bar
            progressBar.style.width = `${(currentStep / totalSteps) * 100}%`;
            
            // Show/hide steps
            step1.classList.toggle('hidden', currentStep !== 1);
            step2.classList.toggle('hidden', currentStep !== 2);
            step3.classList.toggle('hidden', currentStep !== 3);
            
            // Update buttons
            if (currentStep === totalSteps) {
                nextButton.classList.add('hidden');
                submitButton.classList.remove('hidden');
            } else {
                nextButton.classList.remove('hidden');
                submitButton.classList.add('hidden');
            }
            
            // Update back button
            if (currentStep > 1) {
                backButtonContainer.innerHTML = `
                    <button id="back-button" type="button" class="bg-gray-500 text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition-all">
                        Voltar
                    </button>
                `;
                document.getElementById('back-button').addEventListener('click', () => {
                    currentStep--;
                    updateForm();
                });
            } else {
                backButtonContainer.innerHTML = '';
            }
        }
    }
}

new VoidExplorer();