'use client'

import React, { useState } from 'react'
import { Button } from "@medusajs/ui"
import { useCreateSolarPropertyOwner } from '../../../lib/hooks/solar-property-owners'
import { useCompany } from '../../../lib/hooks/companies'

interface SolarPropertyOwnerRegistrationFormProps {
onSuccess?: () => void
onCancel?: () => void
}

const SolarPropertyOwnerRegistrationForm: React.FC<SolarPropertyOwnerRegistrationFormProps> = ({
onSuccess,
onCancel
}) => {
const [formData, setFormData] = useState({
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 as number | null,
energy_goals: [] as string[],
financing_preferences: [] as string[],
installer_preference: [] as string[],
})

const [currentStep, setCurrentStep] = useState(1)
const totalSteps = 3

const { mutateAsync: createPropertyOwner, isPending } = useCreateSolarPropertyOwner()
const { data: companyData } = useCompany({}) // Get company data

const handleInputChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
) => {
const { name, value, type } = e.target
if (type === 'checkbox') {
const checkbox = e.target as HTMLInputElement
setFormData(prev => ({ ...prev, [name]: checkbox.checked }))
} else {
setFormData(prev => ({ ...prev, [name]: value }))
}
}

const handleArrayChange = (name: string, value: string) => {
setFormData(prev => {
const currentArray = (prev as any)[name] as string[]
const newArray = currentArray.includes(value)
? currentArray.filter(item => item !== value)
: [...currentArray, value]
return { ...prev, [name]: newArray }
})
}

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()

try {
// In a real app, you would first create or get the company
// For now, we'll simulate getting a company ID
const company_id = companyData?.companies?.[0]?.id || 'comp_123'

await createPropertyOwner({
...formData,
company_id,
solar_installation_year: formData.solar_installation_year || undefined
})

onSuccess?.()
} catch (error) {
console.error('Error creating solar property owner:', error)
alert('Erro ao registrar proprietário solar. Por favor, tente novamente.')
}
}

// Step 1: Property Information
const renderStep1 = () => (
<div className="space-y-4">
<h3 className="text-lg font-semibold">Informações do Imóvel</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="text-sm font-medium text-gray-700">Tipo de Propriedade *</label>
<select
name="property_type"
value={formData.property_type}
onChange={handleInputChange}
className="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 className="text-sm font-medium text-gray-700">Consumo Mensal (kWh)</label>
<input
type="text"
name="monthly_consumption"
value={formData.monthly_consumption}
onChange={handleInputChange}
placeholder="ex: 400"
className="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>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="text-sm font-medium text-gray-700">Perfil de Consumo</label>
<select
name="consumption_profile"
value={formData.consumption_profile}
onChange={handleInputChange}
className="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="LOW">Baixo (até 200 kWh/mês)</option>
<option value="MEDIUM">Médio (200-500 kWh/mês)</option>
<option value="HIGH">Alto (500-1000 kWh/mês)</option>
<option value="VERY_HIGH">Muito Alto (mais de 1000 kWh/mês)</option>
</select>
</div>

<div>
<label className="text-sm font-medium text-gray-700">Área do Telhado (m²)</label>
<input
type="text"
name="roof_area"
value={formData.roof_area}
onChange={handleInputChange}
placeholder="ex: 100"
className="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>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label className="text-sm font-medium text-gray-700">Tipo de Telhado</label>
<select
name="roof_type"
value={formData.roof_type}
onChange={handleInputChange}
className="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="FLAT">Chapa</option>
<option value="SLOPED_TILE">Inclinado - Telha</option>
<option value="SLOPED_METAL">Inclinado - Metal</option>
<option value="SLOPED_SHINGLE">Inclinado - Shingle</option>
<option value="GABLE">Duas Águas</option>
<option value="HIP">Quatro Águas</option>
</select>
</div>

<div>
<label className="text-sm font-medium text-gray-700">Orientação do Telhado</label>
<select
name="roof_orientation"
value={formData.roof_orientation}
onChange={handleInputChange}
className="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="NORTH">Norte</option>
<option value="SOUTH">Sul</option>
<option value="EAST">Leste</option>
<option value="WEST">Oeste</option>
<option value="FLAT">Chapa</option>
</select>
</div>

<div>
<label className="text-sm font-medium text-gray-700">Idade do Telhado (anos)</label>
<input
type="number"
name="roof_age"
value={formData.roof_age}
onChange={handleInputChange}
className="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>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="text-sm font-medium text-gray-700">Condição do Telhado</label>
<select
name="roof_condition"
value={formData.roof_condition}
onChange={handleInputChange}
className="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="good">Boa</option>
<option value="needs_repair">Precisa de Reparos</option>
<option value="poor">Ruim</option>
</select>
</div>

<div>
<label className="text-sm font-medium text-gray-700">Problemas de Sombreamento</label>
<select
name="shading_issues"
value={formData.shading_issues}
onChange={handleInputChange}
className="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="none">Nenhum</option>
<option value="partial">Parcial</option>
<option value="heavy">Pesado</option>
</select>
</div>
</div>
</div>
)

// Step 2: Energy and Financial Information
const renderStep2 = () => (
<div className="space-y-4">
<h3 className="text-lg font-semibold">Informações Energéticas e Financeiras</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="text-sm font-medium text-gray-700">Capacidade Elétrica (kW)</label>
<input
type="text"
name="electrical_capacity"
value={formData.electrical_capacity}
onChange={handleInputChange}
placeholder="ex: 25"
className="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 className="text-sm font-medium text-gray-700">Tarifa de Energia Atual (R$/kWh)</label>
<input
type="text"
name="current_energy_rate"
value={formData.current_energy_rate}
onChange={handleInputChange}
placeholder="ex: 0.

script.js

@@ -21,10 +21,187 @@ class VoidExplorer {
             this.initSolarRegistration();
         }
     }
-    
     initSolarRegistration() {
-        // This would be replaced with actual form implementation
         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 = '';
+            }
+        }
     }
 }
 

solar-registration.html

@@ -50,11 +50,53 @@
             <h1 class="text-3xl md:text-4xl font-bold mb-6 text-center bg-clip-text text-transparent bg-gradient-to-r from-primary-400 to-secondary-500">
                 Solar Property Registration
             </h1>
-            
             <div id="solar-registration-form" class="space-y-6">
-                <!-- Form steps will be loaded here via JavaScript -->
+                <form id="registration-form" class="space-y-6">
+                    <div class="mb-6">
+                        <div class="flex items-center justify-between mb-4">
+                            <h2 class="text-xl font-bold">Registro de Proprietário Solar</h2>
+                            <div id="step-counter" class="text-sm text-gray-500">
+                                Passo 1 de 3
+                            </div>
+                        </div>
+                        
+                        <div class="w-full bg-gray-200 rounded-full h-2.5">
+                            <div id="progress-bar" 
+                                class="bg-blue-600 h-2.5 rounded-full transition-all duration-300" 
+                                style="width: 33.33%"
+                            ></div>
+                        </div>
+                    </div>
+
+                    <div id="step-1" class="space-y-4">
+                        <!-- Step 1 content will be inserted here by JavaScript -->
+                    </div>
+
+                    <div id="step-2" class="space-y-4 hidden">
+                        <!-- Step 2 content will be inserted here by JavaScript -->
+                    </div>
+
+                    <div id="step-3" class="space-y-4 hidden">
+                        <!-- Step 3 content will be inserted here by JavaScript -->
+                    </div>
+
+                    <div class="flex justify-between pt-4">
+                        <div id="back-button-container">
+                            <!-- Back button will be inserted here when needed -->
+                        </div>
+                        
+                        <div class="flex space-x-3">
+                            <button id="next-button" type="button" class="bg-gradient-to-r from-primary-500 to-secondary-600 text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition-all">
+                                Próximo
+                            </button>
+                            <button id="submit-button" type="submit" class="bg-gradient-to-r from-primary-500 to-secondary-600 text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition-all hidden">
+                                Cadastrar
+                            </button>
+                        </div>
+                    </div>
+                </form>
             </div>
-        </div>
+</div>
     </main>
 
     <custom-footer></custom-footer>