@extends('layouts.admin')

@section('title', 'MakerWorld Collecties & Auto-Sync | Jouwdriedee.nl Beheer')

@section('content')
<div class="py-8 bg-slate-950 text-slate-100 min-h-screen" x-data="makerWorldSyncApp()">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
        
        <!-- Header & Status 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-amber-400 font-bold uppercase tracking-wider mb-1">
                    <span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse"></span>
                    <span>MakerWorld Integratie</span>
                    <span>&bull;</span>
                    <span>Collecties & 10-Minuten Auto-Sync</span>
                </div>
                <h1 class="text-2xl sm:text-3xl font-black text-white flex items-center space-x-3">
                    <span class="p-2 bg-gradient-to-tr from-amber-400 to-orange-500 rounded-2xl text-slate-950 shadow-lg shadow-amber-400/20">
                        <i data-lucide="refresh-cw" class="w-6 h-6"></i>
                    </span>
                    <span>MakerWorld Product Importer & Collecties Sync</span>
                </h1>
                <p class="mt-1 text-sm text-slate-400">
                    Koppel je MakerWorld collecties (zoals <code class="text-amber-400 font-mono">@user_1718037659</code>). Het systeem controleert elke 10 minuten automatisch op nieuwe modellen!
                </p>
            </div>

            <!-- Quick Stats & Staging Link -->
            <div class="flex items-center space-x-3">
                <a href="{{ route('admin.makerworld.staging') }}" class="px-4 py-2.5 bg-gradient-to-r from-amber-400 to-amber-500 hover:from-amber-500 hover:to-amber-600 text-slate-950 font-black text-xs rounded-xl shadow-md transition flex items-center space-x-2">
                    <i data-lucide="layers" class="w-4 h-4"></i>
                    <span>Artikel Beheer</span>
                    @if($stagedCount > 0)
                        <span class="px-2 py-0.5 rounded-full bg-slate-950 text-amber-300 text-[11px] font-black">
                            {{ $stagedCount }} concepten
                        </span>
                    @endif
                </a>
            </div>
        </div>

        <!-- Notification Alerts -->
        @if(session('success'))
            <div class="p-4 rounded-2xl 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-bold">{{ session('success') }}</div>
            </div>
        @endif

        @if(session('warning'))
            <div class="p-4 rounded-2xl 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-bold">{{ session('warning') }}</div>
            </div>
        @endif

        @if(session('error'))
            <div class="p-4 rounded-2xl 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-bold">{{ session('error') }}</div>
            </div>
        @endif

        <!-- Tab Bar -->
        <div class="flex items-center space-x-2 border-b border-slate-800 pb-2 overflow-x-auto text-sm font-bold">
            <a href="{{ route('admin.makerworld.index', ['tab' => 'collections']) }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 {{ $currentTab === 'collections' ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-400 hover:text-white hover:bg-slate-900' }}">
                <i data-lucide="folder-sync" class="w-4 h-4"></i>
                <span>Gekoppelde Collecties</span>
                <span class="px-2 py-0.5 rounded-md text-xs {{ $currentTab === 'collections' ? 'bg-slate-950 text-amber-400' : 'bg-slate-800 text-slate-400' }}">
                    {{ $trackedCollections->count() }}
                </span>
            </a>

            <a href="{{ route('admin.makerworld.staging') }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 text-slate-400 hover:text-white hover:bg-slate-900">
                <i data-lucide="layers" class="w-4 h-4"></i>
                <span>Artikel Beheer (Staging)</span>
                @if($stagedCount > 0)
                    <span class="px-2 py-0.5 rounded-md text-xs bg-amber-400 text-slate-950 font-black">
                        {{ $stagedCount }} nieuw
                    </span>
                @endif
            </a>

            <a href="{{ route('admin.makerworld.index', ['tab' => 'quick']) }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 {{ $currentTab === 'quick' ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-400 hover:text-white hover:bg-slate-900' }}">
                <i data-lucide="zap" class="w-4 h-4"></i>
                <span>Los Model Importeren</span>
            </a>

            <a href="{{ route('admin.makerworld.index', ['tab' => 'auth']) }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 {{ $currentTab === 'auth' ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-400 hover:text-white hover:bg-slate-900' }}">
                <i data-lucide="key" class="w-4 h-4"></i>
                <span>MakerWorld Login & Token</span>
                @if($isAuthenticated)
                    <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
                @endif
            </a>
        </div>

        <!-- TAB 1: COLLECTIONS & AUTO-SYNC -->
        @if($currentTab === 'collections')
            <div class="space-y-8">
                
                <!-- Add Collection Form -->
                <div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl">
                    <div class="max-w-3xl">
                        <div class="flex items-center space-x-2 text-xs font-bold uppercase tracking-wider text-amber-400 mb-1">
                            <i data-lucide="plus-circle" class="w-4 h-4"></i>
                            <span>Nieuwe Collectie Toevoegen</span>
                        </div>
                        <h2 class="text-xl font-black text-white">MakerWorld Collectie Koppelen aan Auto-Sync</h2>
                        <p class="text-xs text-slate-400 mt-1">
                            Voer de link in van een collectie (bijv. <code class="text-amber-300 font-mono">https://makerworld.com/nl/collections/9205051</code>) of je gebruikersprofiel <code class="text-amber-300 font-mono">https://makerworld.com/nl/@user_1718037659/collections</code>.
                        </p>

                        <form action="{{ route('admin.makerworld.collections.add') }}" method="POST" class="mt-6 space-y-4">
                            @csrf
                            
                            <div>
                                <label class="block text-xs font-bold text-slate-300 uppercase tracking-wider mb-2">
                                    Collectie URL, Model Collectie-ID of Gebruikersprofiel
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-500">
                                        <i data-lucide="link" class="w-5 h-5"></i>
                                    </div>
                                    <input 
                                        type="text" 
                                        name="collection_input" 
                                        value="{{ old('collection_input', 'https://makerworld.com/nl/@user_1718037659/collections') }}"
                                        placeholder="bijv. https://makerworld.com/nl/@user_1718037659/collections of 9205051..."
                                        class="w-full pl-11 pr-4 py-3 bg-slate-950 border border-slate-800 rounded-2xl text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-amber-400 text-sm font-mono"
                                        required
                                    >
                                </div>
                            </div>

                            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-2">
                                <div class="flex items-center space-x-6 text-xs text-slate-300">
                                    <label class="flex items-center space-x-2 cursor-pointer">
                                        <input type="checkbox" name="is_active_sync" value="1" checked class="w-4 h-4 rounded text-amber-500 bg-slate-950 border-slate-700 focus:ring-amber-400">
                                        <span class="font-bold">Iedere 10 minuten automatisch controleren</span>
                                    </label>

                                    <label class="flex items-center space-x-2 cursor-pointer">
                                        <input type="checkbox" name="sync_now" value="1" checked class="w-4 h-4 rounded text-amber-500 bg-slate-950 border-slate-700 focus:ring-amber-400">
                                        <span class="font-bold">Direct eerste import uitvoeren</span>
                                    </label>
                                </div>

                                <button type="submit" class="px-6 py-3 bg-amber-400 hover:bg-amber-300 text-slate-950 font-black rounded-2xl text-xs uppercase tracking-wider shadow-lg shadow-amber-400/20 transition flex items-center justify-center space-x-2 shrink-0">
                                    <i data-lucide="download-cloud" class="w-4 h-4"></i>
                                    <span>Collectie Koppelen</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Tracked Collections List -->
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <h2 class="text-lg font-black text-white flex items-center space-x-2">
                                <i data-lucide="check-check" class="w-5 h-5 text-emerald-400"></i>
                                <span>Actief Gevolgde Collecties (Auto-Sync)</span>
                            </h2>
                            <p class="text-xs text-slate-400">
                                Modellen uit deze collecties worden binnengehaald als concepten in <a href="{{ route('admin.makerworld.staging') }}" class="text-amber-400 underline font-bold">Artikel Beheer</a>.
                            </p>
                        </div>
                    </div>

                    @if($trackedCollections->isEmpty())
                        <div class="text-center py-12 bg-slate-900/60 rounded-3xl border border-slate-800 p-8">
                            <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="folder-x" class="w-8 h-8"></i>
                            </div>
                            <h3 class="text-base font-bold text-white">Nog geen collecties gekoppeld</h3>
                            <p class="text-xs text-slate-400 max-w-md mx-auto mt-1">
                                Voeg hierboven een collectie toe of gebruik je gebruikersnaam <code class="text-amber-400 font-mono">@user_1718037659</code> om automatische 10-minuten import te starten.
                            </p>
                        </div>
                    @else
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach($trackedCollections as $collection)
                                <div class="bg-slate-900 rounded-3xl border border-slate-800 overflow-hidden flex flex-col justify-between shadow-lg hover:border-slate-700 transition">
                                    <div>
                                        <!-- Collection Header & Cover -->
                                        <div class="relative h-40 bg-slate-950 overflow-hidden">
                                            @if($collection->cover_url)
                                                <img src="{{ $collection->cover_url }}" alt="{{ $collection->name }}" class="w-full h-full object-cover">
                                            @else
                                                <div class="w-full h-full flex items-center justify-center bg-gradient-to-tr from-slate-900 to-slate-800 text-slate-600">
                                                    <i data-lucide="image" class="w-12 h-12"></i>
                                                </div>
                                            @endif
                                            <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent"></div>

                                            <!-- Auto-sync badge -->
                                            <div class="absolute top-3 right-3">
                                                @if($collection->is_active_sync)
                                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-emerald-500/90 text-white backdrop-blur flex items-center space-x-1 shadow-md">
                                                        <span class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></span>
                                                        <span>Auto-Sync 10m</span>
                                                    </span>
                                                @else
                                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-slate-800 text-slate-400 backdrop-blur border border-slate-700">
                                                        Gepauzeerd
                                                    </span>
                                                @endif
                                            </div>

                                            <div class="absolute bottom-3 left-3 right-3">
                                                <div class="text-[10px] font-bold text-amber-400 uppercase tracking-wider">
                                                    ID: #{{ $collection->makerworld_collection_id }} &bull; {{ $collection->user_handle ?? 'MakerWorld' }}
                                                </div>
                                                <h3 class="text-base font-black text-white truncate" title="{{ $collection->name }}">
                                                    {{ $collection->name }}
                                                </h3>
                                            </div>
                                        </div>

                                        <!-- Body Stats -->
                                        <div class="p-5 space-y-3">
                                            @if($collection->description)
                                                <p class="text-xs text-slate-400 line-clamp-2">
                                                    {{ $collection->description }}
                                                </p>
                                            @endif

                                            <div class="grid grid-cols-3 gap-2 py-2 px-3 bg-slate-950 rounded-2xl border border-slate-800 text-center">
                                                <div>
                                                    <div class="text-[10px] font-bold text-slate-500 uppercase">Totaal</div>
                                                    <div class="text-sm font-black text-white">{{ $collection->items_count }}</div>
                                                </div>
                                                <div>
                                                    <div class="text-[10px] font-bold text-amber-400 uppercase">Concept</div>
                                                    <div class="text-sm font-black text-amber-400">{{ $collection->draft_products_count }}</div>
                                                </div>
                                                <div>
                                                    <div class="text-[10px] font-bold text-emerald-400 uppercase">Live</div>
                                                    <div class="text-sm font-black text-emerald-400">{{ $collection->published_products_count }}</div>
                                                </div>
                                            </div>

                                            <div class="text-[11px] text-slate-400 space-y-1">
                                                <div class="flex items-center justify-between">
                                                    <span>Laatste controle:</span>
                                                    <span class="font-mono text-slate-300">
                                                        {{ $collection->last_synced_at ? $collection->last_synced_at->diffForHumans() : 'Nog niet' }}
                                                    </span>
                                                </div>
                                                @if($collection->last_sync_message)
                                                    <div class="text-[10px] text-slate-500 truncate" title="{{ $collection->last_sync_message }}">
                                                        Status: {{ $collection->last_sync_message }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="p-4 bg-slate-950/60 border-t border-slate-800 flex items-center justify-between gap-2">
                                        <div class="flex items-center space-x-2">
                                            <!-- Manual Sync Now -->
                                            <form action="{{ route('admin.makerworld.collections.sync', $collection) }}" method="POST">
                                                @csrf
                                                <button type="submit" title="Nu direct synchroniseren" class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold transition flex items-center space-x-1 border border-slate-700">
                                                    <i data-lucide="refresh-cw" class="w-3.5 h-3.5 text-amber-400"></i>
                                                    <span>Nu Syncen</span>
                                                </button>
                                            </form>

                                            <!-- Toggle Active Auto-sync -->
                                            <form action="{{ route('admin.makerworld.collections.toggle', $collection) }}" method="POST">
                                                @csrf
                                                <button type="submit" title="{{ $collection->is_active_sync ? 'Auto-sync pauzeren' : 'Auto-sync aanzetten' }}" class="px-2.5 py-1.5 rounded-xl text-xs font-bold transition border {{ $collection->is_active_sync ? 'bg-amber-400/10 text-amber-400 border-amber-400/30 hover:bg-amber-400/20' : 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/20' }}">
                                                    {{ $collection->is_active_sync ? 'Pauzeren' : 'Inschakelen' }}
                                                </button>
                                            </form>
                                        </div>

                                        <!-- Delete Collection -->
                                        <form action="{{ route('admin.makerworld.collections.delete', $collection) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je deze collectie wilt ontkoppelen?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" title="Collectie verwijderen" class="p-2 rounded-xl text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 transition">
                                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

            </div>
        @endif

        <!-- TAB: COMMUNITY / FAVORITES SHOWCASE -->
        @if(in_array($currentTab, ['community', 'favorites']))
            <div class="space-y-6">
                <div>
                    <h2 class="text-xl font-black text-white flex items-center space-x-2">
                        <i data-lucide="compass" class="w-5 h-5 text-amber-400"></i>
                        <span>MakerWorld Modellen Showcase</span>
                    </h2>
                    <p class="text-xs text-slate-400 mt-1">
                        Selecteer modellen om direct toe te voegen aan je webshop catalogus.
                    </p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                    @forelse($models as $model)
                        @php
                            $mId = $model['id'] ?? 0;
                            $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-900 rounded-3xl border border-slate-800 overflow-hidden flex flex-col justify-between shadow-lg">
                            <div class="relative aspect-4/3 overflow-hidden bg-slate-950">
                                <img src="{{ $cover }}" alt="{{ $title }}" class="w-full h-full object-cover">
                            </div>
                            <div class="p-4 flex flex-col flex-1">
                                <div class="text-[10px] text-slate-500 mb-1 flex items-center justify-between">
                                    <span class="truncate">Door {{ $author }}</span>
                                    <span class="font-mono">#{{ $mId }}</span>
                                </div>
                                <h3 class="text-sm font-bold text-white line-clamp-2 leading-snug mb-3 flex-1">
                                    {{ $title }}
                                </h3>
                                <form action="{{ route('admin.makerworld.import') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="makerworld_id" value="{{ $mId }}">
                                    <button type="submit" class="w-full py-2 px-3 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs uppercase tracking-wider transition">
                                        Importeer Model
                                    </button>
                                </form>
                            </div>
                        </div>
                    @empty
                        <div class="col-span-full py-12 text-center text-slate-400 text-xs">
                            Geen modellen gevonden in deze weergave.
                        </div>
                    @endforelse
                </div>
            </div>
        @endif

        <!-- TAB 2: QUICK SINGLE MODEL IMPORT -->
        @if($currentTab === 'quick')
            <div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl space-y-6">
                <div>
                    <h2 class="text-xl font-black text-white flex items-center space-x-2">
                        <i data-lucide="zap" class="w-5 h-5 text-amber-400"></i>
                        <span>Los Model Importeren via MakerWorld URL of ID</span>
                    </h2>
                    <p class="text-xs text-slate-400 mt-1">
                        Plak de URL van een specifiek model op MakerWorld (bijv. <code class="text-amber-300 font-mono">https://makerworld.com/nl/models/55866</code>) om het direct op te halen met alle foto's en printgegevens.
                    </p>
                </div>

                <form @submit.prevent="fetchQuickPreview()" class="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-500">
                            <i data-lucide="link" class="w-5 h-5"></i>
                        </div>
                        <input 
                            type="text" 
                            x-model="quickInput" 
                            placeholder="https://makerworld.com/nl/models/55866 of 55866..."
                            class="w-full pl-11 pr-4 py-3 bg-slate-950 border border-slate-800 rounded-2xl text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-amber-400 text-sm font-mono"
                            required
                        >
                    </div>
                    <button 
                        type="submit" 
                        :disabled="isLoadingQuick" 
                        class="px-6 py-3 bg-amber-400 hover:bg-amber-300 disabled:opacity-50 text-slate-950 font-black rounded-2xl text-xs uppercase tracking-wider flex items-center justify-center space-x-2 shadow-lg shadow-amber-400/20 transition shrink-0"
                    >
                        <template x-if="isLoadingQuick">
                            <div class="flex items-center space-x-2">
                                <i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
                                <span>Ophalen...</span>
                            </div>
                        </template>
                        <template x-if="!isLoadingQuick">
                            <div class="flex items-center space-x-2">
                                <i data-lucide="search" class="w-4 h-4"></i>
                                <span>Gegevens Bekijken</span>
                            </div>
                        </template>
                    </button>
                </form>

                <!-- Preview Area -->
                <div x-show="quickPreview" x-cloak class="mt-6 p-6 rounded-3xl bg-slate-950 border border-slate-800">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <img :src="quickPreview?.model?.image_url" alt="" class="w-full aspect-square object-cover rounded-2xl bg-slate-900 border border-slate-800">
                            <div class="mt-2 flex gap-2 overflow-x-auto py-1">
                                <template x-for="(pic, idx) in quickPreview?.model?.gallery_images" :key="idx">
                                    <img :src="pic" alt="" class="w-12 h-12 object-cover rounded-lg border border-slate-800 shrink-0">
                                </template>
                            </div>
                        </div>

                        <div class="md:col-span-2 space-y-4">
                            <div>
                                <div class="text-xs text-amber-400 font-bold uppercase tracking-wider" x-text="'MakerWorld #' + quickPreview?.model?.makerworld_id"></div>
                                <h3 class="text-xl font-black text-white" x-text="quickPreview?.model?.name"></h3>
                                <p class="text-xs text-slate-400 mt-1" x-text="'Maker: ' + quickPreview?.model?.makerworld_author"></p>
                            </div>

                            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 p-3 rounded-2xl bg-slate-900 border border-slate-800 text-xs">
                                <div>
                                    <span class="text-slate-500 block">Printtijd</span>
                                    <span class="font-bold text-white" x-text="(quickPreview?.model?.print_time_hours || '?') + ' uur'"></span>
                                </div>
                                <div>
                                    <span class="text-slate-500 block">Gewicht</span>
                                    <span class="font-bold text-white" x-text="(quickPreview?.model?.weight_grams || '?') + ' gram'"></span>
                                </div>
                                <div>
                                    <span class="text-slate-500 block">Adviesprijs</span>
                                    <span class="font-black text-amber-400" x-text="'€ ' + quickPreview?.model?.base_price"></span>
                                </div>
                            </div>

                            <!-- Import form -->
                            <form action="{{ route('admin.makerworld.import') }}" method="POST" class="pt-4 border-t border-slate-800 flex flex-wrap gap-4 items-end">
                                @csrf
                                <input type="hidden" name="makerworld_id" :value="quickPreview?.model?.makerworld_id">
                                
                                <div class="w-48">
                                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Categorie</label>
                                    <select name="category_id" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-xl text-white text-xs font-bold focus:ring-amber-400">
                                        @foreach($categories as $cat)
                                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="w-32">
                                    <label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Verkoopprijs (€)</label>
                                    <input type="number" step="0.01" name="custom_price" :value="quickPreview?.model?.base_price" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-xl text-white text-xs font-bold focus:ring-amber-400">
                                </div>

                                <div class="flex items-center space-x-3">
                                    <button type="submit" name="status" value="published" class="px-5 py-2.5 bg-emerald-500 hover:bg-emerald-400 text-white font-black rounded-xl text-xs uppercase tracking-wider transition">
                                        ✓ Direct Publiceren
                                    </button>
                                    <button type="submit" name="status" value="draft" class="px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-amber-300 font-bold rounded-xl text-xs uppercase tracking-wider transition border border-slate-700">
                                        Naar Concepten
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- TAB 3: AUTH & CREDENTIALS -->
        @if($currentTab === 'auth')
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Login with MakerWorld Credentials -->
                <div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl space-y-4">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-2xl bg-amber-400/10 text-amber-400 flex items-center justify-center font-bold">
                            <i data-lucide="shield-check" class="w-5 h-5"></i>
                        </div>
                        <div>
                            <h2 class="text-lg font-black text-white">Inloggen met MakerWorld</h2>
                            <p class="text-xs text-slate-400">Bambu Lab / MakerWorld inloggegevens</p>
                        </div>
                    </div>

                    <form action="{{ route('admin.makerworld.login') }}" method="POST" class="space-y-4 pt-2">
                        @csrf
                        <div>
                            <label class="block text-xs font-bold text-slate-300 uppercase mb-1">E-mailadres MakerWorld</label>
                            <input type="text" name="account" value="{{ old('account', 'info@jouwdriedee.nl') }}" class="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-white text-sm" required>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slate-300 uppercase mb-1">Wachtwoord</label>
                            <input type="password" name="password" class="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-white text-sm" required>
                        </div>

                        <button type="submit" class="w-full py-3 bg-amber-400 hover:bg-amber-300 text-slate-950 font-black rounded-xl text-xs uppercase tracking-wider transition">
                            Inloggen bij MakerWorld
                        </button>
                    </form>
                </div>

                <!-- Or Paste Token Directly -->
                <div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl space-y-4">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-2xl bg-sky-500/10 text-sky-400 flex items-center justify-center font-bold">
                            <i data-lucide="key" class="w-5 h-5"></i>
                        </div>
                        <div>
                            <h2 class="text-lg font-black text-white">MakerWorld Bearer Token</h2>
                            <p class="text-xs text-slate-400">Plak direct je MakerWorld JWT token</p>
                        </div>
                    </div>

                    <form action="{{ route('admin.makerworld.token') }}" method="POST" class="space-y-4 pt-2">
                        @csrf
                        <div>
                            <label class="block text-xs font-bold text-slate-300 uppercase mb-1">Access Token</label>
                            <textarea name="token" rows="4" placeholder="eyJhbGciOi..." class="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-white text-xs font-mono" required></textarea>
                        </div>

                        <button type="submit" class="w-full py-3 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-xl text-xs uppercase tracking-wider transition border border-slate-700">
                            Token Opslaan
                        </button>
                    </form>

                    @if($isAuthenticated)
                        <div class="pt-4 border-t border-slate-800 flex items-center justify-between">
                            <span class="text-xs text-emerald-400 font-bold flex items-center space-x-1.5">
                                <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
                                <span>Momenteel actief gekoppeld</span>
                            </span>
                            <form action="{{ route('admin.makerworld.disconnect') }}" method="POST">
                                @csrf
                                <button type="submit" class="text-xs text-rose-400 hover:underline font-bold">
                                    Ontkoppelen
                                </button>
                            </form>
                        </div>
                    @endif
                </div>
            </div>
        @endif

    </div>
</div>

<script>
function makerWorldSyncApp() {
    return {
        quickInput: '',
        isLoadingQuick: false,
        quickPreview: null,

        async fetchQuickPreview() {
            if (!this.quickInput.trim()) return;
            this.isLoadingQuick = true;
            this.quickPreview = null;

            try {
                const res = await fetch(`{{ route('admin.makerworld.preview') }}?query=${encodeURIComponent(this.quickInput.trim())}`);
                const data = await res.json();
                if (res.ok) {
                    this.quickPreview = data;
                } else {
                    alert(data.error || 'Kon model niet ophalen.');
                }
            } catch (err) {
                alert('Fout bij ophalen van model: ' + err.message);
            } finally {
                this.isLoadingQuick = false;
            }
        }
    }
}
</script>
@endsection