'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.

components/navbar.js

@@ -87,10 +87,11 @@ class CustomNavbar extends HTMLElement {
                 <div class="nav-links">
                     <a href="/explore" class="nav-link">Explore</a>
                     <a href="/dimensions" class="nav-link">Dimensions</a>
+                    <a href="/solar-registration.html" class="nav-link">Solar Registration</a>
                     <a href="/about" class="nav-link">About</a>
                     <a href="/contact" class="nav-link">Contact</a>
                 </div>
-                <button class="mobile-menu-btn">
+<button class="mobile-menu-btn">
                     <i data-feather="menu"></i>
                 </button>
             </nav>

script.js

@@ -7,7 +7,6 @@ document.addEventListener('DOMContentLoaded', () => {
         document.documentElement.classList.toggle('dark');
     };
 });
-
 // Example component interaction
 class VoidExplorer {
     constructor() {
@@ -16,7 +15,17 @@ class VoidExplorer {
     
     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() {
+        // This would be replaced with actual form implementation
+        console.log('Solar registration system initializing...');
     }
 }
 
-new VoidExplorer();
+new VoidExplorer();

solar-registration.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Solar Property Registration | Mystic Void Explorer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                50: '#f0f9ff',
+                100: '#e0f2fe',
+                200: '#bae6fd',
+                300: '#7dd3fc',
+                400: '#38bdf8',
+                500: '#0ea5e9',
+                600: '#0284c7',
+                700: '#0369a1',
+                800: '#075985',
+                900: '#0c4a6e',
+              },
+              secondary: {
+                50: '#f5f3ff',
+                100: '#ede9fe',
+                200: '#ddd6fe',
+                300: '#c4b5fd',
+                400: '#a78bfa',
+                500: '#8b5cf6',
+                600: '#7c3aed',
+                700: '#6d28d9',
+                800: '#5b21b6',
+                900: '#4c1d95',
+              }
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-12 max-w-4xl">
+        <div class="bg-gray-800 rounded-xl p-8 shadow-lg">
+            <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 -->
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        // This would be replaced with actual form implementation
+        document.getElementById('solar-registration-form').innerHTML = `
+            <div class="text-center py-12">
+                <h3 class="text-xl font-semibold mb-4">Solar Property Registration Coming Soon</h3>
+                <p class="text-gray-300">Our solar property registration system is currently under development.</p>
+                <a href="/" class="mt-6 inline-block 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">
+                    Return Home
+                </a>
+            </div>
+        `;
+    </script>
+</body>
+</html>