'use client'

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

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

const SolarIntegratorRegistrationForm: React.FC<SolarIntegratorRegistrationFormProps> = ({
onSuccess,
onCancel
}) => {
const [formData, setFormData] = useState({
company_id: '',
integrator_type: 'RESIDENTIAL_INSTALLER',
certification_level: 'LEVEL_1',
license_number: '',
license_expiry_date: '',
years_of_experience: 0,
completed_projects: 0,
warranty_offered: '',
insurance_coverage: '',
specialization: [] as string[],
coverage_area: [] as string[],
certifications: [] as string[],
equipment_brands: [] as string[],
minimum_project_size: '',
maximum_project_size: '',
installation_time_frame: '',
warranty_period: 10,
maintenance_services: false,
emergency_support: false,
design_services: false,
project_management: false,
})

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

const { mutateAsync: createIntegrator, isPending } = useCreateSolarIntegrator()
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 createIntegrator({
...formData,
company_id
})

onSuccess?.()
} catch (error) {
console.error('Error creating solar integrator:', error)
alert('Erro ao registrar integrador solar. Por favor, tente novamente.')
}
}

// Step 1: Basic Information
const renderStep1 = () => (
<div className="space-y-4">
<h3 className="text-lg font-semibold">Informações Básicas</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 Integrador *</label>
<select
name="integrator_type"
value={formData.integrator_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_INSTALLER">Instalador Residencial</option>
<option value="COMMERCIAL_INSTALLER">Instalador Comercial</option>
<option value="UTILITY_INSTALLER">Instalador de Utilidade</option>
<option value="DESIGNER">Designer</option>
<option value="DISTRIBUTOR">Distribuidor</option>
</select>
</div>

<div>
<label className="text-sm font-medium text-gray-700">Nível de Certificação</label>
<select
name="certification_level"
value={formData.certification_level}
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="LEVEL_1">Nível 1</option>
<option value="LEVEL_2">Nível 2</option>
<option value="LEVEL_3">Nível 3</option>
<option value="MASTER">Master</option>
</select>
</div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="text-sm font-medium text-gray-700">Número da Licença</label>
<input
type="text"
name="license_number"
value={formData.license_number}
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>
<label className="text-sm font-medium text-gray-700">Data de Expiração da Licença</label>
<input
type="date"
name="license_expiry_date"
value={formData.license_expiry_date}
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-3 gap-4">
<div>
<label className="text-sm font-medium text-gray-700">Anos de Experiência</label>
<input
type="number"
name="years_of_experience"
value={formData.years_of_experience}
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>
<label className="text-sm font-medium text-gray-700">Projetos Completados</label>
<input
type="number"
name="completed_projects"
value={formData.completed_projects}
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>
<label className="text-sm font-medium text-gray-700">Período de Garantia (anos)</label>
<input
type="number"
name="warranty_period"
value={formData.warranty_period}
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>
)

// Step 2: Services and Capabilities
const renderStep2 = () => (
<div className="space-y-4">
<h3 className="text-lg font-semibold">Serviços e Capabilities</h3>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="text-sm font-medium text-gray-700">Áreas de Especialização</label>
<div className="mt-1 space-y-2">
{['roof_mount', 'ground_mount', 'tracking_systems', 'commercial', 'residential'].map((spec) => (
<div key={spec} className="flex items-center">
<input
id={`spec-${spec}`}
name="specialization"
type="checkbox"
checked={formData.specialization.includes(spec)}
onChange={() => handleArrayChange('specialization', spec)}
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
<label htmlFor={`spec-${spec}`} className="ml-2 block text-sm text-gray-900 capitalize">
{spec.replace('_', ' ')}
</label>
</div>
))}
</div>
</div>

<div>
<label className="text-sm font-medium text-gray-700">Marcas de Equipamentos</label>
<textarea
name="equipment_brands"
value={formData.equipment_brands.join(', ')}
onChange={(e) => setFormData(prev => ({...prev, equipment_brands: e.target.value.split(',').map(item => item.trim())}))}
placeholder="Digite marcas separadas por vírgula"
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">Tamanho Mínimo do Projeto</label>
<input
type="text"
name="minimum_project_size"
value={formData.minimum_project_size}
onChange={handleInputChange}
placeholder="ex: 5kW"
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">Tamanho Máximo do Projeto</label>
<input
type="text"
name="maximum_project_size"
value={formData.maximum_project_size}
onChange={handleInputChange}
placeholder="ex: 1MW"
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>
<label className="text-sm font-medium text-gray-700">Prazo de Instalação</label>
<input
type="text"
name="installation_time_frame"
value={formData.installation_time_frame}
onChange={handleInputChange}
placeholder="ex: 4-6 semanas"
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 className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="flex items-center">
<input
id="maintenance_services"

components/solar-integrator-form.js

@@ -0,0 +1,603 @@
+class CustomSolarIntegratorForm extends HTMLElement {
+  constructor() {
+    super();
+    this.currentStep = 1;
+    this.totalSteps = 3;
+    this.formData = {
+      company_id: '',
+      integrator_type: 'RESIDENTIAL_INSTALLER',
+      certification_level: 'LEVEL_1',
+      license_number: '',
+      license_expiry_date: '',
+      years_of_experience: 0,
+      completed_projects: 0,
+      warranty_offered: '',
+      insurance_coverage: '',
+      specialization: [],
+      coverage_area: [],
+      certifications: [],
+      equipment_brands: [],
+      minimum_project_size: '',
+      maximum_project_size: '',
+      installation_time_frame: '',
+      warranty_period: 10,
+      maintenance_services: false,
+      emergency_support: false,
+      design_services: false,
+      project_management: false,
+    };
+  }
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+  }
+
+  handleInputChange(e) {
+    const { name, value, type, checked } = e.target;
+    if (type === 'checkbox') {
+      this.formData[name] = checked;
+    } else {
+      this.formData[name] = value;
+    }
+    this.render();
+  }
+
+  handleArrayChange(name, value) {
+    const currentArray = this.formData[name];
+    const newArray = currentArray.includes(value)
+      ? currentArray.filter(item => item !== value)
+      : [...currentArray, value];
+    this.formData[name] = newArray;
+    this.render();
+  }
+
+  nextStep() {
+    if (this.currentStep < this.totalSteps) {
+      this.currentStep++;
+      this.render();
+    }
+  }
+
+  prevStep() {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+      this.render();
+    }
+  }
+
+  renderStep1() {
+    return `
+      <div class="space-y-4">
+        <h3 class="text-lg font-semibold">Informações Básicas</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 Integrador *</label>
+            <select
+              name="integrator_type"
+              value="${this.formData.integrator_type}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              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_INSTALLER">Instalador Residencial</option>
+              <option value="COMMERCIAL_INSTALLER">Instalador Comercial</option>
+              <option value="UTILITY_INSTALLER">Instalador de Utilidade</option>
+              <option value="DESIGNER">Designer</option>
+              <option value="DISTRIBUTOR">Distribuidor</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="text-sm font-medium text-gray-700">Nível de Certificação</label>
+            <select
+              name="certification_level"
+              value="${this.formData.certification_level}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              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="LEVEL_1">Nível 1</option>
+              <option value="LEVEL_2">Nível 2</option>
+              <option value="LEVEL_3">Nível 3</option>
+              <option value="MASTER">Master</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="text-sm font-medium text-gray-700">Número da Licença</label>
+            <input
+              type="text"
+              name="license_number"
+              value="${this.formData.license_number}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              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">Data de Expiração da Licença</label>
+            <input
+              type="date"
+              name="license_expiry_date"
+              value="${this.formData.license_expiry_date}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              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>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label class="text-sm font-medium text-gray-700">Anos de Experiência</label>
+            <input
+              type="number"
+              name="years_of_experience"
+              value="${this.formData.years_of_experience}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              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">Projetos Completados</label>
+            <input
+              type="number"
+              name="completed_projects"
+              value="${this.formData.completed_projects}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              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">Período de Garantia (anos)</label>
+            <input
+              type="number"
+              name="warranty_period"
+              value="${this.formData.warranty_period}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              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>
+      </div>
+    `;
+  }
+
+  renderStep2() {
+    return `
+      <div class="space-y-4">
+        <h3 class="text-lg font-semibold">Serviços e Capabilities</h3>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="text-sm font-medium text-gray-700">Áreas de Especialização</label>
+            <div class="mt-1 space-y-2">
+              ${['roof_mount', 'ground_mount', 'tracking_systems', 'commercial', 'residential'].map(spec => `
+                <div key="${spec}" class="flex items-center">
+                  <input
+                    id="spec-${spec}"
+                    name="specialization"
+                    type="checkbox"
+                    ${this.formData.specialization.includes(spec) ? 'checked' : ''}
+                    onchange="this.getRootNode().host.handleArrayChange('specialization', '${spec}')"
+                    class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                  />
+                  <label for="spec-${spec}" class="ml-2 block text-sm text-gray-900 capitalize">
+                    ${spec.replace('_', ' ')}
+                  </label>
+                </div>
+              `).join('')}
+            </div>
+          </div>
+
+          <div>
+            <label class="text-sm font-medium text-gray-700">Marcas de Equipamentos</label>
+            <textarea
+              name="equipment_brands"
+              value="${this.formData.equipment_brands.join(', ')}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              placeholder="Digite marcas separadas por vírgula"
+              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+            ></textarea>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="text-sm font-medium text-gray-700">Tamanho Mínimo do Projeto</label>
+            <input
+              type="text"
+              name="minimum_project_size"
+              value="${this.formData.minimum_project_size}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              placeholder="ex: 5kW"
+              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">Tamanho Máximo do Projeto</label>
+            <input
+              type="text"
+              name="maximum_project_size"
+              value="${this.formData.maximum_project_size}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              placeholder="ex: 1MW"
+              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>
+
+        <div>
+          <label class="text-sm font-medium text-gray-700">Prazo de Instalação</label>
+          <input
+            type="text"
+            name="installation_time_frame"
+            value="${this.formData.installation_time_frame}"
+            onchange="this.getRootNode().host.handleInputChange(event)"
+            placeholder="ex: 4-6 semanas"
+            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 class="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div class="flex items-center">
+            <input
+              id="maintenance_services"
+              name="maintenance_services"
+              type="checkbox"
+              ${this.formData.maintenance_services ? 'checked' : ''}
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            />
+            <label for="maintenance_services" class="ml-2 block text-sm text-gray-900">
+              Serviços de Manutenção
+            </label>
+          </div>
+
+          <div class="flex items-center">
+            <input
+              id="emergency_support"
+              name="emergency_support"
+              type="checkbox"
+              ${this.formData.emergency_support ? 'checked' : ''}
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            />
+            <label for="emergency_support" class="ml-2 block text-sm text-gray-900">
+              Suporte de Emergência
+            </label>
+          </div>
+
+          <div class="flex items-center">
+            <input
+              id="design_services"
+              name="design_services"
+              type="checkbox"
+              ${this.formData.design_services ? 'checked' : ''}
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            />
+            <label for="design_services" class="ml-2 block text-sm text-gray-900">
+              Serviços de Design
+            </label>
+          </div>
+
+          <div class="flex items-center">
+            <input
+              id="project_management"
+              name="project_management"
+              type="checkbox"
+              ${this.formData.project_management ? 'checked' : ''}
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            />
+            <label for="project_management" class="ml-2 block text-sm text-gray-900">
+              Gerenciamento de Projetos
+            </label>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  renderStep3() {
+    return `
+      <div class="space-y-4">
+        <h3 class="text-lg font-semibold">Cobertura e Certificações</h3>
+        
+        <div>
+          <label class="text-sm font-medium text-gray-700">Áreas de Cobertura</label>
+          <textarea
+            name="coverage_area"
+            value="${this.formData.coverage_area.join(', ')}"
+            onchange="this.getRootNode().host.handleInputChange(event)"
+            placeholder="Digite áreas separadas por vírgula, ex: São Paulo, Rio de Janeiro"
+            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+          ></textarea>
+        </div>
+
+        <div>
+          <label class="text-sm font-medium text-gray-700">Certificações</label>
+          <textarea
+            name="certifications"
+            value="${this.formData.certifications.join(', ')}"
+            onchange="this.getRootNode().host.handleInputChange(event)"
+            placeholder="Digite certificações separadas por vírgula, ex: NABCEP, UL, CSA"
+            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+          ></textarea>
+        </div>
+
+        <div>
+          <label class="text-sm font-medium text-gray-700">Cobertura de Seguro</label>
+          <input
+            type="text"
+            name="insurance_coverage"
+            value="${this.formData.insurance_coverage}"
+            onchange="this.getRootNode().host.handleInputChange(event)"
+            placeholder="ex: 500k de responsabilidade civil"
+            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">Garantia Oferecida</label>
+          <input
+            type="text"
+            name="warranty_offered"
+            value="${this.formData.warranty_offered}"
+            onchange="this.getRootNode().host.handleInputChange(event)"
+            placeholder="ex: 20 anos"
+            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>
+    `;
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        :host {
+          display: block;
+          font-family: 'Inter', sans-serif;
+        }
+        
+        .space-y-4 > * + * {
+          margin-top: 1rem;
+        }
+        
+        .space-y-6 > * + * {
+          margin-top: 1.5rem;
+        }
+        
+        .grid {
+          display: grid;
+        }
+        
+        .gap-4 {
+          gap: 1rem;
+        }
+        
+        .rounded-md {
+          border-radius: 0.375rem;
+        }
+        
+        .border-gray-300 {
+          border-color: #d1d5db;
+        }
+        
+        .focus\\:border-indigo-500:focus {
+          border-color: #6366f1;
+        }
+        
+        .focus\\:ring-indigo-500:focus {
+          --tw-ring-color: #6366f1;
+        }
+        
+        .shadow-sm {
+          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        }
+        
+        .text-sm {
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+        }
+        
+        .text-lg {
+          font-size: 1.125rem;
+          line-height: 1.75rem;
+        }
+        
+        .text-xl {
+          font-size: 1.25rem;
+          line-height: 1.75rem;
+        }
+        
+        .font-semibold {
+          font-weight: 600;
+        }
+        
+        .font-bold {
+          font-weight: 700;
+        }
+        
+        .text-gray-700 {
+          color: #374151;
+        }
+        
+        .text-gray-900 {
+          color: #111827;
+        }
+        
+        .text-gray-500 {
+          color: #6b7280;
+        }
+        
+        .text-indigo-600 {
+          color: #4f46e5;
+        }
+        
+        .bg-gray-200 {
+          background-color: #e5e7eb;
+        }
+        
+        .bg-blue-600 {
+          background-color: #2563eb;
+        }
+        
+        .h-2\\.5 {
+          height: 0.625rem;
+        }
+        
+        .rounded-full {
+          border-radius: 9999px;
+        }
+        
+        .transition-all {
+          transition-property: all;
+        }
+        
+        .duration-300 {
+          transition-duration: 300ms;
+        }
+        
+        .w-full {
+          width: 100%;
+        }
+        
+        .block {
+          display: block;
+        }
+        
+        .flex {
+          display: flex;
+        }
+        
+        .items-center {
+          align-items: center;
+        }
+        
+        .justify-between {
+          justify-content: space-between;
+        }
+        
+        .mt-1 {
+          margin-top: 0.25rem;
+        }
+        
+        .mb-4 {
+          margin-bottom: 1rem;
+        }
+        
+        .mb-6 {
+          margin-bottom: 1.5rem;
+        }
+        
+        .ml-2 {
+          margin-left: 0.5rem;
+        }
+        
+        .pt-4 {
+          padding-top: 1rem;
+        }
+        
+        .p-6 {
+          padding: 1.5rem;
+        }
+        
+        .p-8 {
+          padding: 2rem;
+        }
+        
+        .space-x-3 > * + * {
+          margin-left: 0.75rem;
+        }
+        
+        @media (min-width: 768px) {
+          .md\\:grid-cols-2 {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+          
+          .md\\:grid-cols-3 {
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+          }
+          
+          .md\\:grid-cols-4 {
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+          }
+        }
+      </style>
+      
+      <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 Integrador Solar</h2>
+            <div class="text-sm text-gray-500">
+              Passo ${this.currentStep} de ${this.totalSteps}
+            </div>
+          </div>
+          
+          <div class="w-full bg-gray-200 rounded-full h-2.5">
+            <div 
+              class="bg-blue-600 h-2.5 rounded-full transition-all duration-300" 
+              style="width: ${(this.currentStep / this.totalSteps) * 100}%"
+            ></div>
+          </div>
+        </div>
+
+        ${this.currentStep === 1 ? this.renderStep1() : ''}
+        ${this.currentStep === 2 ? this.renderStep2() : ''}
+        ${this.currentStep === 3 ? this.renderStep3() : ''}
+
+        <div class="flex justify-between pt-4">
+          <div>
+            ${this.currentStep > 1 ? `
+              <button
+                type="button"
+                onclick="this.getRootNode().host.prevStep()"
+                class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                Voltar
+              </button>
+            ` : ''}
+          </div>
+          
+          <div class="flex space-x-3">
+            ${this.currentStep < this.totalSteps ? `
+              <button
+                type="button"
+                onclick="this.getRootNode().host.nextStep()"
+                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                Próximo
+              </button>
+            ` : `
+              <button
+                type="button"
+                onclick="this.getRootNode().host.dispatchEvent(new CustomEvent('cancel'))"
+                class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                Cancelar
+              </button>
+              <button
+                type="button"
+                onclick="this.getRootNode().host.dispatchEvent(new CustomEvent('submit', { detail: this.getRootNode().host.formData }))"
+                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                Cadastrar
+              </button>
+            `}
+          </div>
+        </div>
+      </form>
+    `;
+  }
+}
+
+customElements.define('custom-solar-integrator-form', CustomSolarIntegratorForm);

index.html

@@ -47,13 +47,12 @@
     <div class="min-h-screen flex items-center justify-center p-4">
         <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg overflow-hidden">
             <div class="p-6 sm:p-8">
-                <custom-solar-form></custom-solar-form>
-            </div>
+    <custom-solar-integrator-form></custom-solar-integrator-form>
+</div>
         </div>
     </div>
-
-    <script src="components/solar-form.js"></script>
-    <script src="script.js"></script>
+    <script src="components/solar-integrator-form.js"></script>
+<script src="script.js"></script>
     <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>