@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-0">
                        <i class="bi bi-arrow-left-right me-2"></i>Marketplace Integration
                    </h1>
                    <p class="text-muted">{{ $website->name }} - Sync products to popular marketplaces</p>
                </div>
                <div>
                    <a href="{{ route('marketplace.index', $website) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Marketplace
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Overview Stats -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card text-white bg-primary">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="bi bi-box-seam fs-2"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-1">Total Products</h6>
                            <h3 class="mb-0">{{ number_format($totalProducts) }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-white bg-success">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="bi bi-check-circle fs-2"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-1">Active Integrations</h6>
                            <h3 class="mb-0">{{ $integrations->where('is_enabled', true)->count() }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-white bg-info">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="bi bi-arrow-repeat fs-2"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-1">Total Synced</h6>
                            <h3 class="mb-0">{{ number_format($integrations->sum('total_products_synced')) }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Marketplace Integrations -->
    <div class="row">
        @foreach($integrations as $integration)
            <div class="col-lg-4 mb-4">
                <div class="card h-100 {{ $integration->is_enabled ? 'border-success' : '' }}">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <div class="marketplace-icon me-3" style="color: {{ $integration->marketplace_color }}">
                                @if($integration->marketplace === 'tiktok_shop')
                                    <i class="bi bi-tiktok fs-3"></i>
                                @elseif($integration->marketplace === 'lazada')
                                    <i class="bi bi-shop-window fs-3"></i>
                                @elseif($integration->marketplace === 'shopee')
                                    <i class="bi bi-bag-check fs-3"></i>
                                @endif
                            </div>
                            <div>
                                <h5 class="mb-0">{{ $integration->marketplace_name }}</h5>
                                <small class="text-muted">{{ ucfirst($integration->marketplace) }}</small>
                            </div>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" 
                                   id="toggle_{{ $integration->marketplace }}"
                                   {{ $integration->is_enabled ? 'checked' : '' }}
                                   onchange="toggleIntegration('{{ $integration->marketplace }}', this.checked)">
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Status -->
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <small class="text-muted">Status</small>
                                <span class="badge bg-{{ $integration->status_badge_color }}">
                                    {{ ucfirst($integration->sync_status) }}
                                </span>
                            </div>
                            @if($integration->last_sync_message)
                                <small class="text-muted d-block">{{ $integration->last_sync_message }}</small>
                            @endif
                        </div>

                        <!-- Configuration Status -->
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">Configuration</small>
                                @if($integration->isConfigured())
                                    <span class="badge bg-success">
                                        <i class="bi bi-check-circle"></i> Configured
                                    </span>
                                @else
                                    <span class="badge bg-warning">
                                        <i class="bi bi-exclamation-circle"></i> Not Configured
                                    </span>
                                @endif
                            </div>
                        </div>

                        <!-- Last Sync -->
                        @if($integration->last_sync_at)
                            <div class="mb-3">
                                <small class="text-muted">Last Sync: {{ $integration->last_sync_at->format('M d, Y H:i') }}</small>
                            </div>
                        @endif

                        <!-- Sync Stats -->
                        @if($integration->total_products_synced > 0)
                            <div class="mb-3">
                                <div class="d-flex justify-content-between">
                                    <small class="text-muted">Products Synced</small>
                                    <small class="fw-bold">{{ number_format($integration->total_products_synced) }}</small>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="card-footer bg-transparent">
                        <div class="d-grid gap-2">
                            @if(!$integration->isConfigured())
                                <!-- One-Click Connection (Like WordPress Plugin) -->
                                <a href="{{ route('marketplace-integration.connect', [$website, $integration->marketplace]) }}" 
                                   class="btn btn-success btn-sm">
                                    <i class="bi bi-link-45deg"></i> Connect {{ $integration->marketplace_name }}
                                </a>
                                <small class="text-muted text-center">
                                    <i class="bi bi-shield-check"></i> Secure OAuth connection - no API keys needed
                                </small>
                            @else
                                <!-- Connected State -->
                                <div class="d-flex gap-2">
                                    <button class="btn btn-outline-success btn-sm flex-fill" disabled>
                                        <i class="bi bi-check-circle"></i> Connected
                                    </button>
                                    <a href="{{ route('marketplace-integration.configure', [$website, $integration->marketplace]) }}" 
                                       class="btn btn-outline-primary btn-sm">
                                        <i class="bi bi-gear"></i>
                                    </a>
                                </div>
                                
                                @if($integration->canSync())
                                    <form method="POST" action="{{ route('marketplace-integration.sync', [$website, $integration->marketplace]) }}" 
                                          style="display: inline;" onsubmit="return confirm('Start syncing products to {{ $integration->marketplace_name }}?')">
                                        @csrf
                                        <button type="submit" class="btn btn-primary btn-sm w-100">
                                            <i class="bi bi-arrow-repeat"></i> Sync {{ $integration->total_products_synced > 0 ? 'Updates' : 'Products' }}
                                        </button>
                                    </form>
                                @else
                                    <button class="btn btn-outline-warning btn-sm w-100" 
                                            onclick="showConnectionHelp('{{ $integration->marketplace }}')">
                                        <i class="bi bi-info-circle"></i> Setup Required
                                    </button>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Help Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card bg-light">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="bi bi-info-circle"></i> Getting Started with Marketplace Integration
                    </h5>
                    <div class="row">
                        <div class="col-md-4">
                            <h6><i class="bi bi-1-circle text-primary"></i> Enable Integration</h6>
                            <p class="small text-muted">Toggle the switch to enable the marketplace integration you want to use.</p>
                        </div>
                        <div class="col-md-4">
                            <h6><i class="bi bi-2-circle text-primary"></i> Configure Credentials</h6>
                            <p class="small text-muted">Click "Configure" to set up your marketplace API credentials and sync settings.</p>
                        </div>
                        <div class="col-md-4">
                            <h6><i class="bi bi-3-circle text-primary"></i> Sync Products</h6>
                            <p class="small text-muted">Once configured, use "Sync Products" to push your products to the marketplace.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function toggleIntegration(marketplace, enabled) {
    fetch(`/websites/{{ $website->id }}/marketplace-integration/${marketplace}/toggle`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ is_enabled: enabled })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Error: ' + data.message);
            document.getElementById(`toggle_${marketplace}`).checked = !enabled;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while updating the integration');
        document.getElementById(`toggle_${marketplace}`).checked = !enabled;
    });
}

function testConnection(marketplace) {
    const button = event.target;
    const originalText = button.innerHTML;
    
    button.innerHTML = '<i class="bi bi-hourglass-split"></i> Testing...';
    button.disabled = true;
    
    fetch(`/websites/{{ $website->id }}/marketplace-integration/${marketplace}/test`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
        } else {
            alert('❌ ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('❌ Connection test failed');
    })
    .finally(() => {
        button.innerHTML = originalText;
        button.disabled = false;
    });
}

function showConnectionHelp(marketplace) {
    const helpMessages = {
        'tiktok_shop': 'To connect TikTok Shop:\n\n1. Click "Connect TikTok Shop"\n2. Login to your TikTok Shop seller account\n3. Grant permission to manage your products\n4. Return here to start syncing',
        'lazada': 'To connect Lazada:\n\n1. Click "Connect Lazada"\n2. Login to your Lazada Seller Center\n3. Authorize the application\n4. Products will sync automatically',
        'shopee': 'To connect Shopee:\n\n1. Click "Connect Shopee"\n2. Login to your Shopee Seller Centre\n3. Grant access permissions\n4. Start syncing your inventory'
    };
    
    alert('🔗 ' + (helpMessages[marketplace] || 'Connection help not available for this marketplace'));
}
</script>
@endpush

@endsection