'use client'

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

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

const SolarAffiliateRegistrationForm: React.FC<SolarAffiliateRegistrationFormProps> = ({
onSuccess,
onCancel
}) => {
const [formData, setFormData] = useState({
company_id: '',
affiliate_type: 'REFERRAL_PARTNER',
affiliate_tier: 'BRONZE',
commission_rate: 5,
referral_code: '',
total_referrals: 0,
successful_referrals: 0,
total_earnings: '',
pending_earnings: '',
average_conversion_rate: 0,
traffic_sources: [] as string[],
marketing_channels: [] as string[],
content_types: [] as string[],
target_audience: [] as string[],
marketing_materials_access: false,
performance_bonus_eligible: false,
custom_promo_codes: [] as string[],
commission_structure: 'percentage',
payment_method: '',
payment_frequency: 'monthly',
tax_id: '',
marketing_support_level: 'basic',
training_completed: false,
certification_level: 0,
preferred_communication: [] as string[],
})

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

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

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

// Step 1: Basic Affiliate Information
const renderStep1 = () => (
<div className="space-y-4">
<h3 className="text-lg font-semibold">Informações Básicas do Afiliado</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 Afiliado *</label>
<select
name="affiliate_type"
value={formData.affiliate_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="REFERRAL_PARTNER">Parceiro de Referência</option>
<option value="INFLUENCER">Influenciador</option>
<option value="INDUSTRY_EXPERT">Especialista da Indústria</option>
<option value="YOUTUBE_CREATOR">Criador de Conteúdo (YouTube)</option>
<option value="BLOGGER">Blogueiro</option>
<option value="CONSULTANT">Consultor</option>
<option value="RETAILER">Revendedor</option>
</select>
</div>

<div>
<label className="text-sm font-medium text-gray-700">Nível do Afiliado</label>
<select
name="affiliate_tier"
value={formData.affiliate_tier}
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="BRONZE">Bronze</option>
<option value="SILVER">Prata</option>
<option value="GOLD">Ouro</option>
<option value="PLATINUM">Platina</option>
<option value="ELITE">Elite</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">Taxa de Comissão (%)</label>
<input
type="number"
name="commission_rate"
value={formData.commission_rate}
onChange={handleInputChange}
min="0"
max="50"
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">Código de Referência</label>
<input
type="text"
name="referral_code"
value={formData.referral_code}
onChange={handleInputChange}
placeholder="ex: SOLARPARTNER123"
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">Total de Referências</label>
<input
type="number"
name="total_referrals"
value={formData.total_referrals}
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">Referências Bem-sucedidas</label>
<input
type="number"
name="successful_referrals"
value={formData.successful_referrals}
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">Taxa de Conversão Média (%)</label>
<input
type="number"
name="average_conversion_rate"
value={formData.average_conversion_rate}
onChange={handleInputChange}
min="0"
max="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-2 gap-4">
<div>
<label className="text-sm font-medium text-gray-700">Ganhos Totais</label>
<input
type="text"
name="total_earnings"
value={formData.total_earnings}
onChange={handleInputChange}
placeholder="ex: 5000.00"
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">Ganhos Pendentes</label>
<input
type="text"
name="pending_earnings"
value={formData.pending_earnings}
onChange={handleInputChange}
placeholder="ex: 500.00"
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: Marketing and Content Strategy
const renderStep2 = () => (
<div className="space-y-4">
<h3 className="text-lg font-semibold">Marketing e Estratégia de Conteúdo</h3>

<div>
<label className="text-sm font-medium text-gray-700">Fontes de Tráfego</label>
<div className="mt-1 space-y-2">
{['organic', 'social', 'paid', 'email', 'referral', 'direct'].map((source) => (
<div key={source} className="flex items-center">
<input
id={`source-${source}`}
name="traffic_sources"
type="checkbox"
checked={formData.traffic_sources.includes(source)}
onChange={() => handleArrayChange('traffic_sources', source)}
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
<label htmlFor={`source-${source}`} className="ml-2 block text-sm text-gray-900 capitalize">
{source === 'organic' && 'Orgânico'}
{source === 'social' && 'Redes Sociais'}
{source === 'paid' && 'Pago'}
{source === 'email' && 'Email'}
{source === 'referral' && 'Referência'}
{source === 'direct' && 'Direto'}
</label>
</div>
))}
</div>
</div>

<div>
<label className="text-sm font-medium text-gray-700">Canais de Marketing</label>
<div className="mt-1 space-y-2">
{['facebook', 'instagram', 'linkedin', 'youtube', 'tiktok', 'twitter', 'whatsapp', 'blog'].map((channel) => (
<div key={channel} className="flex items-center">
<input
id={`channel-${channel}`}
name="marketing_channels"
type="checkbox"
checked={formData.marketing_channels.includes(channel)}
onChange={() => handleArrayChange('marketing_channels', channel)}
className="h-4 w-4 rounded bord

components/solar-affiliate-form.js

@@ -0,0 +1,268 @@
+```javascript
+class CustomSolarAffiliateForm extends HTMLElement {
+  constructor() {
+    super();
+    this.currentStep = 1;
+    this.totalSteps = 3;
+    this.formData = {
+      company_id: '',
+      affiliate_type: 'REFERRAL_PARTNER',
+      affiliate_tier: 'BRONZE',
+      commission_rate: 5,
+      referral_code: '',
+      total_referrals: 0,
+      successful_referrals: 0,
+      total_earnings: '',
+      pending_earnings: '',
+      average_conversion_rate: 0,
+      traffic_sources: [],
+      marketing_channels: [],
+      content_types: [],
+      target_audience: [],
+      marketing_materials_access: false,
+      performance_bonus_eligible: false,
+      custom_promo_codes: [],
+      commission_structure: 'percentage',
+      payment_method: '',
+      payment_frequency: 'monthly',
+      tax_id: '',
+      marketing_support_level: 'basic',
+      training_completed: false,
+      certification_level: 0,
+      preferred_communication: [],
+    };
+  }
+
+  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 do Afiliado</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 Afiliado *</label>
+            <select
+              name="affiliate_type"
+              value="${this.formData.affiliate_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="REFERRAL_PARTNER">Parceiro de Referência</option>
+              <option value="INFLUENCER">Influenciador</option>
+              <option value="INDUSTRY_EXPERT">Especialista da Indústria</option>
+              <option value="YOUTUBE_CREATOR">Criador de Conteúdo (YouTube)</option>
+              <option value="BLOGGER">Blogueiro</option>
+              <option value="CONSULTANT">Consultor</option>
+              <option value="RETAILER">Revendedor</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="text-sm font-medium text-gray-700">Nível do Afiliado</label>
+            <select
+              name="affiliate_tier"
+              value="${this.formData.affiliate_tier}"
+              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="BRONZE">Bronze</option>
+              <option value="SILVER">Prata</option>
+              <option value="GOLD">Ouro</option>
+              <option value="PLATINUM">Platina</option>
+              <option value="ELITE">Elite</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">Taxa de Comissão (%)</label>
+            <input
+              type="number"
+              name="commission_rate"
+              value="${this.formData.commission_rate}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              min="0"
+              max="50"
+              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">Código de Referência</label>
+            <input
+              type="text"
+              name="referral_code"
+              value="${this.formData.referral_code}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              placeholder="ex: SOLARPARTNER123"
+              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">Total de Referências</label>
+            <input
+              type="number"
+              name="total_referrals"
+              value="${this.formData.total_referrals}"
+              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">Referências Bem-sucedidas</label>
+            <input
+              type="number"
+              name="successful_referrals"
+              value="${this.formData.successful_referrals}"
+              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">Taxa de Conversão Média (%)</label>
+            <input
+              type="number"
+              name="average_conversion_rate"
+              value="${this.formData.average_conversion_rate}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              min="0"
+              max="100"
+              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-2 gap-4">
+          <div>
+            <label class="text-sm font-medium text-gray-700">Ganhos Totais</label>
+            <input
+              type="text"
+              name="total_earnings"
+              value="${this.formData.total_earnings}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              placeholder="ex: 5000.00"
+              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">Ganhos Pendentes</label>
+            <input
+              type="text"
+              name="pending_earnings"
+              value="${this.formData.pending_earnings}"
+              onchange="this.getRootNode().host.handleInputChange(event)"
+              placeholder="ex: 500.00"
+              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">Marketing e Estratégia de Conteúdo</h3>
+        
+        <div>
+          <label class="text-sm font-medium text-gray-700">Fontes de Tráfego</label>
+          <div class="mt-1 space-y-2">
+            ${['organic', 'social', 'paid', 'email', 'referral', 'direct'].map(source => `
+              <div key="${source}" class="flex items-center">
+                <input
+                  id="source-${source}"
+                  name="traffic_sources"
+                  type="checkbox"
+                  ${this.formData.traffic_sources.includes(source) ? 'checked' : ''}
+                  onchange="this.getRootNode().host.handleArrayChange('traffic_sources', '${source}')"
+                  class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                />
+                <label for="source-${source}" class="ml-2 block text-sm text-gray-900 capitalize">
+                  ${source === 'organic' ? 'Orgânico' : 
+                    source === 'social' ? 'Redes Sociais' : 
+                    source === 'paid' ? 'Pago' : 
+                    source === 'email' ? 'Email' : 
+                    source === 'referral' ? 'Referência' : 'Direto'}
+                </label>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+
+        <div>
+          <label class="text-sm font-medium text-gray-700">Canais de Marketing</label>
+          <div class="mt-1 space-y-2">
+            ${['facebook', 'instagram', 'linkedin', 'youtube', 'tiktok', 'twitter', 'whatsapp', 'blog'].map(channel => `
+              <div key="${channel}" class="flex items-center">
+                <input
+                  id="channel-${channel}"
+                  name="marketing_channels"
+                  type="checkbox"
+                  ${this.formData.marketing_channels.includes(channel) ? 'checked' : ''}
+                  onchange="this.getRootNode().host.handleArrayChange('marketing_channels', '${channel}')"
+                  class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                />
+                <label for="channel-${channel}" class="ml-2 block text-sm text-gray-900 capitalize">
+                  ${channel}
+                </label>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+
+        <div>
+          <label class="text-sm font-medium text-gray-700">Tipos de Conteúdo</label>
+          <div class="mt-1 space-y-2">
+            ${['blog', 'video', 'testimonial', 'comparison', 'review', 'tutorial', 'case_study'].map(content => `
+              <div key="${content}" class="flex items-center">
+                <input
+                  id="content-${content}"
+                  name="content_types"
+                  type="checkbox"
+                  ${this.formData.content