<?php

use App\Models\Partner;
use App\Models\Brand;
use Illuminate\Support\Facades\Auth;
use App\Models\RegistrationCode;
use Illuminate\Support\Str;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\WithFileUploads;
use Livewire\Volt\Component;

new #[Layout('components.layouts.guest'), Title('Setup-Wizard')] class extends Component {
    use WithFileUploads;

    public Partner $partner;
    public string $partnerType;
    public int $currentStep = 1;
    public int $totalSteps;
    public array $steps = [];

    // Schritt 1: Stammdaten (alle Rollen)
    public string $companyName = '';
    public string $displayName = '';
    public string $salutation = '';
    public string $firstName = '';
    public string $lastName = '';
    public string $description = '';
    public string $street = '';
    public string $houseNumber = '';
    public string $zip = '';
    public string $city = '';
    public string $country = 'Deutschland';
    public string $phone = '';
    public string $website = '';
    public $logo = null;

    // Schritt 2: Retailer - Liefergebiete
    public ?int $deliveryRadius = null;
    public ?int $assemblyRadius = null;

    // Schritt 2: Manufacturer - Marke
    public string $brandName = '';
    public $brandLogo = null;
    public string $brandDescription = '';

    public string $roleIcon = 'shield-check';
    public string $roleName = '-';
    protected ?RegistrationCode $registrationCode = null;

    public function mount(): void
    {
        $user = Auth::user();

        if (!$user->partner_id) {
            $this->redirect(route('dashboard'), navigate: true);
            return;
        }

        $role = $user->roles->first();
        if ($role) {
            $this->roleIcon = $role->icon ?? 'shield-check';
            $this->roleName = $role->display_name ?? $role->name;
        }

        $this->partner = Partner::with('users')->findOrFail($user->partner_id);
        $this->partnerType = $this->partner->type;

        // Vorausfüllen: Partner-Daten
        $this->companyName = $this->partner->company_name ?? '';
        $this->displayName = $this->partner->display_name ?? '';
        $this->salutation = $this->partner->salutation ?? '';
        $this->firstName = $this->partner->first_name ?? '';
        $this->lastName = $this->partner->last_name ?? '';
        $this->description = $this->partner->description ?? '';
        $this->street = $this->partner->street ?? '';
        $this->houseNumber = $this->partner->house_number ?? '';
        $this->zip = $this->partner->zip ?? '';
        $this->city = $this->partner->city ?? '';
        $this->country = $this->partner->country ?? 'Deutschland';
        $this->phone = $this->partner->phone ?? '';
        $this->website = $this->partner->website ?? '';

        // Namen aus User übernehmen, falls Partner-Felder leer sind
        if (empty($this->firstName) && empty($this->lastName)) {
            $nameParts = explode(' ', $user->name, 2);
            $this->firstName = $nameParts[0] ?? '';
            $this->lastName = $nameParts[1] ?? '';
        }
        // Definiere Schritte basierend auf Rolle
        $this->defineSteps();
    }

    protected function defineSteps(): void
    {
        $normalizedType = strtolower(str_replace('-', '', $this->partnerType));

        switch ($normalizedType) {
            case 'retailer':
                $this->steps = ['Stammdaten', 'Liefergebiete', 'Fertig'];
                $this->totalSteps = 3;
                break;
            case 'manufacturer':
                $this->steps = ['Stammdaten', 'Marke anlegen', 'Fertig'];
                $this->totalSteps = 3;
                break;
            case 'broker':
            case 'estateagent':
                $this->steps = ['Stammdaten', 'Fertig'];
                $this->totalSteps = 2;
                break;
            case 'customer':
                $this->steps = ['Stammdaten', 'Fertig'];
                $this->totalSteps = 2;
                break;
            default:
                $this->steps = ['Stammdaten', 'Fertig'];
                $this->totalSteps = 2;
                break;
        }
    }

    public function saveStep1(): void
    {
        $normalizedType = strtolower(str_replace('-', '', $this->partnerType));
        $isCustomer = $normalizedType === 'customer';
        $isBroker = $normalizedType === 'broker' || $normalizedType === 'estateagent';
        $rules = [
            'salutation' => 'required|in:Herr,Frau,Divers',
            'firstName' => 'required|string|max:255',
            'lastName' => 'required|string|max:255',
            'street' => 'required|string|max:255',
            'houseNumber' => 'required|string|max:20',
            'zip' => 'required|string|max:10',
            'city' => 'required|string|max:255',
            'country' => 'required|string|max:255',
            'phone' => 'nullable|string|max:50',
        ];

        if (!$isCustomer) {
            $rules['companyName'] = 'required|string|max:255';
            $rules['description'] = 'nullable|string|max:1000';
            $rules['website'] = 'nullable|url|max:255';
        }

        // Für Broker ist displayName Pflicht
        if ($isBroker) {
            $rules['displayName'] = 'required|string|max:255';
        }

        $this->validate($rules, [
            'salutation.required' => __('Bitte wählen Sie eine Anrede.'),
            'firstName.required' => __('Bitte geben Sie einen Vornamen ein.'),
            'lastName.required' => __('Bitte geben Sie einen Nachnamen ein.'),
            'companyName.required' => __('Bitte geben Sie einen Firmennamen ein.'),
            'displayName.required' => __('Bitte geben Sie einen Anzeigenamen ein.'),
            'street.required' => __('Bitte geben Sie eine Straße ein.'),
            'houseNumber.required' => __('Bitte geben Sie eine Hausnummer ein.'),
            'zip.required' => __('Bitte geben Sie eine Postleitzahl ein.'),
            'city.required' => __('Bitte geben Sie eine Stadt ein.'),
            'country.required' => __('Bitte wählen Sie ein Land.'),
            'website.url' => __('Bitte geben Sie eine gültige URL ein.'),
        ]);

        // Update Partner
        $updateData = [
            'salutation' => $this->salutation,
            'first_name' => $this->firstName,
            'last_name' => $this->lastName,
            'street' => $this->street,
            'house_number' => $this->houseNumber,
            'zip' => $this->zip,
            'city' => $this->city,
            'country' => $this->country,
            'phone' => $this->phone,
        ];

        if (!$isCustomer) {
            $updateData['company_name'] = $this->companyName;
            $updateData['description'] = $this->description;
            $updateData['website'] = $this->website;
        }

        if ($isBroker) {
            $updateData['display_name'] = $this->displayName;
        }

        $this->partner->update($updateData);

        // Für Broker und Kunden: Direkt zum Erfolg
        if ($isBroker || $isCustomer) {
            $this->completeSetup();
        } else {
            $this->currentStep = 2;
        }
    }

    public function saveStep2Retailer(): void
    {
        $this->validate(
            [
                'deliveryRadius' => 'required|integer|min:1|max:500',
                'assemblyRadius' => 'required|integer|min:1|max:500',
            ],
            [
                'deliveryRadius.required' => __('Bitte geben Sie einen Lieferradius ein.'),
                'deliveryRadius.min' => __('Der Lieferradius muss mindestens 1 km betragen.'),
                'assemblyRadius.required' => __('Bitte geben Sie einen Montageradius ein.'),
                'assemblyRadius.min' => __('Der Montageradius muss mindestens 1 km betragen.'),
            ],
        );

        $this->partner->update([
            'delivery_radius_km' => $this->deliveryRadius,
            'assembly_radius_km' => $this->assemblyRadius,
        ]);

        $this->completeSetup();
    }

    public function saveStep2Manufacturer(): void
    {
        $this->validate(
            [
                'brandName' => 'required|string|max:255',
                'brandDescription' => 'nullable|string|max:1000',
                'brandLogo' => 'nullable|image|mimes:jpeg,png,jpg,webp|max:2048',
            ],
            [
                'brandName.required' => __('Bitte geben Sie einen Markennamen ein.'),
                'brandLogo.image' => __('Das Marken-Logo muss eine Bilddatei sein.'),
                'brandLogo.mimes' => __('Das Marken-Logo muss im Format JPG, PNG oder WebP sein.'),
                'brandLogo.max' => __('Das Marken-Logo darf maximal 2 MB groß sein.'),
            ],
        );

        // Speichere Brand-Logo falls hochgeladen
        $brandLogoPath = null;
        if ($this->brandLogo) {
            $brandLogoPath = $this->brandLogo->store('brand-logos', 'public');
        }

        // Erstelle Brand
        Brand::create([
            'partner_id' => $this->partner->id,
            'name' => $this->brandName,
            'slug' => Str::slug($this->brandName),
            'description' => $this->brandDescription,
            'logo_url' => $brandLogoPath,
            'is_active' => true,
        ]);

        $this->completeSetup();
    }


    protected function completeSetup(): void
    {
        $this->partner->update([
            'is_active' => true,
            'setup_completed' => true,
            'setup_completed_at' => now(),
        ]);

        // Markiere Registrierungscode als verbraucht, falls vorhanden
        if ($this->registrationCode && $this->registrationCode->isAvailable()) {
            $this->registrationCode->markUsed(Auth::user());
            session()->forget(['registration_code_id', 'registration_role']);
        }

        $this->currentStep = $this->totalSteps;
    }

    public function goToDashboard(): void
    {
        $this->redirect(route('dashboard'), navigate: true);
    }

    public function handleLogout(): void
    {

        Auth::guard('web')->logout();

        session()->invalidate();
        session()->regenerateToken();

        $this->redirect(route('home'), navigate: false);
    }

    protected function loadRegistrationCode(): void
    {
        $codeId = session('registration_code_id');
        $role = session('registration_role');

        if (!$codeId || !$role) {
            return;
        }

        $this->registrationCode = RegistrationCode::where('id', $codeId)
            ->where('role', $role)
            ->first();

        if (!$this->registrationCode || !$this->registrationCode->isAvailable()) {
            // Ungültig/verbraucht -> Session aufräumen
            session()->forget(['registration_code_id', 'registration_role']);
            $this->registrationCode = null;
        }
    }
}; ?>

{{-- Konfetti Script laden --}}
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

<div class="w-full max-w-3xl">
    {{-- Header --}}
    <div class="text-center mb-8">
        @include('partials.logo-head')
        <h1 class="text-3xl font-bold text-zinc-900 dark:text-white mb-2">
            {{ __('Vervollständigen Sie Ihr Profil') }}
        </h1>

    </div>

    {{-- Progress Indicator --}}
    <x-wizard-progress :currentStep="$currentStep" :totalSteps="$totalSteps" :steps="$steps" />

    {{-- Wizard Content --}}
    <flux:card class="shadow-2xl">
        {{-- Step 1: Stammdaten (für alle Rollen) --}}
        @if ($currentStep === 1)
            @php
                $isCustomer = strtolower(str_replace('-', '', $partnerType)) === 'customer';
            @endphp
            <form wire:submit.prevent="saveStep1" class="space-y-6">
                <div>
                    <flux:heading size="lg" class="mb-2">
                        <div class="flex items-center gap-2">
                        @svg('heroicon-o-'.$roleIcon, 'w-5 h-5')
                        {{ __('Ihre Stammdaten') }} / {{ $roleName }}
                        </div>
                    </flux:heading>
                    <flux:subheading>
                        {{ __('Diese Informationen helfen uns, Ihr Profil zu vervollständigen.') }}
                    </flux:subheading>
                </div>

                <flux:separator />

                {{-- Firmenname (nur für Nicht-Kunden) --}}
                @if (!$isCustomer)

                    <flux:field>
                        <flux:label>{{ __('Firmenname') }} <span class="text-red-500">*</span></flux:label>
                        <flux:input wire:model="companyName" name="companyName" icon="building-office" placeholder="{{ __('z.B. Müller GmbH') }}" />
                        @error('companyName')
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </flux:field>

                    @php
                        $isBroker = strtolower(str_replace('-', '', $partnerType)) === 'broker' || strtolower(str_replace('-', '', $partnerType)) === 'estateagent';
                    @endphp

                    @if ($isBroker)
                        <flux:field>
                            <flux:label>{{ __('Anzeigename') }} <span class="text-red-500">*</span></flux:label>
                            <flux:description>{{ __('Der Name, der Ihren Kunden angezeigt wird (kann vom Firmennamen abweichen)') }}</flux:description>
                            <flux:input wire:model="displayName" name="displayName" icon="user" placeholder="{{ __('z.B. Max Schmidt oder Immobilien Schmidt') }}" />
                            @error('displayName')
                                <flux:error>{{ $message }}</flux:error>
                            @enderror
                        </flux:field>
                    @endif

                    <flux:field>
                        <flux:label>{{ __('Kurzbeschreibung') }}</flux:label>
                        <flux:textarea wire:model="description" name="description" rows="3" placeholder="{{ __('Ein kurzer Text über Ihr Unternehmen...') }}" />
                        @error('description')
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </flux:field>

                    <flux:separator />
                @endif

                {{-- Persönliche Daten --}}
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <flux:field>
                        <flux:label>{{ __('Anrede') }} <span class="text-red-500">*</span></flux:label>
                        <flux:select wire:model="salutation" name="salutation">
                            <flux:select.option value="">{{ __('Bitte wählen') }}</flux:select.option>
                            <flux:select.option value="Herr">{{ __('Herr') }}</flux:select.option>
                            <flux:select.option value="Frau">{{ __('Frau') }}</flux:select.option>
                            <flux:select.option value="Divers">{{ __('Divers') }}</flux:select.option>
                        </flux:select>
                        @error('salutation')
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </flux:field>

                    <flux:field>
                        <flux:label>{{ __('Vorname') }} <span class="text-red-500">*</span></flux:label>
                        <flux:input wire:model="firstName" name="firstName" icon="user" value="{{ $firstName }}" />
                        @error('firstName')
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </flux:field>

                    <flux:field>
                        <flux:label>{{ __('Nachname') }} <span class="text-red-500">*</span></flux:label>
                        <flux:input wire:model="lastName" name="lastName" icon="user" value="{{ $lastName }}" />
                        @error('lastName')
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </flux:field>
                </div>

                <flux:separator />

                {{-- Adresse --}}
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <flux:field class="md:col-span-3">
                        <flux:label>{{ __('Straße') }} <span class="text-red-500">*</span></flux:label>
                        <flux:input wire:model="street" name="street" icon="map-pin" placeholder="{{ __('Musterstraße') }}" />
                        @error('street')
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </flux:field>

                    <flux:field>
                        <flux:label>{{ __('Hausnummer') }} <span class="text-red-500">*</span></flux:label>
                        <flux:input wire:model="houseNumber" name="houseNumber" placeholder="{{ __('123a') }}" />
                        @error('houseNumber')
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </flux:field>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <flux:field>
                        <flux:label>{{ __('Postleitzahl') }} <span class="text-red-500">*</span></flux:label>
                        <flux:input wire:model="zip" name="zip" icon="map" placeholder="{{ __('12345') }}" />
                        @error('zip')
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </flux:field>

                    <flux:field class="md:col-span-2">
                        <flux:label>{{ __('Ort') }} <span class="text-red-500">*</span></flux:label>
                        <flux:input wire:model="city" name="city" icon="building-office" placeholder="{{ __('Musterstadt') }}" />
                        @error('city')
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </flux:field>
                </div>

                <flux:field>
                    <flux:label>{{ __('Land') }} <span class="text-red-500">*</span></flux:label>
                    <flux:select wire:model="country" name="country">
                        <flux:select.option value="Deutschland">{{ __('Deutschland') }}</flux:select.option>
                        <flux:select.option value="Österreich">{{ __('Österreich') }}</flux:select.option>
                        <flux:select.option value="Schweiz">{{ __('Schweiz') }}</flux:select.option>
                    </flux:select>
                    @error('country')
                        <flux:error>{{ $message }}</flux:error>
                    @enderror
                </flux:field>

                <flux:field>
                    <flux:label>{{ __('Telefon') }}</flux:label>
                    <flux:input wire:model="phone" name="phone" type="tel" icon="phone" placeholder="{{ __('optional') }}" />
                    @error('phone')
                        <flux:error>{{ $message }}</flux:error>
                    @enderror
                </flux:field>

                @if (!$isCustomer)
                    <flux:field>
                        <flux:label>{{ __('Website') }}</flux:label>
                        <flux:input wire:model="website" name="website" type="url" icon="globe-alt" placeholder="https://..." />
                        @error('website')
                            <flux:error>{{ $message }}</flux:error>
                        @enderror
                    </flux:field>
                @endif

                <flux:separator />

                <x-error-alert />

                <div class="flex justify-end">
                    @php
                        $normalized = strtolower(str_replace('-', '', $partnerType));
                        $isBrokerOrCustomer = $normalized === 'broker' || $normalized === 'estateagent' || $isCustomer;
                    @endphp
                    <flux:button type="submit" variant="primary" icon="{{ $isBrokerOrCustomer ? 'check-circle' : 'arrow-right' }}" class="cursor-pointer" wire:target="saveStep1">
                        @if ($normalized === 'retailer')
                            {{ __('Weiter zu Liefergebiete') }}
                        @elseif($normalized === 'manufacturer')
                            {{ __('Weiter zu Marke') }}
                        @else
                            {{ __('Setup abschließen') }}
                        @endif
                    </flux:button>
                </div>
            </form>
        @endif

        {{-- Step 2: Retailer - Liefergebiete --}}
        @if ($currentStep === 2 && $partnerType === 'Retailer')
            <form wire:submit.prevent="saveStep2Retailer" class="space-y-6">
                <div>
                    <flux:heading size="lg" class="mb-2">
                        🚚 {{ __('Ihre Liefergebiete') }}
                    </flux:heading>
                    <flux:subheading>
                        {{ __('Wie weit liefern und montieren Sie von Ihrer Adresse (:zip :city) aus?', ['zip' => $zip, 'city' => $city]) }}
                    </flux:subheading>
                </div>

                <flux:separator />

                <flux:field>
                    <flux:label>{{ __('Lieferradius') }} <span class="text-red-500">*</span></flux:label>
                    <flux:description>{{ __('Ich liefere im Umkreis von ... km') }}</flux:description>
                    <div class="flex items-center gap-4">
                        <flux:input wire:model="deliveryRadius" name="deliveryRadius" type="number" min="1" max="500"
                            class="flex-1" />
                        <span class="text-sm text-zinc-600 dark:text-zinc-400">km</span>
                    </div>
                    @error('deliveryRadius')
                        <flux:error>{{ $message }}</flux:error>
                    @enderror
                </flux:field>

                <flux:field>
                    <flux:label>{{ __('Montageradius') }} <span class="text-red-500">*</span></flux:label>
                    <flux:description>{{ __('Ich montiere im Umkreis von ... km') }}</flux:description>
                    <div class="flex items-center gap-4">
                        <flux:input wire:model="assemblyRadius" name="assemblyRadius" type="number" min="1" max="500"
                            class="flex-1" />
                        <span class="text-sm text-zinc-600 dark:text-zinc-400">km</span>
                    </div>
                    @error('assemblyRadius')
                        <flux:error>{{ $message }}</flux:error>
                    @enderror
                </flux:field>

                <flux:separator />

                <x-error-alert />

                <div class="flex justify-end">
                    <flux:button type="submit" variant="primary" icon="check-circle">
                        {{ __('Setup abschließen') }}
                    </flux:button>
                </div>
            </form>
        @endif

        {{-- Step 2: Manufacturer - Marke anlegen --}}
        @if ($currentStep === 2 && $partnerType === 'Manufacturer')
            <form wire:submit.prevent="saveStep2Manufacturer" class="space-y-6">
                <div>
                    <flux:heading size="lg" class="mb-2">
                        ™️ {{ __('Ihre Marke') }}
                    </flux:heading>
                    <flux:subheading>
                        {{ __('Unter dieser Marke werden Ihre Produkte auf B2in gelistet. (Sie können später weitere Marken hinzufügen)') }}
                    </flux:subheading>
                </div>

                <flux:separator />

                <flux:field>
                    <flux:label>{{ __('Markenname') }} <span class="text-red-500">*</span></flux:label>
                    <flux:input wire:model="brandName" name="brandName" icon="tag"
                        placeholder="{{ __('z.B. Möbelwerke Premium') }}" />
                    @error('brandName')
                        <flux:error>{{ $message }}</flux:error>
                    @enderror
                </flux:field>

                <flux:field>
                    <flux:label>{{ __('Marken-Logo (optional)') }}</flux:label>
                    <flux:description>{{ __('Laden Sie Ihr Marken-Logo hoch (max. 2 MB, JPG/PNG)') }}</flux:description>

                    <div class="space-y-2">
                        <input type="file" wire:model.live="brandLogo" name="brandLogo" accept="image/jpeg,image/png,image/jpg,image/webp"
                            class="block w-full text-sm text-zinc-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-accent-50 file:text-accent-700 hover:file:bg-accent-100 dark:text-zinc-400 dark:file:bg-accent-900/20 dark:file:text-accent-400" />

                        @error('brandLogo')
                            <flux:error>{{ $message }}</flux:error>
                        @enderror

                        <div wire:loading wire:target="brandLogo" class="text-sm text-accent-600 dark:text-accent-400">
                            <flux:icon.arrow-path class="inline-block h-4 w-4 animate-spin mr-2" />
                            {{ __('Wird hochgeladen...') }}
                        </div>

                        @if ($brandLogo)
                            <div wire:loading.remove wire:target="brandLogo">
                                @try
                                    <div class="p-2 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
                                        <div class="flex items-center gap-3">
                                            <img src="{{ $brandLogo->temporaryUrl() }}"
                                                class="h-16 w-16 object-contain rounded border" alt="Brand Logo Preview">
                                            <div class="flex-1">
                                                <p class="text-sm font-medium text-green-800 dark:text-green-200">{{ __('Logo erfolgreich hochgeladen') }}</p>
                                                <p class="text-xs text-green-600 dark:text-green-400">{{ $brandLogo->getClientOriginalName() }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @catch(\Exception $e)
                                    <div class="p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                                        <p class="text-sm text-red-800 dark:text-red-200">{{ __('Fehler beim Laden der Vorschau') }}</p>
                                    </div>
                                @endtry
                            </div>
                        @endif
                    </div>
                </flux:field>

                <flux:field>
                    <flux:label>{{ __('Marken-Beschreibung') }}</flux:label>
                    <flux:textarea wire:model="brandDescription" name="brandDescription" rows="4"
                        placeholder="{{ __('Ein kurzer Text über Ihre Marke...') }}" />
                    @error('brandDescription')
                        <flux:error>{{ $message }}</flux:error>
                    @enderror
                </flux:field>

                <flux:separator />

                <x-error-alert />

                <div class="flex justify-end">
                    <flux:button type="submit" variant="primary" icon="check-circle">
                        {{ __('Setup abschließen') }}
                    </flux:button>
                </div>
            </form>
        @endif

        {{-- Final Step: Fertig! --}}
        @if ($currentStep === $totalSteps)
            <div class="text-center space-y-6 py-8" x-data x-init="
                // Konfetti-Effekt
                const duration = 3 * 1000;
                const end = Date.now() + duration;

                (function frame() {
                    confetti({
                        particleCount: 5,
                        angle: 60,
                        spread: 55,
                        origin: { x: 0 },
                        colors: ['#10b981', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6']
                    });
                    confetti({
                        particleCount: 5,
                        angle: 120,
                        spread: 55,
                        origin: { x: 1 },
                        colors: ['#10b981', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6']
                    });

                    if (Date.now() < end) {
                        requestAnimationFrame(frame);
                    }
                }());
            ">
                <div class="flex justify-center">
                    <div
                        class="flex items-center justify-center w-20 h-20 rounded-full bg-green-100 dark:bg-green-900/20 animate-bounce">
                        <flux:icon.check-circle class="h-12 w-12 text-green-600 dark:text-green-400" />
                    </div>
                </div>

                <div>
                    <flux:heading size="xl" class="mb-2">
                        ✅ {{ __('Einrichtung abgeschlossen!') }}
                    </flux:heading>
                    <flux:subheading>
                        @if ($partnerType === 'Retailer')
                            {{ __('Sie sind nun ein aktiver Händler. Sie können jetzt Ihr Sortiment pflegen.') }}
                        @elseif($partnerType === 'Manufacturer')
                            {{ __('Sie sind nun ein aktiver Hersteller. Sie können jetzt Ihre Produkte anlegen.') }}
                        @else
                            {{ __('Ihr Profil ist aktiv. In Ihrem Dashboard finden Sie Ihre persönlichen Einladungslinks.') }}
                        @endif
                    </flux:subheading>
                </div>

                <flux:separator />

                <div class="flex flex-col sm:flex-row gap-4 justify-center">

                    <button type="button" wire:click="goToDashboard"
                        class="inline-flex items-center justify-center gap-2 px-6 py-3 text-base font-semibold text-white bg-accent-600 hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600 rounded-lg transition-colors">
                        @svg('heroicon-o-home', 'w-5 h-5')
                        {{ __('Zum Dashboard') }}
                    </button>
                </div>
            </div>
        @endif
    </flux:card>

    <div class="mt-4 text-center">
        <form method="POST" action="{{ route('auth.logout') }}" class="inline">
            @csrf
            <button type="submit"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white transition-colors cursor-pointer rounded-lg">
                @svg('heroicon-o-arrow-left-start-on-rectangle', 'w-5 h-5')
                {{ __('Logout') }}
            </button>
        </form>
    </div>
</div>