@extends('layouts.app')

@section('content')
    <!-- Statistics -->
    <div class="section">
        <h2>📊 Category Statistics</h2>
        <div class="stats">
            <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 class="stat-card">
                <div class="number">{{ $m1CategoriesCount - $m2CategoriesCount }}</div>
                <div class="label">Difference</div>
            </div>
        </div>
    </div>

    <!-- Missing Categories Section -->
    <div class="section">
        <h2>⚠️ Magento 2 Categories Not Found in Magento 1</h2>
        <p>These categories exist in Magento 2 but do not have a matching name in Magento 1:</p>
        
        @if($m2CategoriesNotInM1->count() > 0)
            <div id="m2-categories-not-in-m1-table-wrapper" style="margin-top: 15px; max-height: 400px; overflow-y: auto;">
                <table style="width: 100%; border-collapse: collapse; background: white; border-radius: 6px;">
                    <thead>
                        <tr style="background: #f8f9fa; border-bottom: 2px solid #dee2e6;">
                            <th style="padding: 12px; text-align: left; font-weight: 600; color: #333;">ID</th>
                            <th style="padding: 12px; text-align: left; font-weight: 600; color: #333;">Category Name</th>
                            <th style="padding: 12px; text-align: left; font-weight: 600; color: #333;">Level</th>
                            <th style="padding: 12px; text-align: left; font-weight: 600; color: #333;">Status</th>
                            <th style="padding: 12px; text-align: left; font-weight: 600; color: #333;">Root Category</th>
                            <th style="padding: 12px; text-align: left; font-weight: 600; color: #333;">Path</th>
                            <th style="padding: 12px; text-align: left; font-weight: 600; color: #333;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="m2-categories-not-in-m1-tbody">
                        @foreach($m2CategoriesNotInM1 as $category)
                            <tr style="border-bottom: 1px solid #dee2e6;">
                                <td style="padding: 10px 12px;">{{ $category->entity_id }}</td>
                                <td style="padding: 10px 12px; font-weight: 500;">{{ $category->name ?? 'Unnamed Category' }}</td>
                                <td style="padding: 10px 12px;">{{ $category->level ?? 'N/A' }}</td>
                                <td style="padding: 10px 12px;">
                                    <span class="tree-badge {{ ($category->is_active ?? 0) ? 'active' : 'inactive' }}">
                                        {{ ($category->is_active ?? 0) ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td style="padding: 10px 12px;">
                                    @if(isset($category->root_category_name) && $category->root_category_name !== 'N/A')
                                        <span style="font-weight: 500;">{{ $category->root_category_name }}</span>
                                        @if(isset($category->root_category_id))
                                            <span style="font-size: 0.85em; color: #666;">(ID: {{ $category->root_category_id }})</span>
                                        @endif
                                    @else
                                        <span style="color: #999;">N/A</span>
                                    @endif
                                </td>
                                <td style="padding: 10px 12px; font-size: 0.9em; color: #666;">{{ $category->path ?? 'N/A' }}</td>
                                <td style="padding: 10px 12px;">
                                    <button 
                                        class="tree-delete-btn" 
                                        onclick="showDeleteConfirmPopup(this, {{ $category->entity_id }}, '{{ addslashes($category->name ?? 'Unnamed Category') }}', 'm2', false, 0)"
                                        title="Delete this category">
                                        Delete
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div id="m2-categories-not-in-m1-total" style="margin-top: 15px; padding: 12px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 4px;">
                <strong>Total:</strong> {{ $m2CategoriesNotInM1->count() }} {{ Str::plural('category', $m2CategoriesNotInM1->count()) }} found in Magento 2 but not in Magento 1.
            </div>
        @else
            <div id="m2-categories-not-in-m1-empty" style="margin-top: 15px; padding: 15px; background: #d4edda; border-left: 4px solid #28a745; border-radius: 4px; color: #155724;">
                ✓ All Magento 2 categories have matching names in Magento 1.
            </div>
        @endif
    </div>

    <div class="section">
        <h2>🌳 Category Trees</h2>
        <p>View category hierarchies from Magento 1 and Magento 2</p>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
            <!-- Magento 1 Tree -->
            <div>
                <h3 style="margin-bottom: 15px; color: #667eea;">Magento 1 Categories</h3>
                <div class="tree-container" id="m1-tree-container">
                    <div class="tree-loading">Loading categories...</div>
                </div>
            </div>

            <!-- Magento 2 Tree -->
            <div>
                <h3 style="margin-bottom: 15px; color: #764ba2;">Magento 2 Categories</h3>
                <div class="tree-container" id="m2-tree-container">
                    <div class="tree-loading">Loading categories...</div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

@push('scripts')
    @vite(['resources/js/categories.js'])
    <script>
        window.categoryRoutes = {
            magento1CategoryTree: '{{ route("categories.magento1-category-tree") }}',
            magento2CategoryTree: '{{ route("categories.magento2-category-tree") }}',
            deleteCategory: '{{ route("categories.delete-category", ["categoryId" => ":id"]) }}'
        };
    </script>
@endpush