@extends('admin.layouts.app')

@push('css')
<style>
.stat-card .card-body {
    padding: 1rem 1.25rem;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #6c757d;
}

/* Tree styles */
.category-tree {
    list-style: none;
    padding-left: 0;
}

.category-tree .tree-node {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    background: #fff;
    overflow: hidden;
}

.tree-node-header {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.tree-node-header:hover {
    background: #f8f9fa;
}

.tree-node-header .toggle-icon {
    width: 20px;
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
    color: #adb5bd;
}

.tree-node-header .toggle-icon.expanded {
    transform: rotate(90deg);
    color: #495057;
}

.tree-node-header .node-badge {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    background: #e9ecef;
    color: #495057;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    margin-right: 0.75rem;
    min-width: 70px;
    text-align: center;
}

.tree-node-header .node-name {
    flex-grow: 1;
    font-weight: 500;
}

.tree-node-header .node-count {
    font-size: 0.78rem;
    color: #6c757d;
    margin-left: 0.5rem;
}

.tree-node-header .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 0.5rem;
}

.status-dot.active { background: #198754; }
.status-dot.inactive { background: #dc3545; }

/* Level colors */
.level-1 .tree-node-header { border-left: 4px solid #0d6efd; }
.level-2 .tree-node-header { border-left: 4px solid #198754; }
.level-3 .tree-node-header { border-left: 4px solid #fd7e14; }
.level-4 .tree-node-header { border-left: 4px solid #6f42c1; }

.level-1 .node-badge { background: #cfe2ff; color: #0a58ca; }
.level-2 .node-badge { background: #d1e7dd; color: #146c43; }
.level-3 .node-badge { background: #ffe5d0; color: #ca6510; }
.level-4 .node-badge { background: #e2d9f3; color: #59359a; }

/* Children container */
.tree-children {
    list-style: none;
    padding: 0 0 0 1.5rem;
    margin: 0;
    display: none;
    border-top: 1px solid #e9ecef;
    background: #fafbfc;
}

.tree-children.expanded {
    display: block;
}

.tree-children .tree-node {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #e9ecef;
    background: transparent;
}

.tree-children .tree-node:last-child {
    border-bottom: 0;
}

/* Leaf node (no children) */
.tree-node.leaf .tree-node-header .toggle-icon {
    visibility: hidden;
}

/* Search highlight */
.highlight {
    background: #fff3cd;
    padding: 0.1rem 0.15rem;
    border-radius: 2px;
}

/* Empty tree */
.empty-tree {
    padding: 3rem;
    text-align: center;
    color: #6c757d;
}

.empty-tree i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    color: #dee2e6;
}

/* Legend */
.legend-item {
    display: inline-flex;
    align-items: center;
    margin-right: 1.5rem;
    font-size: 0.85rem;
}

.legend-bar {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    margin-right: 0.4rem;
}
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Categorías MercadoLibre</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.dashboard') }}">MarketPlace</a></li>
                    <li class="breadcrumb-item active">Categorías</li>
                </ol>
            </div>
        </div>
    </div>
</div>

{{-- Stats Cards --}}
<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="stat-label mb-1">Categorías</p>
                        <h4 class="stat-value text-primary">{{ number_format($stats['categories']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-primary-subtle rounded fs-3">
                            <i class="ri-folder-line text-primary"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="stat-label mb-1">SubCategorías</p>
                        <h4 class="stat-value text-success">{{ number_format($stats['subcategories']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-success-subtle rounded fs-3">
                            <i class="ri-folder-2-line text-success"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="stat-label mb-1">Variedades</p>
                        <h4 class="stat-value text-warning">{{ number_format($stats['varieties']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-warning-subtle rounded fs-3">
                            <i class="ri-price-tag-3-line text-warning"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="stat-label mb-1">SubVariedades</p>
                        <h4 class="stat-value" style="color: #6f42c1;">{{ number_format($stats['subvarieties']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title rounded fs-3" style="background: #e2d9f3;">
                            <i class="ri-bookmark-line" style="color: #6f42c1;"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Main Card --}}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <div class="d-flex align-items-center">
                    <h5 class="card-title mb-0 flex-grow-1">
                        <i class="ri-node-tree text-muted me-1"></i>
                        Árbol de Categorías
                    </h5>
                    <div class="flex-shrink-0 d-flex gap-2">
                        <form id="formImportML" action="{{ route('admin.meli.categories.importFromML') }}" method="POST" class="d-inline">
                            @csrf
                            <button type="button" class="btn btn-sm btn-outline-success" onclick="confirmImportCategories()">
                                <i class="ri-download-2-line me-1"></i> Importar de ML
                            </button>
                            <small class="text-muted d-block mt-1">
                                Importa categorías y subcategorías de ML. Las variedades y subvariedades se importan automáticamente al seleccionarlas en el formulario de publicación.
                            </small>
                        </form>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="btnExpandAll">
                            <i class="ri-add-box-line me-1"></i> Expandir Todo
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="btnCollapseAll">
                            <i class="ri-subtract-line me-1"></i> Colapsar Todo
                        </button>
                    </div>
                </div>
            </div>

            {{-- Search & Legend --}}
            <div class="card-body border-top border-bottom py-3">
                <div class="row align-items-center">
                    <div class="col-md-5">
                        <form method="GET" action="{{ route('admin.meli.categories.index') }}" class="d-flex gap-2">
                            <div class="input-group">
                                <span class="input-group-text"><i class="ri-search-line"></i></span>
                                <input type="text" name="search" class="form-control" placeholder="Buscar por código o descripción..."
                                       value="{{ $search ?? '' }}">
                            </div>
                            <button type="submit" class="btn btn-primary">Buscar</button>
                            @if($search)
                                <a href="{{ route('admin.meli.categories.index') }}" class="btn btn-outline-secondary">Limpiar</a>
                            @endif
                        </form>
                    </div>
                    <div class="col-md-7 text-end">
                        <div class="legend-item">
                            <span class="legend-bar" style="background: #0d6efd;"></span> Categoría
                        </div>
                        <div class="legend-item">
                            <span class="legend-bar" style="background: #198754;"></span> SubCategoría
                        </div>
                        <div class="legend-item">
                            <span class="legend-bar" style="background: #fd7e14;"></span> Variedad
                        </div>
                        <div class="legend-item">
                            <span class="legend-bar" style="background: #6f42c1;"></span> SubVariedad
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tree --}}
            <div class="card-body p-0">
                @if($categories->isEmpty())
                    <div class="empty-tree">
                        <i class="ri-folder-unknow-line"></i>
                        <h5>No hay categorías cargadas</h5>
                        <p>Las categorías se sincronizan desde Tesauro Desktop.<br>
                        Verificá que la tabla CATEGMLA tenga registros.</p>
                    </div>
                @else
                    <ul class="category-tree p-3">
                        @foreach($categories as $category)
                            @php
                                $catSubs = $subcategories->get($category->ml_categor, collect());
                                $hasChildren = $catSubs->isNotEmpty();
                            @endphp
                            <li class="tree-node level-1 {{ !$hasChildren ? 'leaf' : '' }}">
                                <div class="tree-node-header" data-toggle="tree">
                                    <i class="ri-arrow-right-s-line toggle-icon {{ ($search && $hasChildren) ? 'expanded' : '' }}"></i>
                                    <span class="node-badge">{{ $category->ml_categor }}</span>
                                    <span class="node-name">{{ $category->de_categor }}</span>
                                    @if($hasChildren)
                                        <span class="node-count">({{ $catSubs->count() }} sub)</span>
                                    @endif
                                    <span class="status-dot {{ $category->habilitada ? 'active' : 'inactive' }}" title="{{ $category->habilitada ? 'Habilitada' : 'Deshabilitada' }}"></span>
                                </div>

                                @if($hasChildren)
                                    <ul class="tree-children {{ $search ? 'expanded' : '' }}">
                                        @foreach($catSubs as $sub)
                                            @php
                                                $subKey = $category->ml_categor . '|' . $sub->ml_subcate;
                                                $subVars = $varieties->get($subKey, collect());
                                                $hasVars = $subVars->isNotEmpty();
                                            @endphp
                                            <li class="tree-node level-2 {{ !$hasVars ? 'leaf' : '' }}">
                                                <div class="tree-node-header" data-toggle="tree">
                                                    <i class="ri-arrow-right-s-line toggle-icon {{ ($search && $hasVars) ? 'expanded' : '' }}"></i>
                                                    <span class="node-badge">{{ $sub->ml_subcate }}</span>
                                                    <span class="node-name">{{ $sub->de_subcate }}</span>
                                                    @if($hasVars)
                                                        <span class="node-count">({{ $subVars->count() }} var)</span>
                                                    @endif
                                                    <span class="status-dot {{ $sub->habilitada ? 'active' : 'inactive' }}"></span>
                                                </div>

                                                @if($hasVars)
                                                    <ul class="tree-children {{ $search ? 'expanded' : '' }}">
                                                        @foreach($subVars as $variety)
                                                            @php
                                                                $varKey = $category->ml_categor . '|' . $sub->ml_subcate . '|' . $variety->ml_varieda;
                                                                $varSubs = $subvarieties->get($varKey, collect());
                                                                $hasSVars = $varSubs->isNotEmpty();
                                                            @endphp
                                                            <li class="tree-node level-3 {{ !$hasSVars ? 'leaf' : '' }}">
                                                                <div class="tree-node-header" data-toggle="tree">
                                                                    <i class="ri-arrow-right-s-line toggle-icon {{ ($search && $hasSVars) ? 'expanded' : '' }}"></i>
                                                                    <span class="node-badge">{{ $variety->ml_varieda }}</span>
                                                                    <span class="node-name">{{ $variety->de_varieda }}</span>
                                                                    @if($hasSVars)
                                                                        <span class="node-count">({{ $varSubs->count() }} svar)</span>
                                                                    @endif
                                                                    <span class="status-dot {{ $variety->habilitada ? 'active' : 'inactive' }}"></span>
                                                                </div>

                                                                @if($hasSVars)
                                                                    <ul class="tree-children {{ $search ? 'expanded' : '' }}">
                                                                        @foreach($varSubs as $subvariety)
                                                                            <li class="tree-node level-4 leaf">
                                                                                <div class="tree-node-header">
                                                                                    <i class="ri-arrow-right-s-line toggle-icon"></i>
                                                                                    <span class="node-badge">{{ $subvariety->ml_subvari }}</span>
                                                                                    <span class="node-name">{{ $subvariety->de_subvari }}</span>
                                                                                    <span class="status-dot {{ $subvariety->habilitada ? 'active' : 'inactive' }}"></span>
                                                                                </div>
                                                                            </li>
                                                                        @endforeach
                                                                    </ul>
                                                                @endif
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
function confirmImportCategories() {
    Swal.fire({
        title: 'Importar categorías de MercadoLibre',
        html: 'Se descargarán las categorías y subcategorías desde la API pública de MercadoLibre.<br>Esto puede tardar unos segundos.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#0ab39c',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, importar',
        cancelButtonText: 'Cancelar'
    }).then(function(result) {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Importando categorías...',
                html: 'Consultando la API de MercadoLibre.<br>Descargando categorías y subcategorías.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: function() { Swal.showLoading(); }
            });
            document.getElementById('formImportML').submit();
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    // Toggle tree nodes
    document.querySelectorAll('[data-toggle="tree"]').forEach(function(header) {
        header.addEventListener('click', function() {
            const node = this.closest('.tree-node');
            const children = node.querySelector(':scope > .tree-children');
            const icon = this.querySelector('.toggle-icon');

            if (!children) return;

            children.classList.toggle('expanded');
            icon.classList.toggle('expanded');
        });
    });

    // Expand All
    document.getElementById('btnExpandAll').addEventListener('click', function() {
        document.querySelectorAll('.tree-children').forEach(function(el) {
            el.classList.add('expanded');
        });
        document.querySelectorAll('.toggle-icon').forEach(function(el) {
            el.classList.add('expanded');
        });
    });

    // Collapse All
    document.getElementById('btnCollapseAll').addEventListener('click', function() {
        document.querySelectorAll('.tree-children').forEach(function(el) {
            el.classList.remove('expanded');
        });
        document.querySelectorAll('.toggle-icon').forEach(function(el) {
            el.classList.remove('expanded');
        });
    });
});
</script>
@endpush