@extends('layouts.admin')

@section('title', 'MakerWorld Modellen Importeren | Jouwdriedee.nl Beheer')

@section('content')
<div class="bg-slate-900 text-white py-8 border-b border-slate-800" x-data="makerWorldApp()">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Breadcrumb & Top Bar -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 pb-6 border-b border-slate-800">
            <div>
                <div class="flex items-center space-x-2 text-xs text-indigo-400 font-medium uppercase tracking-wider mb-1">
                    <span class="inline-block w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                    <span>Backend Beheer</span>
                    <span>&bull;</span>
                    <span>3D Model Synchronisatie</span>
                </div>
                <h1 class="text-2xl sm:text-3xl font-extrabold text-white flex items-center space-x-3">
                    <span class="p-2 bg-gradient-to-tr from-indigo-600 to-sky-500 rounded-xl text-white shadow-lg shadow-indigo-500/25">
                        <i data-lucide="layers" class="w-6 h-6"></i>
                    </span>
                    <span>MakerWorld Product Importer</span>
                </h1>
                <p class="mt-1 text-sm text-slate-400">
                    Haal eenvoudig 3D modellen binnen vanaf <a href="https://makerworld.com/nl/3d-models" target="_blank" class="text-indigo-400 hover:text-indigo-300 underline font-medium">makerworld.com</a> en publiceer ze direct in jouw webshop.
                </p>
            </div>

            <!-- Account Connection Status Card -->
            <div class="flex items-center space-x-3 bg-slate-800/80 backdrop-blur p-3 rounded-2xl border border-slate-700">
                @if($isAuthenticated)
                    <div class="w-10 h-10 rounded-xl bg-emerald-500/20 border border-emerald-500/40 flex items-center justify-center text-emerald-400">
                        <i data-lucide="check-circle" class="w-5 h-5"></i>
                    </div>
                    <div class="text-left pr-2">
                        <div class="text-xs text-slate-400">MakerWorld Status</div>
                        <div class="text-sm font-semibold text-emerald-300 flex items-center space-x-1.5">
                            <span>Verbonden</span>
                            @if(!empty($userProfile['name']) || !empty($userProfile['account']))
                                <span class="text-xs text-slate-300 font-normal">({{ $userProfile['name'] ?? $userProfile['account'] }})</span>
                            @endif
                        </div>
                    </div>
                    <form action="{{ route('admin.makerworld.disconnect') }}" method="POST">
                        @csrf
                        <button type="submit" class="px-3 py-1.5 text-xs font-medium text-rose-400 hover:text-rose-300 bg-rose-500/10 hover:bg-rose-500/20 rounded-lg border border-rose-500/30 transition-colors">
                            Ontkoppelen
                        </button>
                    </form>
                @else
                    <div class="w-10 h-10 rounded-xl bg-amber-500/20 border border-amber-500/40 flex items-center justify-center text-amber-400">
                        <i data-lucide="shield-alert" class="w-5 h-5"></i>
                    </div>
                    <div class="text-left pr-2">
                        <div class="text-xs text-slate-400">MakerWorld Status</div>
                        <div class="text-sm font-semibold text-amber-300">Niet ingelogd</div>
                    </div>
                    <button type="button" @click="showLoginModal = true" class="px-3.5 py-1.5 text-xs font-semibold text-white bg-indigo-600 hover:bg-indigo-500 rounded-lg shadow-sm transition-colors flex items-center space-x-1">
                        <i data-lucide="log-in" class="w-3.5 h-3.5"></i>
                        <span>Inloggen</span>
                    </button>
                @endif
            </div>
        </div>

        <!-- Notification Alerts -->
        @if(session('success'))
            <div class="mt-4 p-4 rounded-xl bg-emerald-950/60 border border-emerald-500/40 text-emerald-200 text-sm flex items-center space-x-3">
                <i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-400 shrink-0"></i>
                <div class="font-medium">{{ session('success') }}</div>
            </div>
        @endif

        @if(session('warning'))
            <div class="mt-4 p-4 rounded-xl bg-amber-950/60 border border-amber-500/40 text-amber-200 text-sm flex items-center space-x-3">
                <i data-lucide="alert-triangle" class="w-5 h-5 text-amber-400 shrink-0"></i>
                <div class="font-medium">{{ session('warning') }}</div>
            </div>
        @endif

        @if(session('error'))
            <div class="mt-4 p-4 rounded-xl bg-rose-950/60 border border-rose-500/40 text-rose-200 text-sm flex items-center space-x-3">
                <i data-lucide="x-circle" class="w-5 h-5 text-rose-400 shrink-0"></i>
                <div class="font-medium">{{ session('error') }}</div>
            </div>
        @endif

        <!-- Quick Import Search & Paste URL Bar -->
        <div class="mt-8 bg-gradient-to-r from-slate-800 to-indigo-950/60 p-6 rounded-3xl border border-indigo-900/50 shadow-xl">
            <div class="max-w-3xl">
                <h2 class="text-lg font-bold text-white flex items-center space-x-2">
                    <i data-lucide="zap" class="w-5 h-5 text-amber-400"></i>
                    <span>Snel importeren via URL of Model-ID</span>
                </h2>
                <p class="text-xs text-slate-300 mt-1">
                    Kopieer een link van een willekeurig model op MakerWorld (bijv. <code>https://makerworld.com/nl/models/55866</code>) of vul het ID in.
                </p>

                <form @submit.prevent="fetchQuickPreview()" class="mt-4 flex flex-col sm:flex-row gap-3">
                    <div class="relative flex-1">
                        <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                            <i data-lucide="link" class="w-4 h-4"></i>
                        </div>
                        <input 
                            type="text" 
                            x-model="quickInput" 
                            placeholder="https://makerworld.com/nl/models/55866 of 55866..."
                            class="w-full pl-10 pr-4 py-3 bg-slate-900/90 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm font-mono"
                            required
                        >
                    </div>
                    <button 
                        type="submit" 
                        :disabled="isLoadingQuick" 
                        class="px-6 py-3 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-semibold rounded-xl text-sm flex items-center justify-center space-x-2 shadow-md transition-all shrink-0"
                    >
                        <template x-if="isLoadingQuick">
                            <div class="flex items-center space-x-2">
                                <svg class="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                                </svg>
                                <span>Ophalen...</span>
                            </div>
                        </template>
                        <template x-if="!isLoadingQuick">
                            <div class="flex items-center space-x-2">
                                <i data-lucide="download-cloud" class="w-4 h-4"></i>
                                <span>Model Bekijken & Importeren</span>
                            </div>
                        </template>
                    </button>
                </form>
            </div>
        </div>

        <!-- Navigation Tabs -->
        <div class="mt-8 border-b border-slate-800 flex items-center justify-between overflow-x-auto">
            <nav class="flex space-x-3 sm:space-x-4">
                @if($isAuthenticated)
                    <a href="{{ route('admin.makerworld.index', ['tab' => 'favorites']) }}" 
                       class="pb-4 px-3 text-sm font-medium border-b-2 transition-colors flex items-center space-x-2 {{ $currentTab === 'favorites' ? 'border-indigo-500 text-indigo-400 font-bold' : 'border-transparent text-slate-400 hover:text-slate-200 hover:border-slate-700' }}">
                        <i data-lucide="heart" class="w-4 h-4 text-rose-400"></i>
                        <span>Mijn MakerWorld Favorieten</span>
                    </a>
                    <a href="{{ route('admin.makerworld.index', ['tab' => 'published']) }}" 
                       class="pb-4 px-3 text-sm font-medium border-b-2 transition-colors flex items-center space-x-2 {{ $currentTab === 'published' ? 'border-indigo-500 text-indigo-400 font-bold' : 'border-transparent text-slate-400 hover:text-slate-200 hover:border-slate-700' }}">
                        <i data-lucide="folder" class="w-4 h-4 text-amber-400"></i>
                        <span>Mijn Gepubliceerde Modellen</span>
                    </a>
                @endif

                <a href="{{ route('admin.makerworld.index', ['tab' => 'community']) }}" 
                   class="pb-4 px-3 text-sm font-medium border-b-2 transition-colors flex items-center space-x-2 {{ $currentTab === 'community' ? 'border-indigo-500 text-indigo-400 font-bold' : 'border-transparent text-slate-400 hover:text-slate-200 hover:border-slate-700' }}">
                    <i data-lucide="sparkles" class="w-4 h-4 text-sky-400"></i>
                    <span>Trending & Community Modellen</span>
                </a>

                <a href="{{ route('admin.makerworld.index', ['tab' => 'imported']) }}" 
                   class="pb-4 px-3 text-sm font-medium border-b-2 transition-colors flex items-center space-x-2 {{ $currentTab === 'imported' ? 'border-indigo-500 text-indigo-400 font-bold' : 'border-transparent text-slate-400 hover:text-slate-200 hover:border-slate-700' }}">
                    <i data-lucide="shopping-bag" class="w-4 h-4 text-emerald-400"></i>
                    <span>In Webshop Geïmporteerd ({{ count($importedIds) }})</span>
                </a>
            </nav>

            <a href="https://makerworld.com/nl/3d-models" target="_blank" class="hidden sm:flex items-center space-x-1.5 text-xs text-slate-400 hover:text-indigo-400 pb-3">
                <span>Open MakerWorld</span>
                <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
            </a>
        </div>

        <!-- TAB CONTENT: Models Grid (Favorites / Published / Community) -->
        @if($currentTab !== 'imported')
            <div class="mt-8">
                
                @if(empty($models))
                    <div class="text-center py-16 bg-slate-800/40 rounded-3xl border border-slate-800">
                        <div class="w-16 h-16 rounded-2xl bg-slate-800 flex items-center justify-center text-slate-400 mx-auto mb-4">
                            <i data-lucide="box" class="w-8 h-8"></i>
                        </div>
                        <h3 class="text-lg font-bold text-white">Geen modellen gevonden in dit overzicht</h3>
                        <p class="text-sm text-slate-400 max-w-md mx-auto mt-1">
                            @if(!$isAuthenticated && in_array($currentTab, ['favorites', 'published']))
                                Log eerst in met je MakerWorld account om je opgeslagen favorieten of ontwerpen te bekijken.
                            @else
                                Probeer de trending modellen te bekijken of plak direct een URL in het zoekveld hierboven.
                            @endif
                        </p>
                        @if(!$isAuthenticated)
                            <button type="button" @click="showLoginModal = true" class="mt-5 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-semibold transition-colors">
                                Inloggen bij MakerWorld
                            </button>
                        @endif
                    </div>
                @else
                    <!-- Batch selection controls header -->
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
                        <div class="text-sm text-slate-400">
                            <span>Toont <strong class="text-white">{{ count($models) }}</strong> modellen van MakerWorld. Vink modellen aan om ze in één klik te importeren.</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <button type="button" @click="toggleSelectAll()" class="text-xs text-indigo-400 hover:text-indigo-300 font-medium">
                                <span x-text="selectedIds.length === totalModels ? 'Deselecteer alles' : 'Selecteer alles op deze pagina'"></span>
                            </button>
                        </div>
                    </div>

                    <!-- Products Grid -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                        @foreach($models as $model)
                            @if(!is_array($model)) @continue @endif
                            @php
                                $mId = $model['id'] ?? 0;
                                $isAlreadyImported = in_array($mId, $importedIds);
                                $cover = $model['cover'] ?? $model['coverUrl'] ?? 'https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=600&q=80';
                                $title = $model['title'] ?? 'MakerWorld Model #' . $mId;
                                $author = $model['designCreator']['name'] ?? $model['designCreator']['handle'] ?? 'MakerWorld Maker';
                            @endphp
                            <div class="bg-slate-800/80 rounded-2xl border transition-all duration-200 overflow-hidden flex flex-col group {{ $isAlreadyImported ? 'border-emerald-500/40 shadow-sm' : 'border-slate-700/80 hover:border-indigo-500/50 hover:shadow-lg' }}">
                                
                                <!-- Card Image -->
                                <div class="relative aspect-4/3 overflow-hidden bg-slate-900">
                                    <img src="{{ $cover }}" alt="{{ $title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
                                    
                                    <!-- Selection Checkbox -->
                                    <div class="absolute top-3 left-3 z-10">
                                        <label class="flex items-center justify-center w-7 h-7 rounded-lg bg-slate-900/80 backdrop-blur border border-white/20 cursor-pointer shadow-md hover:scale-105 transition-transform">
                                            <input type="checkbox" value="{{ $mId }}" x-model="selectedIds" class="w-4 h-4 text-indigo-600 rounded focus:ring-0">
                                        </label>
                                    </div>

                                    <!-- Status Badges -->
                                    <div class="absolute top-3 right-3 flex flex-col gap-1.5 items-end">
                                        @if($isAlreadyImported)
                                            <span class="px-2 py-0.5 text-[11px] font-bold rounded-md bg-emerald-500 text-white shadow-md flex items-center space-x-1">
                                                <i data-lucide="check" class="w-3 h-3 stroke-[3]"></i>
                                                <span>In Webshop</span>
                                            </span>
                                        @endif
                                        @if(!empty($model['printCount']))
                                            <span class="px-2 py-0.5 text-[10px] font-medium rounded-md bg-slate-900/80 backdrop-blur text-slate-300 border border-white/10 flex items-center space-x-1">
                                                <i data-lucide="printer" class="w-3 h-3 text-sky-400"></i>
                                                <span>{{ number_format($model['printCount']) }} prints</span>
                                            </span>
                                        @endif
                                    </div>

                                    <a href="https://makerworld.com/nl/models/{{ $mId }}" target="_blank" class="absolute bottom-2 right-2 p-1.5 rounded-lg bg-slate-900/80 backdrop-blur text-slate-300 hover:text-white border border-white/10 transition-colors" title="Bekijk op MakerWorld">
                                        <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
                                    </a>
                                </div>

                                <!-- Card Body -->
                                <div class="p-4 flex flex-col flex-1">
                                    <div class="text-[11px] text-slate-400 mb-1 flex items-center justify-between">
                                        <span class="truncate">Door {{ $author }}</span>
                                        <span class="font-mono text-slate-500">#{{ $mId }}</span>
                                    </div>
                                    <h3 class="text-sm font-semibold text-white line-clamp-2 leading-snug mb-3 flex-1" title="{{ $title }}">
                                        {{ $title }}
                                    </h3>

                                    <!-- Action Button -->
                                    <div class="pt-3 border-t border-slate-700/60 flex items-center justify-between gap-2">
                                        <button 
                                            type="button" 
                                            @click="openImportModal({{ $mId }})" 
                                            class="w-full py-2 px-3 rounded-xl text-xs font-semibold flex items-center justify-center space-x-1.5 transition-colors {{ $isAlreadyImported ? 'bg-slate-700 hover:bg-slate-600 text-slate-200' : 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-md shadow-indigo-600/20' }}"
                                        >
                                            <i data-lucide="{{ $isAlreadyImported ? 'refresh-cw' : 'plus-circle' }}" class="w-3.5 h-3.5"></i>
                                            <span>{{ $isAlreadyImported ? 'Bewerken / Updaten' : 'Selecteer & Importeer' }}</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

        <!-- TAB CONTENT: Already Imported Products in Database -->
        @else
            <div class="mt-8">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h2 class="text-lg font-bold text-white">Geïmporteerde MakerWorld Producten in jouw Shop</h2>
                        <p class="text-xs text-slate-400">Deze producten zijn actief of opgeslagen in jouw webshop database.</p>
                    </div>
                    <a href="{{ route('catalog') }}" target="_blank" class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white text-xs font-semibold rounded-xl border border-slate-700 flex items-center space-x-1.5 transition-colors">
                        <span>Bekijk publieke catalogus</span>
                        <i data-lucide="arrow-up-right" class="w-3.5 h-3.5"></i>
                    </a>
                </div>

                @if($importedProducts->isEmpty())
                    <div class="text-center py-16 bg-slate-800/40 rounded-3xl border border-slate-800">
                        <div class="w-16 h-16 rounded-2xl bg-slate-800 flex items-center justify-center text-slate-400 mx-auto mb-4">
                            <i data-lucide="package-open" class="w-8 h-8"></i>
                        </div>
                        <h3 class="text-lg font-bold text-white">Nog geen MakerWorld modellen geïmporteerd</h3>
                        <p class="text-sm text-slate-400 max-w-md mx-auto mt-1">
                            Selecteer hierboven modellen via de tabs of plak direct een MakerWorld link om je eerste product toe te voegen.
                        </p>
                    </div>
                @else
                    <div class="bg-slate-800/80 rounded-2xl border border-slate-700 overflow-hidden shadow-xl">
                        <div class="overflow-x-auto">
                            <table class="w-full text-left text-sm text-slate-300">
                                <thead class="bg-slate-900/60 text-xs text-slate-400 uppercase font-semibold border-b border-slate-700">
                                    <tr>
                                        <th class="py-3 px-4">Product</th>
                                        <th class="py-3 px-4">MakerWorld Ref</th>
                                        <th class="py-3 px-4">Categorie</th>
                                        <th class="py-3 px-4">Verkoopprijs</th>
                                        <th class="py-3 px-4">Print Specs</th>
                                        <th class="py-3 px-4">Status</th>
                                        <th class="py-3 px-4 text-right">Acties</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-700/60">
                                    @foreach($importedProducts as $product)
                                        <tr class="hover:bg-slate-750 transition-colors">
                                            <td class="py-3 px-4 flex items-center space-x-3">
                                                <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-12 h-12 rounded-lg object-cover bg-slate-900 shrink-0">
                                                <div class="min-w-0">
                                                    <a href="{{ route('product.show', $product->slug) }}" target="_blank" class="font-semibold text-white hover:text-indigo-400 line-clamp-1">
                                                        {{ $product->name }}
                                                    </a>
                                                    <span class="text-xs text-slate-400">SKU: {{ $product->sku ?? 'MW-' . $product->makerworld_id }}</span>
                                                </div>
                                            </td>
                                            <td class="py-3 px-4">
                                                <a href="{{ $product->makerworld_url ?? 'https://makerworld.com/nl/models/' . $product->makerworld_id }}" target="_blank" class="text-xs text-indigo-400 hover:text-indigo-300 flex items-center space-x-1 font-mono">
                                                    <span>#{{ $product->makerworld_id }}</span>
                                                    <i data-lucide="external-link" class="w-3 h-3"></i>
                                                </a>
                                                <div class="text-[11px] text-slate-400">{{ $product->makerworld_author ?? 'MakerWorld' }}</div>
                                            </td>
                                            <td class="py-3 px-4">
                                                <span class="px-2.5 py-1 rounded-md text-xs font-medium bg-slate-700 text-slate-300">
                                                    {{ $product->category->name ?? 'Ongecategoriseerd' }}
                                                </span>
                                            </td>
                                            <td class="py-3 px-4 font-mono font-bold text-emerald-400">
                                                {{ $product->formatted_price }}
                                            </td>
                                            <td class="py-3 px-4 text-xs text-slate-400">
                                                @if($product->print_time_hours)
                                                    <div>⏱️ {{ $product->print_time_hours }} uur printtijd</div>
                                                @endif
                                                @if($product->weight_grams)
                                                    <div>⚖️ {{ $product->weight_grams }} gram filament</div>
                                                @endif
                                            </td>
                                            <td class="py-3 px-4">
                                                @if($product->is_active)
                                                    <span class="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">
                                                        Actief in shop
                                                    </span>
                                                @else
                                                    <span class="px-2 py-0.5 rounded-full text-[11px] font-semibold bg-slate-700 text-slate-400">
                                                        Concept / Verborgen
                                                    </span>
                                                @endif
                                            </td>
                                            <td class="py-3 px-4 text-right space-x-2">
                                                <a href="{{ route('product.show', $product->slug) }}" target="_blank" class="p-1.5 text-slate-400 hover:text-white inline-block" title="Bekijk in webshop">
                                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                                </a>
                                                <button type="button" @click="openImportModal({{ (int) ($product->makerworld_id ?? 0) }})" class="p-1.5 text-indigo-400 hover:text-indigo-300 inline-block" title="Bewerken / Opnieuw synchroniseren">
                                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @if($importedProducts->hasPages())
                            <div class="p-4 border-t border-slate-700">
                                {{ $importedProducts->links() }}
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        @endif

    </div>

    <!-- FLOATING BATCH IMPORT BAR (When items are checked) -->
    <div 
        x-show="selectedIds.length > 0" 
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-8"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-8"
        class="fixed bottom-6 inset-x-0 z-40 max-w-4xl mx-auto px-4 pointer-events-none"
    >
        <div class="bg-indigo-950/95 backdrop-blur-md border border-indigo-500/50 shadow-2xl rounded-2xl p-4 text-white flex flex-col sm:flex-row items-center justify-between gap-4 pointer-events-auto">
            <div class="flex items-center space-x-3">
                <div class="w-9 h-9 rounded-xl bg-indigo-500/20 border border-indigo-400/40 flex items-center justify-center font-bold text-indigo-300">
                    <span x-text="selectedIds.length"></span>
                </div>
                <div>
                    <div class="text-sm font-bold text-white"><span x-text="selectedIds.length"></span> modellen geselecteerd</div>
                    <div class="text-xs text-indigo-300">Klaar om direct te publiceren in je webshop</div>
                </div>
            </div>

            <form action="{{ route('admin.makerworld.batch-import') }}" method="POST" class="flex items-center space-x-3 w-full sm:w-auto">
                @csrf
                <template x-for="id in selectedIds" :key="id">
                    <input type="hidden" name="ids[]" :value="id">
                </template>

                <select name="category_id" class="bg-slate-900 border border-indigo-700 rounded-xl px-3 py-2 text-xs text-white focus:ring-2 focus:ring-indigo-400">
                    <option value="">Kies standaard categorie...</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>

                <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 font-bold text-xs text-white rounded-xl shadow-lg transition-transform hover:scale-105 shrink-0 flex items-center space-x-1.5">
                    <i data-lucide="download" class="w-4 h-4"></i>
                    <span>Alles Nu Importeren</span>
                </button>

                <button type="button" @click="selectedIds = []" class="p-2 text-indigo-300 hover:text-white" title="Annuleren">
                    <i data-lucide="x" class="w-4 h-4"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- MODAL: LOGIN / AUTHENTICATIE MET MAKERWORLD -->
    <div 
        x-show="showLoginModal" 
        x-cloak 
        class="fixed inset-0 z-50 overflow-y-auto bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4"
    >
        <div 
            @click.away="showLoginModal = false" 
            class="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-6 sm:p-8 shadow-2xl relative text-slate-100"
        >
            <button @click="showLoginModal = false" class="absolute top-5 right-5 text-slate-400 hover:text-white">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>

            <div class="flex items-center space-x-3 mb-4">
                <div class="w-12 h-12 rounded-2xl bg-indigo-600/20 border border-indigo-500/30 flex items-center justify-center text-indigo-400">
                    <i data-lucide="key-round" class="w-6 h-6"></i>
                </div>
                <div>
                    <h3 class="text-xl font-extrabold text-white">Inloggen bij MakerWorld</h3>
                    <p class="text-xs text-slate-400">Koppel jouw MakerWorld / Bambu Lab account</p>
                </div>
            </div>

            <!-- Login Method Tabs -->
            <div class="flex space-x-2 border-b border-slate-800 pb-3 mb-6">
                <button 
                    type="button" 
                    @click="loginTab = 'credentials'" 
                    :class="loginTab === 'credentials' ? 'text-indigo-400 border-b-2 border-indigo-500 font-bold' : 'text-slate-400 hover:text-white'"
                    class="pb-2 text-xs font-semibold px-2 transition-colors"
                >
                    Account (E-mail & Wachtwoord)
                </button>
                <button 
                    type="button" 
                    @click="loginTab = 'token'" 
                    :class="loginTab === 'token' ? 'text-indigo-400 border-b-2 border-indigo-500 font-bold' : 'text-slate-400 hover:text-white'"
                    class="pb-2 text-xs font-semibold px-2 transition-colors"
                >
                    Direct Token / Sessie Plakken
                </button>
            </div>

            <!-- METHOD 1: Credentials / 2FA -->
            <div x-show="loginTab === 'credentials'">
                @if(session('makerworld_2fa_account'))
                    <!-- 2FA Verification Code Form -->
                    <form action="{{ route('admin.makerworld.verify-code') }}" method="POST" class="space-y-4">
                        @csrf
                        <input type="hidden" name="account" value="{{ session('makerworld_2fa_account') }}">
                        <div class="p-4 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-200 text-xs">
                            Voer de 6-cijferige verificatiecode in die Bambu Lab zojuist naar <strong>{{ session('makerworld_2fa_account') }}</strong> heeft gemaild.
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-300 mb-1.5">6-cijferige Beveiligingscode</label>
                            <input type="text" name="code" maxlength="6" placeholder="123456" class="w-full text-center tracking-widest font-mono text-xl py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:ring-2 focus:ring-indigo-500" required autofocus>
                        </div>
                        <button type="submit" class="w-full py-3 bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-xl text-sm shadow-lg transition-colors">
                            Verifiëren & Verbinden
                        </button>
                    </form>
                @else
                    <!-- Account & Password Form -->
                    <form action="{{ route('admin.makerworld.login') }}" method="POST" class="space-y-4">
                        @csrf
                        <div>
                            <label class="block text-xs font-semibold text-slate-300 mb-1.5">MakerWorld / Bambu Lab E-mailadres</label>
                            <input type="email" name="account" placeholder="jouw@email.nl" class="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 text-sm focus:ring-2 focus:ring-indigo-500" required>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Wachtwoord</label>
                            <input type="password" name="password" placeholder="••••••••" class="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 text-sm focus:ring-2 focus:ring-indigo-500" required>
                        </div>
                        <p class="text-[11px] text-slate-400 leading-relaxed">
                            💡 Heeft je Bambu Lab account 2-stapsverificatie? Dan ontvang je automatisch een code per e-mail die je in de volgende stap invult.
                        </p>
                        <button type="submit" class="w-full py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-xl text-sm shadow-lg shadow-indigo-600/30 transition-colors">
                            Inloggen bij MakerWorld
                        </button>
                    </form>
                @endif
            </div>

            <!-- METHOD 2: Direct Token / Cookie -->
            <div x-show="loginTab === 'token'">
                <form action="{{ route('admin.makerworld.token') }}" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label class="block text-xs font-semibold text-slate-300 mb-1.5">Bambu Cloud / MakerWorld Access Token</label>
                        <textarea name="token" rows="4" placeholder="Plak hier je Bearer accessToken (bijv. vanuit F12 browser inspect of Bambu Studio)..." class="w-full p-3 font-mono text-xs bg-slate-800 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:ring-2 focus:ring-indigo-500" required></textarea>
                    </div>
                    <div class="text-[11px] text-slate-400 bg-slate-800/60 p-3 rounded-xl border border-slate-800">
                        <strong>Hoe vind je dit token?</strong><br>
                        Als je al bent ingelogd op <a href="https://makerworld.com" target="_blank" class="text-indigo-400 underline">makerworld.com</a> in je browser, druk op <code>F12</code> &rarr; tabblad <em>Toepassing/Application</em> &rarr; <em>Cookies</em> &rarr; kopieer de waarde van het <code>token</code> cookie.
                    </div>
                    <button type="submit" class="w-full py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-xl text-sm shadow-lg shadow-indigo-600/30 transition-colors">
                        Token Opslaan & Verbinden
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- MODAL: MODEL BEKIJKEN & IMPORTEREN -->
    <div 
        x-show="showImportModal" 
        x-cloak 
        class="fixed inset-0 z-50 overflow-y-auto bg-slate-950/85 backdrop-blur-sm flex items-center justify-center p-4"
    >
        <div 
            @click.away="showImportModal = false" 
            class="bg-slate-900 border border-slate-800 rounded-3xl max-w-2xl w-full p-6 sm:p-8 shadow-2xl relative text-slate-100 max-h-[90vh] overflow-y-auto"
        >
            <button @click="showImportModal = false" class="absolute top-5 right-5 text-slate-400 hover:text-white">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>

            <!-- Loading State -->
            <div x-show="isLoadingModal" class="py-16 text-center">
                <svg class="animate-spin h-8 w-8 text-indigo-500 mx-auto mb-3" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
                </svg>
                <div class="text-sm text-slate-300 font-semibold">Model gegevens ophalen van MakerWorld...</div>
            </div>

            <!-- Model Details Form -->
            <div x-show="!isLoadingModal && activeModel">
                <form action="{{ route('admin.makerworld.import') }}" method="POST">
                    @csrf
                    <input type="hidden" name="makerworld_id" :value="activeModel?.makerworld_id">

                    <!-- Header with Image & Title -->
                    <div class="flex flex-col sm:flex-row gap-5 pb-6 border-b border-slate-800">
                        <img :src="activeModel?.image_url" class="w-full sm:w-36 h-36 rounded-2xl object-cover bg-slate-950 shadow-md shrink-0">
                        <div class="flex-1">
                            <div class="flex items-center space-x-2 text-xs text-indigo-400 font-semibold mb-1">
                                <span x-text="'MakerWorld #' + activeModel?.makerworld_id"></span>
                                <span>&bull;</span>
                                <span x-text="'Door ' + activeModel?.makerworld_author"></span>
                            </div>
                            <h3 class="text-lg font-bold text-white leading-tight" x-text="activeModel?.name"></h3>
                            <p class="text-xs text-slate-400 line-clamp-3 mt-2" x-text="activeModel?.short_description"></p>
                            
                            <!-- Specifications Pill -->
                            <div class="flex flex-wrap gap-2 mt-3 text-[11px] text-slate-300">
                                <span class="px-2.5 py-1 rounded-lg bg-slate-800 border border-slate-700 flex items-center space-x-1">
                                    <i data-lucide="clock" class="w-3 h-3 text-sky-400"></i>
                                    <span x-text="activeModel?.print_time_hours ? activeModel?.print_time_hours + ' uur' : 'Onbekend'"></span>
                                </span>
                                <span class="px-2.5 py-1 rounded-lg bg-slate-800 border border-slate-700 flex items-center space-x-1">
                                    <i data-lucide="scale" class="w-3 h-3 text-amber-400"></i>
                                    <span x-text="activeModel?.weight_grams ? activeModel?.weight_grams + ' gram' : 'Onbekend'"></span>
                                </span>
                                <span class="px-2.5 py-1 rounded-lg bg-slate-800 border border-slate-700 flex items-center space-x-1">
                                    <i data-lucide="shield" class="w-3 h-3 text-emerald-400"></i>
                                    <span x-text="activeModel?.makerworld_license ?? 'Standaard Licentie'"></span>
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Custom Form Fields -->
                    <div class="space-y-4 pt-6">
                        <div>
                            <label class="block text-xs font-semibold text-slate-300 mb-1">Producttitel in jouw Webshop</label>
                            <input type="text" name="custom_name" x-model="activeModel.name" class="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-white text-sm focus:ring-2 focus:ring-indigo-500">
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-semibold text-slate-300 mb-1">Koppel aan Categorie</label>
                                <select name="category_id" class="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-white text-sm focus:ring-2 focus:ring-indigo-500">
                                    <option value="">Geen categorie (standaard)</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <label class="block text-xs font-semibold text-slate-300 mb-1">
                                    <span>Verkoopprijs (€)</span>
                                    <span class="text-slate-400 font-normal ml-1">(incl. marge & printkosten)</span>
                                </label>
                                <input type="number" step="0.01" min="1" name="custom_price" x-model="activeModel.base_price" class="w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-xl text-white text-sm font-mono focus:ring-2 focus:ring-indigo-500" required>
                            </div>
                        </div>

                        <!-- Active Switch -->
                        <div class="flex items-center justify-between p-4 bg-slate-800/60 rounded-2xl border border-slate-700">
                            <div>
                                <div class="text-sm font-semibold text-white">Direct actief in de webshop</div>
                                <div class="text-xs text-slate-400">Bezoekers kunnen dit product direct bekijken en bestellen</div>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="is_active" value="1" checked class="sr-only peer">
                                <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-500"></div>
                            </label>
                        </div>
                    </div>

                    <!-- Footer Action -->
                    <div class="mt-8 flex items-center justify-end space-x-3 pt-6 border-t border-slate-800">
                        <button type="button" @click="showImportModal = false" class="px-5 py-2.5 rounded-xl text-xs font-semibold text-slate-400 hover:text-white transition-colors">
                            Annuleren
                        </button>
                        <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-indigo-600 to-sky-500 hover:from-indigo-500 hover:to-sky-400 text-white font-bold text-sm rounded-xl shadow-lg shadow-indigo-500/25 transition-transform hover:scale-105 flex items-center space-x-2">
                            <i data-lucide="check" class="w-4 h-4"></i>
                            <span>Toevoegen aan Webshop</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

<script>
function makerWorldApp() {
    return {
        showLoginModal: {{ session('makerworld_2fa_account') ? 'true' : 'false' }},
        loginTab: 'credentials',
        showImportModal: false,
        isLoadingModal: false,
        isLoadingQuick: false,
        quickInput: '',
        activeModel: null,
        selectedIds: [],
        totalModels: {{ count($models) }},

        toggleSelectAll() {
            if (this.selectedIds.length === this.totalModels) {
                this.selectedIds = [];
            } else {
                this.selectedIds = @json(array_column($models, 'id'));
            }
        },

        async openImportModal(id) {
            this.showImportModal = true;
            this.isLoadingModal = true;
            this.activeModel = null;

            try {
                const response = await fetch(`{{ route('admin.makerworld.preview') }}?query=${id}`);
                const data = await response.json();

                if (response.ok && data.model) {
                    this.activeModel = data.model;
                } else {
                    alert(data.error || 'Kon model niet ophalen');
                    this.showImportModal = false;
                }
            } catch (err) {
                alert('Fout bij ophalen van model: ' + err.message);
                this.showImportModal = false;
            } finally {
                this.isLoadingModal = false;
                this.$nextTick(() => {
                    if (window.lucide) {
                        window.lucide.createIcons();
                    }
                });
            }
        },

        async fetchQuickPreview() {
            if (!this.quickInput.trim()) return;

            this.isLoadingQuick = true;
            try {
                const response = await fetch(`{{ route('admin.makerworld.preview') }}?query=${encodeURIComponent(this.quickInput)}`);
                const data = await response.json();

                if (response.ok && data.model) {
                    this.activeModel = data.model;
                    this.showImportModal = true;
                } else {
                    alert(data.error || 'Kon model niet vinden op MakerWorld.');
                }
            } catch (err) {
                alert('Fout bij ophalen van model: ' + err.message);
            } finally {
                this.isLoadingQuick = false;
                this.$nextTick(() => {
                    if (window.lucide) {
                        window.lucide.createIcons();
                    }
                });
            }
        }
    }
}
</script>
@endsection