@extends('frontend.layouts.app')

@section('title', $model->name . ' — ' . t('frontend.designer.configurator_title'))

@section('content')
<div class="max-w-7xl mx-auto px-4 py-6" x-data>
    {{-- Breadcrumb --}}
    <nav class="text-sm text-gray-500 mb-6">
        <a href="{{ route('frontend.designer.index') }}" class="hover:text-gray-800">@t('frontend.designer.choose_model')</a>
        <span class="mx-2">/</span>
        <span class="text-gray-800">{{ $model->name }}</span>
    </nav>

    {{-- Two-column layout --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {{-- Left column: SVG preview area --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">@t('frontend.designer.preview')</h2>
            <div id="svg-preview" class="aspect-square bg-gray-50 rounded-lg overflow-hidden">
                {{-- SVG renderer mounts here reactively via Alpine.js --}}
            </div>

            {{-- Pricing summary --}}
            <div class="mt-4 pt-4 border-t border-gray-200" x-show="$store.designer.size && $store.designer.stoneSize">
                <div class="flex justify-between text-sm text-gray-600 mb-1">
                    <span>@t('frontend.designer.base_price')</span>
                    <span x-text="$store.designer.pricing.base_price.toFixed(2) + ' ₺'"></span>
                </div>
                <div class="flex justify-between text-sm text-gray-600 mb-2">
                    <span>@t('frontend.designer.stone_total')</span>
                    <span x-text="$store.designer.pricing.stone_total.toFixed(2) + ' ₺'"></span>
                </div>
                <div class="flex justify-between text-lg font-bold text-gray-800">
                    <span>@t('frontend.designer.total')</span>
                    <span x-text="$store.designer.pricing.total.toFixed(2) + ' ₺'"></span>
                </div>
            </div>
        </div>

        {{-- Right column: Controls --}}
        <div class="space-y-6">
            {{-- Model info --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h2 class="text-xl font-bold text-gray-800">{{ $model->name }}</h2>
                <p class="text-sm text-gray-500 mt-1">{{ $model->category->name ?? '' }}</p>
                <p class="text-sm text-gray-600 mt-2">
                    @t('frontend.designer.structure_type'): <span class="font-medium">{{ $model->structure_type }}</span>
                </p>
            </div>

            {{-- Size selector (bracelet circumference) --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-3">@t('frontend.designer.select_size')</h3>
                <div class="flex flex-wrap gap-2">
                    <template x-for="s in $store.designer.braceletSizes" :key="s.mm">
                        <button
                            @click="$store.designer.setSize(s.mm)"
                            :class="$store.designer.size === s.mm
                                ? 'bg-gray-800 text-white border-gray-800'
                                : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-100'"
                            class="px-4 py-2 rounded-lg text-sm font-medium border transition-colors"
                            x-text="s.label">
                        </button>
                    </template>
                </div>
            </div>

            {{-- Stone size selector --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-3">@t('frontend.designer.select_stone_size')</h3>
                <div class="flex flex-wrap gap-2">
                    <template x-for="ss in $store.designer.availableStoneSizes" :key="ss.id">
                        <button
                            @click="$store.designer.setStoneSize(ss)"
                            :class="$store.designer.stoneSize?.id === ss.id
                                ? 'bg-gray-800 text-white border-gray-800'
                                : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-100'"
                            class="px-4 py-2 rounded-lg text-sm font-medium border transition-colors"
                            x-text="ss.label">
                        </button>
                    </template>
                </div>
            </div>

            {{-- Stone panel --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6" x-show="$store.designer.size && $store.designer.stoneSize">
                <h3 class="text-lg font-semibold text-gray-800 mb-3">@t('frontend.designer.select_stones')</h3>

                {{-- Filter panel --}}
                <div id="stone-filters" class="mb-4 space-y-3" x-data="{ showZodiacs: false, showChakras: false }">
                    {{-- Search --}}
                    <div>
                        <input type="text"
                               x-model="$store.designer.filters.search"
                               :placeholder="'{{ t('frontend.designer.filter_search') }}'"
                               class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-gray-400 focus:border-gray-400 outline-none">
                    </div>

                    {{-- Category dropdown + In-stock toggle row --}}
                    <div class="flex gap-2 items-center">
                        <select x-model="$store.designer.filters.category"
                                @change="$store.designer.filters.category = $event.target.value ? parseInt($event.target.value) : null"
                                class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-1 focus:ring-gray-400 focus:border-gray-400 outline-none bg-white">
                            <option value="">@t('frontend.designer.filter_all_categories')</option>
                            <template x-for="cat in $store.designer.stoneCategories" :key="cat.id">
                                <option :value="cat.id" x-text="cat.name"></option>
                            </template>
                        </select>
                        <label class="flex items-center gap-1.5 text-sm text-gray-600 whitespace-nowrap cursor-pointer">
                            <input type="checkbox" x-model="$store.designer.filters.inStockOnly"
                                   class="rounded border-gray-300 text-gray-800 focus:ring-gray-400">
                            <span>@t('frontend.designer.filter_in_stock')</span>
                        </label>
                    </div>

                    {{-- Zodiac filter (collapsible) --}}
                    <div class="border border-gray-200 rounded-lg">
                        <button @click="showZodiacs = !showZodiacs" type="button"
                                class="w-full flex items-center justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
                            <span>
                                @t('frontend.designer.filter_zodiacs')
                                <span x-show="$store.designer.filters.zodiacs.length > 0"
                                      class="ml-1 text-xs bg-gray-800 text-white px-1.5 py-0.5 rounded-full"
                                      x-text="$store.designer.filters.zodiacs.length"></span>
                            </span>
                            <svg :class="showZodiacs ? 'rotate-180' : ''" class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div x-show="showZodiacs" x-collapse class="px-3 pb-2">
                            <div class="grid grid-cols-2 gap-1">
                                <template x-for="z in $store.designer.zodiacList" :key="z.id">
                                    <label class="flex items-center gap-1.5 text-xs text-gray-600 cursor-pointer py-0.5">
                                        <input type="checkbox"
                                               :checked="$store.designer.filters.zodiacs.includes(z.id)"
                                               @change="$store.designer.toggleZodiac(z.id)"
                                               class="rounded border-gray-300 text-gray-800 focus:ring-gray-400 h-3.5 w-3.5">
                                        <span x-text="z.name"></span>
                                    </label>
                                </template>
                            </div>
                        </div>
                    </div>

                    {{-- Chakra filter (collapsible) --}}
                    <div class="border border-gray-200 rounded-lg">
                        <button @click="showChakras = !showChakras" type="button"
                                class="w-full flex items-center justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-lg">
                            <span>
                                @t('frontend.designer.filter_chakras')
                                <span x-show="$store.designer.filters.chakras.length > 0"
                                      class="ml-1 text-xs bg-gray-800 text-white px-1.5 py-0.5 rounded-full"
                                      x-text="$store.designer.filters.chakras.length"></span>
                            </span>
                            <svg :class="showChakras ? 'rotate-180' : ''" class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div x-show="showChakras" x-collapse class="px-3 pb-2">
                            <div class="grid grid-cols-2 gap-1">
                                <template x-for="c in $store.designer.chakraList" :key="c.id">
                                    <label class="flex items-center gap-1.5 text-xs text-gray-600 cursor-pointer py-0.5">
                                        <input type="checkbox"
                                               :checked="$store.designer.filters.chakras.includes(c.id)"
                                               @change="$store.designer.toggleChakra(c.id)"
                                               class="rounded border-gray-300 text-gray-800 focus:ring-gray-400 h-3.5 w-3.5">
                                        <span x-text="c.name"></span>
                                        <span x-show="c.color" class="w-2.5 h-2.5 rounded-full inline-block" :style="'background-color:' + c.color"></span>
                                    </label>
                                </template>
                            </div>
                        </div>
                    </div>

                    {{-- Clear filters --}}
                    <button x-show="$store.designer.hasActiveFilters()"
                            @click="$store.designer.clearFilters()"
                            class="text-xs text-gray-500 hover:text-gray-800 underline">
                        @t('frontend.designer.filter_clear')
                    </button>
                </div>

                {{-- Stone list --}}
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 max-h-96 overflow-y-auto">
                    <template x-for="stone in $store.designer.filteredStones()" :key="stone.id">
                        <div class="border border-gray-200 rounded-lg p-3 text-center">
                            <template x-if="stone.image">
                                <img :src="stone.image" :alt="stone.name" class="w-12 h-12 mx-auto rounded-full object-cover mb-2">
                            </template>
                            <template x-if="!stone.image">
                                <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 mb-2 flex items-center justify-center">
                                    <span class="text-gray-400 text-xs" x-text="stone.name.charAt(0)"></span>
                                </div>
                            </template>
                            <p class="text-xs font-medium text-gray-800 truncate" x-text="stone.name"></p>
                            <template x-for="v in stone.variants.filter(v => v.stone_size_id === $store.designer.stoneSize?.id)" :key="v.id">
                                <div>
                                    <p class="text-xs text-gray-500" x-text="v.price.toFixed(2) + ' ₺'"></p>
                                    <button
                                        @click="$store.designer.addStone(stone, v)"
                                        :disabled="v.stock <= 0 || !$store.designer.hasEmptySlot()"
                                        class="mt-1 px-3 py-1 text-xs bg-gray-800 text-white rounded hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                                        <span x-show="v.stock > 0">@t('frontend.designer.add_stone')</span>
                                        <span x-show="v.stock <= 0">@t('frontend.designer.out_of_stock')</span>
                                    </button>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
                <p x-show="$store.designer.filteredStones().length === 0" class="text-sm text-gray-400 text-center py-4">
                    @t('frontend.designer.no_stones_found')
                </p>
            </div>

            {{-- Slot display --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6" x-show="$store.designer.slotCount > 0">
                <h3 class="text-lg font-semibold text-gray-800 mb-3">
                    @t('frontend.designer.slots')
                    <span class="text-sm font-normal text-gray-500"
                          x-text="'(' + $store.designer.filledSlotCount() + '/' + $store.designer.slotCount + ')'"></span>
                </h3>
                <div class="grid grid-cols-6 sm:grid-cols-8 md:grid-cols-10 gap-2">
                    <template x-for="(slot, index) in $store.designer.slots" :key="index">
                        <div class="relative group">
                            {{-- Filled slot --}}
                            <template x-if="slot !== null">
                                <div class="w-full aspect-square rounded-full border-2 border-gray-800 flex items-center justify-center overflow-hidden cursor-pointer"
                                     @click="$store.designer.removeStone(index)"
                                     :title="slot.stone_name">
                                    <template x-if="slot.image_url">
                                        <img :src="slot.image_url" :alt="slot.stone_name" class="w-full h-full object-cover">
                                    </template>
                                    <template x-if="!slot.image_url">
                                        <span class="text-xs font-medium text-gray-700" x-text="slot.stone_name?.charAt(0) || '?'"></span>
                                    </template>
                                    {{-- Remove overlay on hover --}}
                                    <div class="absolute inset-0 bg-red-500 bg-opacity-0 group-hover:bg-opacity-50 rounded-full flex items-center justify-center transition-all">
                                        <span class="text-white text-xs opacity-0 group-hover:opacity-100">✕</span>
                                    </div>
                                </div>
                            </template>
                            {{-- Empty slot --}}
                            <template x-if="slot === null">
                                <div class="w-full aspect-square rounded-full border-2 border-dashed border-gray-300 flex items-center justify-center">
                                    <span class="text-gray-300 text-xs" x-text="index + 1"></span>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </div>

            {{-- Checkout button --}}
            <button
                @click="$store.designer.canCheckout() && (window.location.href = '{{ route('frontend.designer.index') }}')"
                :disabled="!$store.designer.canCheckout()"
                class="w-full py-3 px-6 bg-gray-800 text-white font-semibold rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-700 transition-colors">
                @t('frontend.designer.checkout')
            </button>
        </div>
    </div>

    {{-- Confirm modal for slot trim warning --}}
    <div x-show="$store.designer.showTrimModal" x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
        <div class="bg-white rounded-lg shadow-xl p-6 max-w-sm mx-4">
            <h3 class="text-lg font-semibold text-gray-800 mb-2">@t('frontend.designer.trim_warning_title')</h3>
            <p class="text-sm text-gray-600 mb-4"
               x-text="$store.designer.trimMessage"></p>
            <div class="flex gap-3 justify-end">
                <button @click="$store.designer.cancelTrim()"
                        class="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
                    @t('frontend.designer.cancel')
                </button>
                <button @click="$store.designer.confirmTrim()"
                        class="px-4 py-2 text-sm text-white bg-gray-800 rounded-lg hover:bg-gray-700">
                    @t('frontend.designer.confirm')
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/bracelet-svg-renderer.js') }}"></script>
<script>
    // Model and stone data for Alpine.js store consumption
    window.__DESIGNER_DATA__ = @json($designerData);
</script>
<script>
    document.addEventListener('alpine:init', () => {
        const data = window.__DESIGNER_DATA__;

        Alpine.store('designer', {
            // State
            model: data.model,
            size: null,
            stoneSize: null,
            slotCount: 0,
            slots: [],
            pricing: { stone_total: 0, base_price: data.model.base_price || 0, total: data.model.base_price || 0 },
            filters: { category: null, zodiacs: [], chakras: [], inStockOnly: false, search: '' },

            // Reference data
            availableStoneSizes: data.stoneSizes || [],
            allStones: data.stones || [],
            stoneCategories: data.stoneCategories || [],
            zodiacList: data.zodiacs || [],
            chakraList: data.chakras || [],

            // Predefined bracelet sizes (circumference in mm)
            braceletSizes: [
                { mm: 160, label: '16 cm' },
                { mm: 170, label: '17 cm' },
                { mm: 180, label: '18 cm' },
                { mm: 190, label: '19 cm' },
                { mm: 200, label: '20 cm' },
            ],

            // Trim modal state
            showTrimModal: false,
            trimMessage: '',
            _pendingNewCount: 0,

            // --- SlotCalculator (mirrors PHP logic) ---
            calculateSlots(model, sizeMm, stoneMm) {
                if (!model || !sizeMm || !stoneMm) return 0;
                if (model.structure_type === 'chip') {
                    return Math.max(1, model.reference_slot_count || 0);
                }
                let totalMm = sizeMm * (model.wrap_multiplier || 1);
                let usable = totalMm - (model.length_adjustment_mm || 0);
                if (model.has_center_piece) {
                    usable -= (model.center_mm || 0);
                }
                if (stoneMm <= 0) return 1;
                let raw = usable / stoneMm;
                let result;
                if (model.rounding_strategy === 'floor') result = Math.floor(raw);
                else if (model.rounding_strategy === 'ceil') result = Math.ceil(raw);
                else result = Math.round(raw);
                return Math.max(1, result);
            },

            // --- Methods ---
            setSize(sizeMm) {
                this.size = sizeMm;
                this._recalcSlots();
            },

            setStoneSize(stoneSize) {
                this.stoneSize = stoneSize;
                this._recalcSlots();
            },

            _recalcSlots() {
                if (!this.size || !this.stoneSize) return;
                let newCount = this.calculateSlots(this.model, this.size, this.stoneSize.mm_value);
                if (newCount !== this.slotCount) {
                    this.adjustSlots(newCount);
                }
            },

            adjustSlots(newCount) {
                let oldCount = this.slotCount;
                let filledCount = this.slots.filter(s => s !== null).length;

                // If shrinking and we'd lose filled slots, show confirm
                if (newCount < oldCount && filledCount > newCount) {
                    let lostCount = filledCount - newCount;
                    this.trimMessage = lostCount + ' taş slottan çıkarılacak. Devam etmek istiyor musunuz?';
                    this._pendingNewCount = newCount;
                    this.showTrimModal = true;
                    return;
                }

                this._applySlotChange(newCount);
            },

            confirmTrim() {
                this.showTrimModal = false;
                this._applySlotChange(this._pendingNewCount);
            },

            cancelTrim() {
                this.showTrimModal = false;
                this._pendingNewCount = 0;
            },

            _applySlotChange(newCount) {
                if (newCount > this.slotCount) {
                    // Extend: add null slots at the end
                    let toAdd = newCount - this.slots.length;
                    for (let i = 0; i < toAdd; i++) {
                        this.slots.push(null);
                    }
                } else if (newCount < this.slotCount) {
                    // Trim from the end
                    this.slots = this.slots.slice(0, newCount);
                }
                this.slotCount = newCount;
                this.recalcPrice();
            },

            addStone(stone, variant) {
                let emptyIndex = this.slots.indexOf(null);
                if (emptyIndex === -1) return;
                this.slots[emptyIndex] = {
                    variant_id: variant.id,
                    stone_id: stone.id,
                    stone_name: stone.name,
                    image_url: variant.image || stone.image || null,
                    price: variant.price,
                    stone_size_id: variant.stone_size_id,
                };
                this.recalcPrice();
            },

            removeStone(index) {
                if (index >= 0 && index < this.slots.length) {
                    this.slots[index] = null;
                    this.recalcPrice();
                }
            },

            hasEmptySlot() {
                return this.slots.indexOf(null) !== -1;
            },

            filledSlotCount() {
                return this.slots.filter(s => s !== null).length;
            },

            canCheckout() {
                return this.slotCount > 0
                    && this.slots.length === this.slotCount
                    && this.slots.every(s => s !== null);
            },

            recalcPrice() {
                let stoneTotal = 0;
                for (let slot of this.slots) {
                    if (slot !== null) {
                        stoneTotal += slot.price || 0;
                    }
                }
                this.pricing = {
                    stone_total: stoneTotal,
                    base_price: this.model.base_price || 0,
                    total: stoneTotal + (this.model.base_price || 0),
                };
            },

            // --- Filter helpers ---
            toggleZodiac(id) {
                let idx = this.filters.zodiacs.indexOf(id);
                if (idx === -1) {
                    this.filters.zodiacs.push(id);
                } else {
                    this.filters.zodiacs.splice(idx, 1);
                }
            },

            toggleChakra(id) {
                let idx = this.filters.chakras.indexOf(id);
                if (idx === -1) {
                    this.filters.chakras.push(id);
                } else {
                    this.filters.chakras.splice(idx, 1);
                }
            },

            clearFilters() {
                this.filters = { category: null, zodiacs: [], chakras: [], inStockOnly: false, search: '' };
            },

            hasActiveFilters() {
                return this.filters.category !== null
                    || this.filters.zodiacs.length > 0
                    || this.filters.chakras.length > 0
                    || this.filters.inStockOnly
                    || this.filters.search !== '';
            },

            // --- SVG Preview ---
            renderPreview() {
                var container = document.getElementById('svg-preview');
                if (!container) return;
                var type = this.model ? this.model.structure_type : 'single';
                window.BraceletSVGRenderer.render(container, type, this.slots);
            },

            // --- Filtered stones ---
            filteredStones() {
                if (!this.stoneSize) return [];
                let stoneSizeId = this.stoneSize.id;
                return this.allStones.filter(stone => {
                    // Must have a variant for the selected stone size
                    let hasVariant = stone.variants.some(v => v.stone_size_id === stoneSizeId);
                    if (!hasVariant) return false;

                    // Category filter
                    if (this.filters.category && stone.category_id !== this.filters.category) return false;

                    // Zodiac filter (multi-select: stone must match ANY selected zodiac)
                    if (this.filters.zodiacs.length > 0) {
                        if (!this.filters.zodiacs.some(z => (stone.zodiac_ids || []).includes(z))) return false;
                    }

                    // Chakra filter (multi-select: stone must match ANY selected chakra)
                    if (this.filters.chakras.length > 0) {
                        if (!this.filters.chakras.some(c => (stone.chakra_ids || []).includes(c))) return false;
                    }

                    // In-stock filter
                    if (this.filters.inStockOnly) {
                        let hasStock = stone.variants.some(v => v.stone_size_id === stoneSizeId && v.stock > 0);
                        if (!hasStock) return false;
                    }

                    // Search filter
                    if (this.filters.search) {
                        let search = this.filters.search.toLowerCase();
                        if (!stone.name.toLowerCase().includes(search)) return false;
                    }

                    return true;
                });
            },
        });

        // Wire SVG renderer: re-render on any slot change
        // Use Alpine.effect to reactively watch slots array
        Alpine.effect(() => {
            const store = Alpine.store('designer');
            // Access reactive properties to register as dependencies
            const slots = JSON.stringify(store.slots);
            const slotCount = store.slotCount;
            // Render on next tick to ensure DOM is ready
            queueMicrotask(() => store.renderPreview());
        });
    });
</script>
@endpush