@extends('layouts.app')

@section('title', 'Stripe Connect - Onboarding')

@section('content')
<div class="min-h-screen bg-gray-50 py-12">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-lg shadow px-6 py-8">
            <div class="mb-8">
                <h1 class="text-3xl font-bold text-gray-900">
                    Configuração de Pagamentos
                </h1>
                <p class="mt-2 text-lg text-gray-600">
                    Configure sua conta para receber pagamentos através do Stripe Connect
                </p>
            </div>

            <!-- Status da Conta -->
            <div class="mb-8">
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
                    <div class="flex items-center mb-4">
                        <div class="flex-shrink-0">
                            <svg class="h-8 w-8 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-medium text-blue-900">
                                Status da Conta
                            </h3>
                            <div class="mt-2">
                                @if(!$user->hasStripeAccount())
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
                                        Não Conectado
                                    </span>
                                @else
                                    @switch($user->getStripeAccountStatus())
                                        @case('incomplete')
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
                                                Onboarding Incompleto
                                            </span>
                                            @break
                                        @case('pending')
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                                Aguardando Aprovação
                                            </span>
                                            @break
                                        @case('restricted')
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
                                                Acesso Restrito
                                            </span>
                                            @break
                                        @case('active')
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                                Ativa
                                            </span>
                                            @break
                                        @default
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
                                                Status Desconhecido
                                            </span>
                                    @endswitch
                                @endif
                            </div>
                        </div>
                    </div>

                    @if($accountStatus)
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
                            <div class="text-center">
                                <div class="text-sm text-gray-500">Detalhes Enviados</div>
                                <div class="mt-1">
                                    @if($accountStatus['details_submitted'])
                                        <span class="text-green-600 font-medium">✓ Sim</span>
                                    @else
                                        <span class="text-red-600 font-medium">✗ Não</span>
                                    @endif
                                </div>
                            </div>
                            <div class="text-center">
                                <div class="text-sm text-gray-500">Pagamentos Habilitados</div>
                                <div class="mt-1">
                                    @if($accountStatus['charges_enabled'])
                                        <span class="text-green-600 font-medium">✓ Sim</span>
                                    @else
                                        <span class="text-red-600 font-medium">✗ Não</span>
                                    @endif
                                </div>
                            </div>
                            <div class="text-center">
                                <div class="text-sm text-gray-500">Saques Habilitados</div>
                                <div class="mt-1">
                                    @if($accountStatus['payouts_enabled'])
                                        <span class="text-green-600 font-medium">✓ Sim</span>
                                    @else
                                        <span class="text-red-600 font-medium">✗ Não</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Ações -->
            <div class="space-y-6">
                @if(!$user->hasStripeAccount() || !$user->hasCompletedStripeOnboarding())
                    <!-- Iniciar/Continuar Onboarding -->
                    <div class="border border-gray-200 rounded-lg p-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                </svg>
                            </div>
                            <div class="ml-4 flex-1">
                                <h3 class="text-lg font-medium text-gray-900">
                                    @if(!$user->hasStripeAccount())
                                        Configurar Conta para Pagamentos
                                    @else
                                        Finalizar Configuração
                                    @endif
                                </h3>
                                <p class="mt-2 text-sm text-gray-600">
                                    @if(!$user->hasStripeAccount())
                                        Conecte sua conta ao Stripe para começar a receber pagamentos. O processo é seguro e leva apenas alguns minutos.
                                    @else
                                        Finalize as informações necessárias para ativar sua conta e começar a receber pagamentos.
                                    @endif
                                </p>
                                <div class="mt-4">
                                    <button 
                                        type="button" 
                                        id="start-onboarding"
                                        class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
                                    >
                                        @if(!$user->hasStripeAccount())
                                            Iniciar Configuração
                                        @else
                                            Continuar Configuração
                                        @endif
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                @if($user->hasStripeAccount() && $user->hasCompletedStripeOnboarding())
                    <!-- Dashboard do Stripe -->
                    <div class="border border-gray-200 rounded-lg p-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                                </svg>
                            </div>
                            <div class="ml-4 flex-1">
                                <h3 class="text-lg font-medium text-gray-900">
                                    Acessar Dashboard do Stripe
                                </h3>
                                <p class="mt-2 text-sm text-gray-600">
                                    Gerencie suas configurações de pagamento, visualize transações e atualize informações bancárias.
                                </p>
                                <div class="mt-4">
                                    <button 
                                        type="button" 
                                        id="access-dashboard"
                                        class="bg-green-600 text-white px-6 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
                                    >
                                        Acessar Dashboard
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Informações sobre o Stripe Connect -->
                <div class="bg-gray-50 border border-gray-200 rounded-lg p-6">
                    <h4 class="text-lg font-medium text-gray-900 mb-4">
                        Sobre o Stripe Connect
                    </h4>
                    <div class="space-y-3 text-sm text-gray-600">
                        <div class="flex items-start">
                            <svg class="h-5 w-5 text-blue-500 mt-0.5 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span><strong>Seguro:</strong> Processamento de pagamentos certificado PCI Level 1</span>
                        </div>
                        <div class="flex items-start">
                            <svg class="h-5 w-5 text-blue-500 mt-0.5 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span><strong>Global:</strong> Aceita cartões de crédito do mundo todo</span>
                        </div>
                        <div class="flex items-start">
                            <svg class="h-5 w-5 text-blue-500 mt-0.5 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span><strong>Transparente:</strong> Taxas competitivas e transparentes</span>
                        </div>
                        <div class="flex items-start">
                            <svg class="h-5 w-5 text-blue-500 mt-0.5 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span><strong>Rápido:</strong> Transferências automáticas para sua conta</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div id="loading-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg p-6 max-w-sm mx-4">
        <div class="flex items-center">
            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span class="text-gray-700">Carregando...</span>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const startOnboardingBtn = document.getElementById('start-onboarding');
    const accessDashboardBtn = document.getElementById('access-dashboard');
    const loadingModal = document.getElementById('loading-modal');

    function showLoading() {
        loadingModal.classList.remove('hidden');
        loadingModal.classList.add('flex');
    }

    function hideLoading() {
        loadingModal.classList.add('hidden');
        loadingModal.classList.remove('flex');
    }

    function showError(message) {
        alert('Erro: ' + message);
    }

    // Iniciar onboarding
    if (startOnboardingBtn) {
        startOnboardingBtn.addEventListener('click', async function() {
            showLoading();
            
            try {
                const response = await fetch('{{ route("connect.onboarding-link") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        return_url: '{{ route("connect.return") }}',
                        refresh_url: '{{ route("connect.refresh") }}'
                    })
                });

                const data = await response.json();
                
                if (data.success) {
                    // Redireciona para o onboarding do Stripe
                    window.location.href = data.onboarding_url;
                } else {
                    hideLoading();
                    showError(data.error || 'Erro ao criar link de onboarding');
                }
            } catch (error) {
                hideLoading();
                showError('Erro de conexão. Tente novamente.');
                console.error('Error:', error);
            }
        });
    }

    // Acessar dashboard
    if (accessDashboardBtn) {
        accessDashboardBtn.addEventListener('click', async function() {
            showLoading();
            
            try {
                const response = await fetch('{{ route("connect.login-link") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });

                const data = await response.json();
                
                if (data.success) {
                    // Abre o dashboard em uma nova aba
                    window.open(data.login_url, '_blank');
                    hideLoading();
                } else {
                    hideLoading();
                    showError(data.error || 'Erro ao criar link do dashboard');
                }
            } catch (error) {
                hideLoading();
                showError('Erro de conexão. Tente novamente.');
                console.error('Error:', error);
            }
        });
    }
});
</script>
@endsection