@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1">
                        <i class="bi bi-{{ $integration->marketplace_icon }} me-2" style="color: {{ $integration->marketplace_color }}"></i>
                        Connect to {{ $integration->marketplace_name }}
                    </h1>
                    <p class="text-muted">{{ $website->name }} - Simplified connection setup</p>
                </div>
                <div>
                    <a href="{{ route('marketplace-integration.index', $website) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Integration
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- WordPress Plugin Style Connection Flow -->
            <div class="card">
                <div class="card-body text-center py-5">
                    <!-- Step Indicator -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-center mb-3">
                            <div class="step-indicator">
                                <span class="step-number bg-primary text-white">1</span>
                                <span class="step-line"></span>
                                <span class="step-number bg-light text-muted">2</span>
                                <span class="step-line"></span>
                                <span class="step-number bg-light text-muted">3</span>
                            </div>
                        </div>
                        <h4>Step 1: Authorize Connection</h4>
                        <p class="text-muted">Connect your {{ $integration->marketplace_name }} seller account securely</p>
                    </div>

                    <!-- Marketplace Logo/Icon -->
                    <div class="mb-4">
                        <div class="marketplace-logo-large" style="color: {{ $integration->marketplace_color }}">
                            <i class="bi bi-{{ str_replace('bi-', '', $integration->marketplace_icon) }} display-1"></i>
                        </div>
                    </div>

                    <!-- Connection Button -->
                    <div class="mb-4">
                        <button class="btn btn-lg btn-success px-5" onclick="startOAuthFlow('{{ $integration->marketplace }}')">
                            <i class="bi bi-shield-check me-2"></i>
                            Connect to {{ $integration->marketplace_name }}
                        </button>
                        <br>
                        <small class="text-muted mt-2 d-block">
                            <i class="bi bi-lock"></i> Secure OAuth 2.0 - Your login details are never stored
                        </small>
                    </div>

                    <!-- What Happens Next -->
                    <div class="row mt-5">
                        <div class="col-md-4">
                            <div class="feature-box">
                                <i class="bi bi-1-circle text-primary fs-3 mb-2"></i>
                                <h6>Secure Login</h6>
                                <small class="text-muted">You'll be redirected to {{ $integration->marketplace_name }} to login securely</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feature-box">
                                <i class="bi bi-2-circle text-primary fs-3 mb-2"></i>
                                <h6>Grant Permission</h6>
                                <small class="text-muted">Authorize Neosolvix to manage your products and orders</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="feature-box">
                                <i class="bi bi-3-circle text-primary fs-3 mb-2"></i>
                                <h6>Start Syncing</h6>
                                <small class="text-muted">Return here to sync your products automatically</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Connection Requirements -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-info-circle"></i> Requirements
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6><i class="bi bi-check-circle text-success"></i> What You Need:</h6>
                            <ul class="small">
                                @if($integration->marketplace === 'tiktok_shop')
                                    <li>Active TikTok Shop Seller account</li>
                                    <li>Approved seller status</li>
                                    <li>Access to seller dashboard</li>
                                @elseif($integration->marketplace === 'lazada')
                                    <li>Active Lazada Seller account</li>
                                    <li>Verified seller profile</li>
                                    <li>Access to Seller Center</li>
                                @elseif($integration->marketplace === 'shopee')
                                    <li>Active Shopee Seller account</li>
                                    <li>Verified shop status</li>
                                    <li>Access to Seller Centre</li>
                                @endif
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6><i class="bi bi-lightning text-warning"></i> What We Can Do:</h6>
                            <ul class="small">
                                <li>Sync product information</li>
                                <li>Update inventory levels</li>
                                <li>Manage product listings</li>
                                <li>Track order updates</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Setup Guide Link -->
            @if($integration->marketplace === 'tiktok_shop')
            <div class="alert alert-info mt-4">
                <i class="bi bi-info-circle"></i>
                <strong>First time setup?</strong> 
                If you see "This service does not exist" error, you need to register your app in TikTok Shop Partner Center first.
                <br>
                <a href="{{ route('marketplace-integration.setup-guide', $website) }}" class="btn btn-sm btn-outline-primary mt-2">
                    <i class="bi bi-book"></i> View Setup Guide
                </a>
            </div>
            @endif

            <!-- Manual Setup Option -->
            <div class="text-center mt-4">
                <small class="text-muted">
                    Having trouble with automatic connection? 
                    <a href="{{ route('marketplace-integration.configure', [$website, $integration->marketplace]) }}" class="text-decoration-none">
                        Try manual setup instead
                    </a>
                </small>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function startOAuthFlow(marketplace) {
    const button = event.target;
    const originalText = button.innerHTML;
    
    button.innerHTML = '<i class="bi bi-hourglass-split"></i> Redirecting to ' + marketplace.replace('_', ' ').toUpperCase() + '...';
    button.disabled = true;
    
    // Add small delay for better UX, then redirect to real OAuth
    setTimeout(() => {
        // Redirect to OAuth authorization with redirect flag
        window.location.href = `{{ route('marketplace-integration.connect', [$website, $integration->marketplace]) }}?redirect=1`;
    }, 800);
}
</script>
@endpush

<style>
.step-indicator {
    display: flex;
    align-items: center;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.step-line {
    width: 60px;
    height: 2px;
    background: #dee2e6;
    margin: 0 10px;
}

.feature-box {
    text-align: center;
    padding: 20px 10px;
}

.marketplace-logo-large i {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: 0;
}

.btn-success {
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}
</style>
@endsection