@extends('layouts.app')

@section('content')
    <!-- Statistics -->
    <div class="section">
        <h2>📊 Statistics</h2>
        <div class="stats">
            <div class="stat-card">
                <div class="number">{{ $m1Stores->count() }}</div>
                <div class="label">Magento 1 Stores</div>
            </div>
            <div class="stat-card">
                <div class="number">{{ $m2Stores->count() }}</div>
                <div class="label">Magento 2 Stores</div>
            </div>
            <div class="stat-card">
                <div class="number">{{ $m1CategoriesCount }}</div>
                <div class="label">Magento 1 Categories</div>
            </div>
            <div class="stat-card">
                <div class="number">{{ $m2CategoriesCount }}</div>
                <div class="label">Magento 2 Categories</div>
            </div>
        </div>
    </div>

    <!-- Store Mapping -->
    <div class="section">
        <h2>🔄 Store Mapping</h2>
        <p>Map each Magento 1 store to its corresponding Magento 2 store:</p>
        
        <div id="store-mappings">
            @foreach($m1Stores as $m1Store)
                <div class="store-mapping" style="margin-top: 15px;">
                    <div>
                        <strong>M1 Store:</strong> {{ $m1Store->name }} ({{ $m1Store->code }})
                    </div>
                    <div class="arrow">→</div>
                    <div>
                        <select class="store-select" name="store_mapping[{{ $m1Store->store_id }}]" id="store_{{ $m1Store->store_id }}">
                            <option value="">Select Magento 2 Store</option>
                            @foreach($m2Stores as $m2Store)
                                <option value="{{ $m2Store->store_id }}">{{ $m2Store->name }} ({{ $m2Store->code }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            @endforeach
        </div>

        @if($m1Stores->isEmpty())
            <div class="info-box">
                <p>No Magento 1 stores found. Please check your database connection.</p>
            </div>
        @endif
    </div>

    <!-- Actions -->
    <div class="section">
        <h2>⚡ Actions</h2>
        
        <div class="info-box" style="margin-bottom: 20px;">
            <h3 style="margin-bottom: 10px; color: #1976D2; font-size: 1.1em;">What happens when you click "Start Migration"?</h3>
            <p style="margin: 5px 0; color: #1976D2;">The migration process will:</p>
            <ul style="margin: 10px 0 0 20px; color: #1976D2; line-height: 1.8;">
                <li><strong>Migrate category structure:</strong> Create categories in Magento 2 based on the hierarchy from Magento 1, preserving parent-child relationships and positions</li>
                <li><strong>Migrate category attributes:</strong> For each mapped store, migrate category names, URL keys, and active status from Magento 1 to Magento 2</li>
                <li><strong>Preserve hierarchy:</strong> Maintain the exact category tree structure with proper levels and paths</li>
                <li><strong>Handle existing categories:</strong> If a category with the same name and parent already exists in Magento 2, it will be reused instead of creating a duplicate</li>
                <li><strong>Generate logs:</strong> Provide detailed migration logs showing which categories were added, updated, or encountered errors</li>
            </ul>
            <p style="margin: 10px 0 0 0; color: #d32f2f; font-weight: 600;">⚠️ <strong>Warning:</strong> This will modify your Magento 2 database. Make sure you have a backup before proceeding.</p>
        </div>
        
        <div class="actions">
            <button class="btn btn-primary" onclick="startMigration()" id="migrateBtn" {{ !$connectionTest['magento1'] || !$connectionTest['magento2'] ? 'disabled' : '' }}>
                Start Migration
            </button>
            <button class="btn btn-secondary" onclick="window.location.href='{{ route('categories.index') }}'">
                Preview Categories
            </button>
        </div>

        <div class="loading" id="loading">
            <div class="spinner"></div>
            <p style="margin-top: 15px;">Migration in progress...</p>
        </div>
    </div>

    <!-- Migration Logs Section -->
    <div class="section">
        <h2>📋 Migration Logs</h2>
        <p style="margin-bottom: 15px; color: #666;">Detailed logs showing which categories were added, updated, or encountered errors during migration:</p>
        
        <div class="log-container" id="migrationLogContainer" style="display: block;">
            <div id="migrationLogContent">
                <div class="log-entry" style="color: #999; font-style: italic;">
                    No migration logs yet. Click "Start Migration" to begin.
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- CSS is loaded globally via app.css --}}

@push('scripts')
    @vite(['resources/js/migration.js'])
    <script>
        window.migrationRoutes = {
            migrate: '{{ route("migration.migrate") }}'
        };
    </script>
@endpush