{% extends "base.html" %}

{% block content %}
<div x-data="clothesManager()" x-init="init()" class="space-y-6 max-w-7xl mx-auto">
    <!-- Header & Actions -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold tracking-tight text-white flex items-center gap-3">
                <i class="fa-solid fa-shirt text-map-500"></i>
                Cloth Catalog Management
            </h1>
            <p class="text-sm text-slate-400 mt-1">Manage garments, SKU, categories, cutouts and Lucy VTON 3.5 AI prompts</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="/rembg" class="px-4 py-2 rounded-xl text-sm font-medium bg-purple-600/20 hover:bg-purple-600 text-purple-300 hover:text-white border border-purple-500/30 transition flex items-center gap-2">
                <i class="fa-solid fa-wand-magic-sparkles"></i>
                <span>Remove BG Studio</span>
            </a>
            <button @click="openAddModal()" class="px-4 py-2 rounded-xl text-sm font-medium bg-map-600 hover:bg-map-500 text-white shadow-lg shadow-map-600/30 transition flex items-center gap-2">
                <i class="fa-solid fa-plus"></i>
                <span>Add Garment</span>
            </button>
        </div>
    </div>

    <!-- Category Filter Tabs & Search -->
    <div class="flex flex-col sm:flex-row items-center justify-between gap-4 bg-slate-900/60 p-3 rounded-2xl border border-slate-800">
        <div class="flex items-center gap-2 overflow-x-auto w-full sm:w-auto">
            <button @click="selectedCategory = 'ALL'" :class="selectedCategory === 'ALL' ? 'bg-map-600 text-white' : 'text-slate-400 hover:bg-slate-800'" class="px-3.5 py-1.5 rounded-xl text-xs font-medium transition">
                All Items (<span x-text="clothes.length"></span>)
            </button>
            <template x-for="cat in categories" :key="cat">
                <button @click="selectedCategory = cat" :class="selectedCategory === cat ? 'bg-map-600 text-white' : 'text-slate-400 hover:bg-slate-800'" class="px-3.5 py-1.5 rounded-xl text-xs font-medium transition" x-text="cat">
                </button>
            </template>
        </div>

        <div class="relative w-full sm:w-64">
            <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-xs"></i>
            <input type="text" x-model="searchQuery" placeholder="Search garment name or SKU..." class="w-full bg-slate-950 border border-slate-800 rounded-xl pl-8 pr-3 py-1.5 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:border-map-500">
        </div>
    </div>

    <!-- Clothes Cards Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
        <template x-for="item in filteredClothes" :key="item.id">
            <div class="glass-panel rounded-2xl overflow-hidden border border-slate-800/80 hover:border-map-500/40 transition flex flex-col justify-between group">
                <div>
                    <!-- Image Preview with Cutout Switcher -->
                    <div class="relative h-48 bg-slate-900/90 overflow-hidden flex items-center justify-center p-3 checkerboard-bg">
                        <img :src="item.cutout_image_url || item.original_image_url || '/static/images/logo.png'" :alt="item.name" class="max-h-full max-w-full object-contain transition duration-300 group-hover:scale-105">
                        
                        <!-- Badges -->
                        <div class="absolute top-2.5 left-2.5 flex items-center gap-1.5">
                            <span class="px-2 py-0.5 rounded-md text-[10px] font-bold uppercase bg-map-600/80 text-white tracking-wider backdrop-blur" x-text="item.category"></span>
                            <span class="px-2 py-0.5 rounded-md text-[10px] font-medium bg-slate-900/80 text-slate-300 border border-slate-700 backdrop-blur" x-text="item.gender"></span>
                        </div>

                        <span class="absolute top-2.5 right-2.5 px-2 py-0.5 rounded-md text-[10px] font-mono bg-black/70 text-slate-200 border border-slate-700" x-text="item.sku"></span>
                    </div>

                    <!-- Details -->
                    <div class="p-4 space-y-2.5">
                        <div>
                            <p class="text-xs text-slate-400 font-medium" x-text="item.brand"></p>
                            <h3 class="text-sm font-bold text-white line-clamp-1" x-text="item.name"></h3>
                        </div>

                        <!-- Price & Active Status -->
                        <div class="flex items-center justify-between text-xs pt-1 border-t border-slate-800/60">
                            <span class="font-bold text-emerald-400" x-text="'Rp ' + Number(item.price).toLocaleString()"></span>
                            <span class="flex items-center gap-1 text-[10px]" :class="item.is_active ? 'text-emerald-400' : 'text-slate-500'">
                                <i class="fa-solid fa-circle text-[6px]"></i>
                                <span x-text="item.is_active ? 'Active' : 'Disabled'"></span>
                            </span>
                        </div>

                        <!-- AI Prompt Snippet -->
                        <div class="p-2 rounded-lg bg-slate-950/70 border border-slate-800/80">
                            <p class="text-[10px] text-slate-400 uppercase font-semibold flex items-center gap-1">
                                <i class="fa-solid fa-brain text-purple-400"></i> Lucy VTON 3.5 Prompt:
                            </p>
                            <p class="text-[11px] text-slate-300 line-clamp-2 mt-0.5 font-mono italic" x-text="item.tryon_prompt"></p>
                        </div>
                    </div>
                </div>

                <!-- Footer Buttons -->
                <div class="p-3 bg-slate-900/40 border-t border-slate-800/80 flex items-center justify-between gap-2">
                    <button @click="editCloth(item)" class="flex-1 px-3 py-1.5 rounded-xl text-xs bg-slate-800 hover:bg-slate-700 text-slate-200 transition flex items-center justify-center gap-1.5">
                        <i class="fa-solid fa-pen-to-square"></i>
                        <span>Edit</span>
                    </button>
                    <button @click="deleteCloth(item)" class="px-3 py-1.5 rounded-xl text-xs bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 transition">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </div>
            </div>
        </template>
    </div>

    <!-- Add/Edit Garment Modal -->
    <div x-show="modalOpen" x-transition.opacity class="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
        <div class="glass-panel max-w-2xl w-full rounded-2xl p-6 space-y-4 border border-map-500/30 shadow-2xl max-h-[90vh] overflow-y-auto" @click.stop>
            <div class="flex items-center justify-between border-b border-slate-800 pb-3">
                <h3 class="text-base font-bold text-white flex items-center gap-2">
                    <i class="fa-solid fa-shirt text-map-500"></i>
                    <span x-text="isEditing ? 'Edit Garment' : 'Add New Garment'"></span>
                </h3>
                <button @click="modalOpen = false" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
            </div>

            <form @submit.prevent="saveCloth()" class="space-y-4">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="text-xs font-semibold text-slate-300 block mb-1">SKU Code *</label>
                        <input type="text" x-model="form.sku" required :disabled="isEditing" placeholder="e.g. MAP-BTK-01" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-map-500">
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-slate-300 block mb-1">Garment Name *</label>
                        <input type="text" x-model="form.name" required placeholder="e.g. Silk Batik Modern Shirt" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-map-500">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="text-xs font-semibold text-slate-300 block mb-1">Category</label>
                        <select x-model="form.category" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-map-500">
                            <option value="Batik">Batik / Traditional</option>
                            <option value="Tops">Tops / Shirts</option>
                            <option value="Jackets">Jackets & Blazers</option>
                            <option value="Dresses">Dresses</option>
                            <option value="Pants">Pants / Trousers</option>
                            <option value="Custom">Custom</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-slate-300 block mb-1">Gender</label>
                        <select x-model="form.gender" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-map-500">
                            <option value="Unisex">Unisex</option>
                            <option value="Men">Men</option>
                            <option value="Women">Women</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-slate-300 block mb-1">Price (IDR)</label>
                        <input type="number" x-model="form.price" placeholder="450000" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-map-500">
                    </div>
                </div>

                <!-- Image Upload & Auto-Rembg -->
                <div>
                    <label class="text-xs font-semibold text-slate-300 block mb-1">Garment Photo (Auto Background Removal)</label>
                    <div class="border-2 border-dashed border-slate-700 hover:border-map-500 rounded-2xl p-4 text-center cursor-pointer transition bg-slate-900/50 relative">
                        <input type="file" @change="handleFileUpload($event)" accept="image/*" class="absolute inset-0 opacity-0 cursor-pointer">
                        <div x-show="!uploading && !form.cutout_image_url" class="space-y-1">
                            <i class="fa-solid fa-cloud-arrow-up text-xl text-slate-400"></i>
                            <p class="text-xs text-slate-300">Click or drag image here to auto remove background</p>
                        </div>
                        <div x-show="uploading" class="text-xs text-map-400 space-y-1">
                            <i class="fa-solid fa-wand-magic-sparkles animate-spin text-xl"></i>
                            <p>Removing background and segmenting apparel...</p>
                        </div>
                        <div x-show="form.cutout_image_url" class="flex items-center justify-center gap-4">
                            <img :src="form.cutout_image_url" class="h-20 object-contain rounded-lg border border-slate-700 p-1 bg-slate-950">
                            <div class="text-left text-xs">
                                <p class="text-emerald-400 font-semibold flex items-center gap-1"><i class="fa-solid fa-check"></i> Cutout Ready</p>
                                <span class="text-slate-400 text-[10px]">Click box again to replace image</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Decart Lucy VTON 3.5 AI Prompt -->
                <div>
                    <div class="flex items-center justify-between mb-1">
                        <label class="text-xs font-semibold text-slate-300">Decart Lucy VTON 3.5 Prompt</label>
                        <button type="button" @click="autoGeneratePrompt()" class="text-[11px] text-map-400 hover:text-map-300 flex items-center gap-1">
                            <i class="fa-solid fa-sparkles"></i> Auto-Generate
                        </button>
                    </div>
                    <textarea x-model="form.tryon_prompt" rows="2" placeholder="e.g. Live video of a stylish person wearing MAP Silk Batik shirt, high detailed fabric folds, photorealistic lighting" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-map-500 font-mono"></textarea>
                </div>

                <div class="flex items-center gap-2 pt-2">
                    <input type="checkbox" id="isActive" x-model="form.is_active" class="rounded border-slate-700 text-map-600 focus:ring-0">
                    <label for="isActive" class="text-xs text-slate-300">Active in LiveMirror Android app catalog</label>
                </div>

                <div class="flex justify-end gap-3 pt-4 border-t border-slate-800">
                    <button type="button" @click="modalOpen = false" class="px-4 py-2 rounded-xl text-xs font-medium bg-slate-800 hover:bg-slate-700 text-slate-300">Cancel</button>
                    <button type="submit" class="px-5 py-2 rounded-xl text-xs font-medium bg-map-600 hover:bg-map-500 text-white shadow-lg shadow-map-600/30">Save Garment</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function clothesManager() {
    return {
        clothes: {{ clothes | tojson }},
        categories: {{ categories | tojson }},
        selectedCategory: 'ALL',
        searchQuery: '',
        modalOpen: false,
        isEditing: false,
        uploading: false,
        form: {
            id: null,
            sku: '',
            name: '',
            category: 'Batik',
            brand: 'MAP Collection',
            gender: 'Unisex',
            price: 350000,
            description: '',
            tryon_prompt: '',
            original_image_url: '',
            cutout_image_url: '',
            mask_image_url: '',
            is_active: true,
            sort_order: 0
        },

        init() {
            if (!this.categories.length) {
                this.categories = ['Batik', 'Tops', 'Jackets', 'Dresses', 'Pants'];
            }
        },

        get filteredClothes() {
            return this.clothes.filter(c => {
                const matchCat = (this.selectedCategory === 'ALL') || (c.category === this.selectedCategory);
                const q = this.searchQuery.toLowerCase();
                const matchQ = !q || (c.name?.toLowerCase().includes(q) || c.sku?.toLowerCase().includes(q) || c.brand?.toLowerCase().includes(q));
                return matchCat && matchQ;
            });
        },

        openAddModal() {
            this.isEditing = false;
            this.form = {
                id: null,
                sku: 'MAP-' + Math.floor(100 + Math.random() * 900),
                name: '',
                category: 'Batik',
                brand: 'MAP Collection',
                gender: 'Unisex',
                price: 350000,
                description: '',
                tryon_prompt: '',
                original_image_url: '',
                cutout_image_url: '',
                mask_image_url: '',
                is_active: true,
                sort_order: 0
            };
            this.modalOpen = true;
        },

        editCloth(item) {
            this.isEditing = true;
            this.form = { ...item };
            this.modalOpen = true;
        },

        autoGeneratePrompt() {
            this.form.tryon_prompt = `Live video of a stylish person wearing ${this.form.brand} ${this.form.name || 'apparel'} ${this.form.category}, high quality tailored fit, photorealistic fabric textures, 8k resolution`;
        },

        async handleFileUpload(event) {
            const file = event.target.files[0];
            if (!file) return;
            this.uploading = true;
            const formData = new FormData();
            formData.append('file', file);
            formData.append('cloth_name', this.form.name || 'New Garment');
            formData.append('category', this.form.category);
            formData.append('brand', this.form.brand);
            formData.append('gender', this.form.gender);

            try {
                const res = await fetch('/api/v1/clothes/upload', {
                    method: 'POST',
                    body: formData
                });
                const data = await res.json();
                this.form.original_image_url = data.original_url;
                this.form.cutout_image_url = data.cutout_url;
                this.form.mask_image_url = data.mask_url;
                if (!this.form.tryon_prompt) {
                    this.form.tryon_prompt = data.suggested_prompt;
                }
            } catch(e) {
                alert('Upload and background removal failed');
            }
            this.uploading = false;
        },

        async saveCloth() {
            try {
                if (this.isEditing) {
                    const res = await fetch(`/api/v1/clothes/${this.form.id}`, {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(this.form)
                    });
                    const updated = await res.json();
                    const idx = this.clothes.findIndex(c => c.id === updated.id);
                    if (idx >= 0) this.clothes[idx] = updated;
                } else {
                    const res = await fetch('/api/v1/clothes/', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(this.form)
                    });
                    if (!res.ok) {
                        const err = await res.json();
                        alert(err.detail || 'Error saving cloth');
                        return;
                    }
                    const created = await res.json();
                    this.clothes.unshift(created);
                }
                this.modalOpen = false;
            } catch(e) {
                alert('Failed to save cloth item');
            }
        },

        async deleteCloth(item) {
            if (!confirm(`Are you sure you want to delete ${item.name} (${item.sku})?`)) return;
            try {
                await fetch(`/api/v1/clothes/${item.id}`, { method: 'DELETE' });
                this.clothes = this.clothes.filter(c => c.id !== item.id);
            } catch(e) {
                alert('Failed to delete garment');
            }
        }
    }
}
</script>
{% endblock %}