@extends('layouts.app')
@section('title', 'Tags & Categories - HBL Product Scraper')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h1 class="h3 mb-1">Tags & Categories</h1>
        <div class="text-muted">Browse discovered categories and scraped product tags.</div>
    </div>
    <div class="d-flex gap-2">
        <a class="btn btn-outline-success" href="{{ route('taxonomy.products.export.form', ['mapping' => $mappingFilter]) }}">Export Products CSV</a>
        <a class="btn btn-outline-primary" href="{{ route('products.index') }}">Products</a>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md"><div class="card stat-card"><div class="card-body"><div class="text-muted">Source categories</div><div class="display-6">{{ number_format($summary['categories']) }}</div></div></div></div>
    <div class="col-md"><div class="card stat-card"><div class="card-body"><div class="text-muted">Tags</div><div class="display-6">{{ number_format($summary['tags']) }}</div></div></div></div>
    <div class="col-md"><div class="card stat-card"><div class="card-body"><div class="text-muted">Tag assignments</div><div class="display-6">{{ number_format($summary['tagged_products']) }}</div></div></div></div>
    <div class="col-md"><div class="card stat-card"><div class="card-body"><div class="text-muted">Mapped terms</div><div class="display-6" data-summary-count="mapped_terms">{{ number_format($summary['mapped_terms']) }}</div></div></div></div>
    <div class="col-md"><div class="card stat-card"><div class="card-body"><div class="text-muted">Unmapped terms</div><div class="display-6" data-summary-count="unmapped_terms">{{ number_format($summary['unmapped_terms']) }}</div></div></div></div>
</div>

<div class="card mb-4">
    <div class="card-header bg-white"><strong>Saved category structure</strong></div>
    <div class="card-body">
        <div class="row g-3">
            @forelse($catalogCategories as $catalogCategory)
                <div class="col-md-6 col-xl-4">
                    <div class="border rounded p-3 h-100 bg-white">
                        <div class="d-flex justify-content-between gap-2 align-items-start mb-2">
                            <div class="fw-semibold">
                                {{ $catalogCategory->name }}
                                <span class="text-muted">(<span data-catalog-count="category:{{ $catalogCategory->id }}">{{ number_format($catalogCounts['categories'][$catalogCategory->id] ?? 0) }}</span>)</span>
                            </div>
                            <a class="btn btn-sm btn-outline-success" href="{{ route('taxonomy.products.export.form', ['catalog_category_id' => $catalogCategory->id]) }}">Export</a>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($catalogCategory->subcategories as $subcategory)
                                <span class="badge text-bg-light border d-inline-flex align-items-center gap-2">
                                    <span>
                                        {{ $subcategory->name }}
                                        <span class="text-muted">(<span data-catalog-count="subcategory:{{ $subcategory->id }}">{{ number_format($catalogCounts['subcategories'][$subcategory->id] ?? 0) }}</span>)</span>
                                    </span>
                                    <a class="link-success text-decoration-none" href="{{ route('taxonomy.products.export.form', ['catalog_subcategory_id' => $subcategory->id]) }}">CSV</a>
                                </span>
                            @endforeach
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-muted">Category structure has not been synced yet.</div>
            @endforelse
        </div>
    </div>
</div>

<div class="card card-body mb-4">
    <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between">
        <div>
            <div class="fw-semibold">Mapping filter</div>
            <div class="text-muted small">Use this to focus on unmapped scraped terms first.</div>
        </div>
        <div class="btn-group" role="group" aria-label="Mapping filter">
            <a class="btn btn-sm {{ $mappingFilter === 'all' ? 'btn-primary' : 'btn-outline-primary' }}" href="{{ route('taxonomy.index', ['mapping' => 'all']) }}">
                All ({{ number_format($filterCounts['all'] + $filterCounts['all_tags']) }})
            </a>
            <a class="btn btn-sm {{ $mappingFilter === 'mapped' ? 'btn-primary' : 'btn-outline-primary' }}" href="{{ route('taxonomy.index', ['mapping' => 'mapped']) }}">
                Mapped ({{ number_format($filterCounts['mapped'] + $filterCounts['mapped_tags']) }})
            </a>
            <a class="btn btn-sm {{ $mappingFilter === 'unmapped' ? 'btn-primary' : 'btn-outline-primary' }}" href="{{ route('taxonomy.index', ['mapping' => 'unmapped']) }}">
                Unmapped ({{ number_format($filterCounts['unmapped'] + $filterCounts['unmapped_tags']) }})
            </a>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <strong>Categories</strong>
                <span class="badge text-bg-secondary">{{ number_format($categories->count()) }}</span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead><tr><th>Source term</th><th>Suggested main</th><th>Suggested sub</th><th>Update mapping</th><th class="text-end">Products</th><th></th></tr></thead>
                    <tbody>
                    @forelse($categories as $category)
                        <tr data-mapping-row data-source-type="{{ $category->source === 'Source category' ? 'source_category' : 'tag' }}" data-source-term="{{ $category->category }}">
                            <td>{{ $category->category }}</td>
                            <td data-mapping-main>{{ $category->mapping?->category?->name ?: '—' }}</td>
                            <td data-mapping-sub>
                                @if($category->mapping?->subcategory)
                                    <span class="badge text-bg-primary">{{ $category->mapping->subcategory->name }}</span>
                                @else
                                    <span class="badge text-bg-warning">Unmapped</span>
                                @endif
                            </td>
                            <td style="min-width: 430px">
                                <form method="post" action="{{ route('taxonomy.mappings.update') }}" class="taxonomy-mapping-form row g-2 align-items-center">
                                    @csrf
                                    <input type="hidden" name="source_type" value="{{ $category->source === 'Source category' ? 'source_category' : 'tag' }}">
                                    <input type="hidden" name="source_term" value="{{ $category->category }}">
                                    <div class="col">
                                        <select class="form-select form-select-sm" name="catalog_category_id" data-main-select>
                                            <option value="">No main</option>
                                            @foreach($catalogCategories as $catalogCategory)
                                                <option value="{{ $catalogCategory->id }}" @selected((int) ($category->mapping?->catalog_category_id) === $catalogCategory->id)>{{ $catalogCategory->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col">
                                        <select class="form-select form-select-sm" name="catalog_subcategory_id" data-sub-select>
                                            <option value="">No sub</option>
                                            @foreach($catalogCategories as $catalogCategory)
                                                <optgroup label="{{ $catalogCategory->name }}">
                                                    @foreach($catalogCategory->subcategories as $subcategory)
                                                        <option value="{{ $subcategory->id }}" data-parent-category="{{ $catalogCategory->id }}" @selected((int) ($category->mapping?->catalog_subcategory_id) === $subcategory->id)>{{ $subcategory->name }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-auto"><button class="btn btn-sm btn-success" data-default-label="Save">Save</button></div>
                                    <div class="col-12 small" data-save-status></div>
                                </form>
                            </td>
                            <td class="text-end">{{ number_format($category->products_count) }}</td>
                            <td class="text-end"><a class="btn btn-sm btn-outline-primary" href="{{ route('products.index', ['category' => $category->category]) }}" target="_blank" rel="noopener">View products</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="text-center py-5 text-muted">No categories found yet.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <strong>Tags</strong>
                <span class="badge text-bg-secondary">{{ number_format($tags->count()) }}</span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead><tr><th>Tag</th><th>Suggested main</th><th>Suggested sub</th><th>Update mapping</th><th class="text-end">Products</th><th></th></tr></thead>
                    <tbody>
                    @forelse($tags as $tag)
                        <tr data-mapping-row data-source-type="tag" data-source-term="{{ $tag->tag }}">
                            <td><span class="badge text-bg-secondary">{{ $tag->tag }}</span></td>
                            <td data-mapping-main>{{ $tag->mapping?->category?->name ?: '—' }}</td>
                            <td data-mapping-sub>
                                @if($tag->mapping?->subcategory)
                                    <span class="badge text-bg-primary">{{ $tag->mapping->subcategory->name }}</span>
                                @else
                                    <span class="badge text-bg-warning">Unmapped</span>
                                @endif
                            </td>
                            <td style="min-width: 430px">
                                <form method="post" action="{{ route('taxonomy.mappings.update') }}" class="taxonomy-mapping-form row g-2 align-items-center">
                                    @csrf
                                    <input type="hidden" name="source_type" value="tag">
                                    <input type="hidden" name="source_term" value="{{ $tag->tag }}">
                                    <div class="col">
                                        <select class="form-select form-select-sm" name="catalog_category_id" data-main-select>
                                            <option value="">No main</option>
                                            @foreach($catalogCategories as $catalogCategory)
                                                <option value="{{ $catalogCategory->id }}" @selected((int) ($tag->mapping?->catalog_category_id) === $catalogCategory->id)>{{ $catalogCategory->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col">
                                        <select class="form-select form-select-sm" name="catalog_subcategory_id" data-sub-select>
                                            <option value="">No sub</option>
                                            @foreach($catalogCategories as $catalogCategory)
                                                <optgroup label="{{ $catalogCategory->name }}">
                                                    @foreach($catalogCategory->subcategories as $subcategory)
                                                        <option value="{{ $subcategory->id }}" data-parent-category="{{ $catalogCategory->id }}" @selected((int) ($tag->mapping?->catalog_subcategory_id) === $subcategory->id)>{{ $subcategory->name }}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-auto"><button class="btn btn-sm btn-success" data-default-label="Save">Save</button></div>
                                    <div class="col-12 small" data-save-status></div>
                                </form>
                            </td>
                            <td class="text-end">{{ number_format($tag->products_count) }}</td>
                            <td class="text-end"><a class="btn btn-sm btn-outline-primary" href="{{ route('products.index', ['tag' => $tag->tag]) }}" target="_blank" rel="noopener">View products</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="text-center py-5 text-muted">No tags found yet. Scrape product details to populate tags.</td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="card card-body mt-4">
    <div class="d-flex flex-wrap gap-3 justify-content-between align-items-center">
        <div>
            <div class="fw-semibold">Mass save visible mappings</div>
            <div class="text-muted small">Saves every visible row that has a main category or subcategory selected. Blank rows are skipped.</div>
        </div>
        <div class="d-flex gap-2 align-items-center">
            <span class="small text-muted" data-mass-save-status></span>
            <button type="button" class="btn btn-success" id="mass-save-mappings">Mass save visible</button>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
const activeMappingFilter = @json($mappingFilter);

document.querySelectorAll('[data-sub-select]').forEach(select => {
    select.addEventListener('change', () => {
        const selected = select.selectedOptions[0];
        const parentCategory = selected?.dataset.parentCategory;
        const mainSelect = select.closest('form')?.querySelector('[data-main-select]');

        if (parentCategory && mainSelect) {
            mainSelect.value = parentCategory;
        }
    });
});

document.querySelectorAll('.taxonomy-mapping-form').forEach(form => {
    form.addEventListener('submit', async event => {
        event.preventDefault();
        await saveMappingForm(form);
    });
});

document.getElementById('mass-save-mappings')?.addEventListener('click', async event => {
    const button = event.currentTarget;
    const status = document.querySelector('[data-mass-save-status]');
    const seenForms = new Set();
    const forms = Array.from(document.querySelectorAll('.taxonomy-mapping-form'))
        .filter(form => form.closest('[data-mapping-row]'))
        .filter(form => {
            const row = form.closest('[data-mapping-row]');
            if (!row || row.offsetParent === null) {
                return false;
            }

            return Boolean(
                form.querySelector('[name="catalog_subcategory_id"]')?.value
                || form.querySelector('[name="catalog_category_id"]')?.value
            );
        })
        .filter(form => {
            const key = [
                form.querySelector('[name="source_type"]')?.value || '',
                form.querySelector('[name="source_term"]')?.value || '',
            ].join(':');

            if (seenForms.has(key)) {
                return false;
            }

            seenForms.add(key);
            return true;
        });

    if (!forms.length) {
        if (status) {
            status.className = 'small text-warning';
            status.textContent = 'No visible selected mappings to save.';
        }
        return;
    }

    button.disabled = true;
    const defaultLabel = button.textContent;
    let saved = 0;
    let failed = 0;

    for (const form of forms) {
        button.textContent = `Saving ${saved + failed + 1}/${forms.length}...`;
        if (status) {
            status.className = 'small text-muted';
            status.textContent = `Saving ${saved + failed + 1} of ${forms.length}`;
        }

        try {
            await saveMappingForm(form, { quiet: true });
            saved++;
        } catch (error) {
            failed++;
        }
    }

    button.disabled = false;
    button.textContent = defaultLabel;

    if (status) {
        status.className = failed ? 'small text-warning' : 'small text-success';
        status.textContent = failed ? `Saved ${saved}, failed ${failed}.` : `Saved ${saved} visible mappings.`;
    }
});

async function saveMappingForm(form, options = {}) {
    const quiet = Boolean(options.quiet);
    const button = form.querySelector('button[type="submit"], button:not([type])');
    const status = form.querySelector('[data-save-status]');
    const defaultLabel = button?.dataset.defaultLabel || 'Save';

    if (button) {
        button.disabled = true;
        button.textContent = quiet ? 'Saving' : 'Saving...';
    }

    if (status && !quiet) {
        status.className = 'col-12 small text-muted';
        status.textContent = 'Saving without page refresh...';
    }

    try {
        const response = await fetch(form.action, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: new FormData(form),
        });

        const payload = await response.json();

        if (!response.ok) {
            const message = payload.message || Object.values(payload.errors || {}).flat().join(' ') || 'Save failed.';
            throw new Error(message);
        }

        syncMatchingRows(payload.mapping);
        updateCounts(payload.counts || {});
        updateSummary(payload.summary || {});
        hideRowsIfFilteredOut(payload.mapping);

        if (status && !quiet) {
            status.className = 'col-12 small text-success';
            status.textContent = 'Saved.';
        }

        if (button) {
            button.classList.remove('btn-success');
            button.classList.add('btn-outline-success');
            button.textContent = quiet ? 'Saved' : 'Saved';
        }

        window.setTimeout(() => {
            if (button) {
                button.classList.add('btn-success');
                button.classList.remove('btn-outline-success');
                button.textContent = defaultLabel;
            }
            if (status && status.textContent === 'Saved.') {
                status.textContent = '';
            }
        }, quiet ? 500 : 1500);

        return payload;
    } catch (error) {
        if (status) {
            status.className = 'col-12 small text-danger';
            status.textContent = error.message || 'Save failed.';
        }

        if (button) {
            button.textContent = 'Retry';
        }

        throw error;
    } finally {
        if (button) {
            button.disabled = false;
        }
    }
}

function syncMatchingRows(mapping) {
    document.querySelectorAll('[data-mapping-row]').forEach(row => {
        if (row.dataset.sourceType !== mapping.source_type || row.dataset.sourceTerm !== mapping.source_term) {
            return;
        }

        const mainCell = row.querySelector('[data-mapping-main]');
        const subCell = row.querySelector('[data-mapping-sub]');
        const mainSelect = row.querySelector('[data-main-select]');
        const subSelect = row.querySelector('[data-sub-select]');

        if (mainCell) {
            mainCell.textContent = mapping.main_category || '—';
        }

        if (subCell) {
            subCell.innerHTML = mapping.subcategory
                ? `<span class="badge text-bg-primary">${escapeHtml(mapping.subcategory)}</span>`
                : '<span class="badge text-bg-warning">Unmapped</span>';
        }

        if (mainSelect) {
            mainSelect.value = mapping.catalog_category_id || '';
        }

        if (subSelect) {
            subSelect.value = mapping.catalog_subcategory_id || '';
        }

        row.dataset.mappingState = mapping.catalog_subcategory_id ? 'mapped' : 'unmapped';
    });
}

function updateCounts(counts) {
    Object.entries(counts.categories || {}).forEach(([id, value]) => {
        document.querySelectorAll(`[data-catalog-count="category:${id}"]`).forEach(element => {
            element.textContent = Number(value).toLocaleString();
        });
    });

    Object.entries(counts.subcategories || {}).forEach(([id, value]) => {
        document.querySelectorAll(`[data-catalog-count="subcategory:${id}"]`).forEach(element => {
            element.textContent = Number(value).toLocaleString();
        });
    });
}

function hideRowsIfFilteredOut(mapping) {
    if (activeMappingFilter === 'all') {
        return;
    }

    const isMapped = Boolean(mapping.catalog_subcategory_id);
    const shouldHide = (activeMappingFilter === 'mapped' && !isMapped)
        || (activeMappingFilter === 'unmapped' && isMapped);

    document.querySelectorAll('[data-mapping-row]').forEach(row => {
        if (!shouldHide || row.dataset.sourceType !== mapping.source_type || row.dataset.sourceTerm !== mapping.source_term) {
            return;
        }

        row.classList.add('table-success');
        window.setTimeout(() => {
            row.remove();
        }, 700);
    }, 700);
}

function updateSummary(summary) {
    Object.entries(summary).forEach(([key, value]) => {
        document.querySelectorAll(`[data-summary-count="${key}"]`).forEach(element => {
            element.textContent = Number(value).toLocaleString();
        });
    });
}

function escapeHtml(value) {
    return String(value)
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#039;');
}
</script>
@endpush