{{--
    Single global stock-adjustment modal — rendered once per page, triggered from
    anywhere via `$dispatch('open-stock-modal', { variantId, label })`.
    Pure Alpine + fetch against App\Http\Controllers\Admin\StockMovementController —
    then `$wire.$refresh()` once an adjustment is saved so the enclosing page's
    stock badges/table stay in sync.
--}}
<div
    x-data="{
        open: false,
        tab: 'adjust',
        loading: false,
        submitting: false,
        error: '',
        csrfToken: '',
        variantId: null,
        variantLabel: '',
        variant: { stock_quantity: 0, reorder_level: 0, is_low_stock: false },
        history: { data: [], current_page: 1, last_page: 1, total: 0 },
        filters: { type: '', from: '', to: '' },
        form: { type: 'adjustment', quantity: '', notes: '' },

        init() {
            this.csrfToken = document.querySelector('meta[name=csrf-token]')?.content ?? '';
        },

        openModal(variantId, label) {
            this.variantId = variantId;
            this.variantLabel = label;
            this.error = '';
            this.tab = 'adjust';
            this.filters = { type: '', from: '', to: '' };
            this.form = { type: 'adjustment', quantity: '', notes: '' };
            this.history = { data: [], current_page: 1, last_page: 1, total: 0 };
            this.open = true;
            this.loadHistory(1);
        },

        query(params) {
            return Object.entries(params)
                .filter(([, v]) => v !== '' && v !== null && v !== undefined)
                .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
                .join('&');
        },

        async loadHistory(page) {
            this.loading = true;
            try {
                const r = await fetch(`/variants/${this.variantId}/stock-movements?${this.query({ ...this.filters, page })}`, {
                    headers: { Accept: 'application/json' },
                });
                const json = await r.json();
                this.variant = json.variant;
                this.history = json.movements;
            } finally {
                this.loading = false;
            }
        },

        changePage(page) {
            if (page < 1 || page > this.history.last_page) return;
            this.loadHistory(page);
        },

        async submitAdjustment() {
            this.error = '';
            this.submitting = true;
            try {
                const r = await fetch(`/variants/${this.variantId}/stock-movements`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': this.csrfToken,
                        Accept: 'application/json',
                    },
                    body: JSON.stringify(this.form),
                });
                const json = await r.json();
                if (!r.ok) {
                    this.error = json.message ?? 'Something went wrong.';
                    return;
                }
                this.variant = json.variant;
                this.form = { type: 'adjustment', quantity: '', notes: '' };
                this.filters = { type: '', from: '', to: '' };
                this.tab = 'history';
                this.loadHistory(1);
                this.$wire.$refresh();
            } finally {
                this.submitting = false;
            }
        },

        typeBadgeClass(type) {
            const map = {
                opening: 'bg-stone-100 text-stone-700 dark:bg-stone-800 dark:text-stone-300',
                purchase: 'bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-400',
                return: 'bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-400',
                adjustment: 'bg-brand-100 text-brand-800 dark:bg-brand-950 dark:text-brand-300',
                sale: 'bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-400',
                damage: 'bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-400',
            };
            return 'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ' + (map[type] ?? map.opening);
        },
    }"
    x-on:open-stock-modal.window="openModal($event.detail.variantId, $event.detail.label)"
    x-show="open"
    x-cloak
    class="fixed inset-0 z-50 flex items-center justify-center p-4"
>
    <div class="absolute inset-0 bg-stone-950/60 backdrop-blur-sm" x-on:click="open = false"></div>

    <div
        x-show="open"
        x-transition:enter="ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="relative flex max-h-[85vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-white shadow-panel dark:bg-stone-900 dark:ring-1 dark:ring-stone-800"
    >
        <div class="flex shrink-0 items-center justify-between border-b border-stone-200 px-6 py-4 dark:border-stone-800">
            <div class="min-w-0">
                <x-ui.heading size="sm">Stock</x-ui.heading>
                <p class="mt-0.5 max-w-sm truncate text-xs text-stone-500 dark:text-stone-400" x-text="variantLabel"></p>
            </div>
            <div class="flex items-center gap-3">
                <div class="text-end">
                    <div class="text-lg font-semibold" :class="variant.is_low_stock ? 'text-red-600' : 'text-stone-900 dark:text-white'" x-text="variant.stock_quantity"></div>
                    <div class="text-[11px] text-stone-400">reorder at <span x-text="variant.reorder_level"></span></div>
                </div>
                <button type="button" x-on:click="open = false" class="rounded-lg p-1.5 text-stone-400 transition-colors hover:bg-stone-100 hover:text-stone-600 dark:hover:bg-stone-800">
                    <x-icon name="x-close" class="size-5" />
                </button>
            </div>
        </div>

        {{-- Tabs --}}
        <div class="flex shrink-0 gap-1 border-b border-stone-200 px-6 pt-3 dark:border-stone-800">
            <button type="button" x-on:click="tab = 'adjust'"
                :class="tab === 'adjust' ? 'border-brand-500 text-brand-600 dark:text-brand-400' : 'border-transparent text-stone-500 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-200'"
                class="border-b-2 px-2 pb-2.5 text-sm font-medium transition-colors">
                Adjust
            </button>
            <button type="button" x-on:click="tab = 'history'"
                :class="tab === 'history' ? 'border-brand-500 text-brand-600 dark:text-brand-400' : 'border-transparent text-stone-500 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-200'"
                class="border-b-2 px-2 pb-2.5 text-sm font-medium transition-colors">
                History <span x-show="history.total" class="text-xs text-stone-400" x-text="'(' + history.total + ')'"></span>
            </button>
        </div>

        {{-- Adjust tab --}}
        <div x-show="tab === 'adjust'" class="overflow-y-auto p-6">
            <div class="grid gap-3 sm:grid-cols-3">
                <x-ui.select x-model="form.type">
                    <option value="opening">Opening</option>
                    <option value="purchase">Purchase (in)</option>
                    <option value="adjustment">Adjustment</option>
                    <option value="return">Return (in)</option>
                    <option value="damage">Damage (out)</option>
                    <option value="sale">Sale (out)</option>
                </x-ui.select>
                <x-ui.input x-model="form.quantity" type="number" placeholder="+ in / − out" />
                <x-ui.button x-on:click="submitAdjustment()" x-bind:disabled="submitting || !form.quantity">
                    <span x-show="!submitting">Save</span>
                    <span x-show="submitting">Saving…</span>
                </x-ui.button>
                <div class="sm:col-span-3">
                    <x-ui.input x-model="form.notes" placeholder="Notes (optional)" />
                </div>
            </div>
            <p x-show="error" x-text="error" class="mt-2 text-xs font-medium text-red-600 dark:text-red-400"></p>
        </div>

        {{-- History tab --}}
        <div x-show="tab === 'history'" class="flex max-h-[70vh] flex-col overflow-hidden p-6">
            <div class="mb-3 flex shrink-0 flex-wrap gap-2">
                <select x-model="filters.type" x-on:change="loadHistory(1)" class="rounded-lg border border-stone-300 bg-white px-2.5 py-1.5 text-xs text-stone-700 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-300">
                    <option value="">All types</option>
                    <option value="opening">Opening</option>
                    <option value="purchase">Purchase</option>
                    <option value="adjustment">Adjustment</option>
                    <option value="return">Return</option>
                    <option value="damage">Damage</option>
                    <option value="sale">Sale</option>
                </select>
                <input type="date" x-model="filters.from" x-on:change="loadHistory(1)" class="rounded-lg border border-stone-300 bg-white px-2.5 py-1.5 text-xs text-stone-700 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-300" />
                <input type="date" x-model="filters.to" x-on:change="loadHistory(1)" class="rounded-lg border border-stone-300 bg-white px-2.5 py-1.5 text-xs text-stone-700 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-300" />
            </div>

            <div class="min-h-0 flex-1 overflow-y-auto rounded-xl border border-stone-200 dark:border-stone-800">
                <table class="w-full text-sm">
                    <thead class="sticky top-0 bg-stone-50 dark:bg-stone-900">
                        <tr class="text-[11px] font-medium text-stone-500 uppercase dark:text-stone-400">
                            <th class="px-4 py-2 text-start">Type</th>
                            <th class="px-4 py-2 text-end">Qty</th>
                            <th class="px-4 py-2 text-start">By</th>
                            <th class="px-4 py-2 text-start">When</th>
                            <th class="px-4 py-2 text-start">Notes</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-stone-100 dark:divide-stone-800">
                        <template x-for="m in history.data" :key="'hist-'+m.id">
                            <tr>
                                <td class="px-4 py-2.5">
                                    <span :class="typeBadgeClass(m.type)" x-text="m.type"></span>
                                    <span x-show="m.reference" class="ms-1 text-[11px] text-stone-400" x-text="m.reference"></span>
                                </td>
                                <td class="px-4 py-2.5 text-end font-medium" :class="m.quantity < 0 ? 'text-red-600' : 'text-green-600'" x-text="(m.quantity > 0 ? '+' : '') + m.quantity"></td>
                                <td class="px-4 py-2.5 text-stone-500 dark:text-stone-400" x-text="m.performed_by ?? '—'"></td>
                                <td class="px-4 py-2.5 whitespace-nowrap text-stone-500 dark:text-stone-400" x-text="m.created_at_human"></td>
                                <td class="max-w-40 truncate px-4 py-2.5 text-stone-500 dark:text-stone-400" :title="m.notes" x-text="m.notes ?? ''"></td>
                            </tr>
                        </template>
                        <tr x-show="!loading && history.data.length === 0">
                            <td colspan="5" class="px-4 py-8 text-center text-sm text-stone-400">No movements found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div x-show="history.last_page > 1" class="mt-3 flex shrink-0 items-center justify-between text-xs text-stone-500 dark:text-stone-400">
                <span>Page <span x-text="history.current_page"></span> of <span x-text="history.last_page"></span> (<span x-text="history.total"></span> total)</span>
                <div class="flex gap-2">
                    <button type="button" x-on:click="changePage(history.current_page - 1)" x-bind:disabled="history.current_page <= 1" class="rounded-lg border border-stone-300 px-2.5 py-1 disabled:opacity-40 dark:border-stone-700">Prev</button>
                    <button type="button" x-on:click="changePage(history.current_page + 1)" x-bind:disabled="history.current_page >= history.last_page" class="rounded-lg border border-stone-300 px-2.5 py-1 disabled:opacity-40 dark:border-stone-700">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>