{% extends "base.html" %}

{% block content %}
<div x-data="rembgStudio()" class="space-y-6 max-w-7xl mx-auto">
    <!-- Header -->
    <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-wand-magic-sparkles text-purple-400"></i>
                Cloth Background Removal Studio
            </h1>
            <p class="text-sm text-slate-400 mt-1">Isolate apparel, generate transparent cutouts, binary masks, and Lucy VTON 3.5 prompts</p>
        </div>
        <a href="/clothes" class="px-4 py-2 rounded-xl text-sm font-medium bg-slate-800 hover:bg-slate-700 text-slate-200 transition flex items-center gap-2">
            <i class="fa-solid fa-arrow-left"></i>
            <span>Back to Clothes</span>
        </a>
    </div>

    <!-- Main Workspace -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- Left Column: Upload & Configuration -->
        <div class="lg:col-span-5 space-y-5">
            <!-- Dropzone Card -->
            <div class="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4">
                <h3 class="text-sm font-bold text-white flex items-center gap-2">
                    <i class="fa-solid fa-cloud-arrow-up text-map-500"></i>
                    1. Upload Garment Photo
                </h3>

                <div class="border-2 border-dashed border-slate-700 hover:border-purple-500 rounded-2xl p-8 text-center cursor-pointer transition bg-slate-900/50 relative">
                    <input type="file" @change="processFile($event)" accept="image/*" class="absolute inset-0 opacity-0 cursor-pointer">
                    <div x-show="!processing" class="space-y-2">
                        <div class="w-12 h-12 rounded-full bg-purple-500/10 text-purple-400 mx-auto flex items-center justify-center text-xl">
                            <i class="fa-solid fa-image"></i>
                        </div>
                        <p class="text-xs font-semibold text-slate-200">Drag & Drop garment image here</p>
                        <p class="text-[10px] text-slate-400">Supports PNG, JPG, WEBP (Mannequin, Flatlay, or Model)</p>
                    </div>
                    <div x-show="processing" class="space-y-2 py-4">
                        <i class="fa-solid fa-circle-notch animate-spin text-3xl text-purple-400"></i>
                        <p class="text-xs font-semibold text-purple-300">Processing background removal...</p>
                        <p class="text-[10px] text-slate-400">Generating transparent alpha channel and edge masks</p>
                    </div>
                </div>

                <!-- Garment Metadata -->
                <div class="space-y-3 pt-2">
                    <div>
                        <label class="text-xs font-semibold text-slate-300 block mb-1">Garment Name</label>
                        <input type="text" x-model="garmentName" placeholder="e.g. Traditional Solo Batik 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 class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="text-xs font-semibold text-slate-300 block mb-1">Category</label>
                            <select x-model="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</option>
                                <option value="Tops">Tops</option>
                                <option value="Jackets">Jackets</option>
                                <option value="Dresses">Dresses</option>
                                <option value="Pants">Pants</option>
                            </select>
                        </div>
                        <div>
                            <label class="text-xs font-semibold text-slate-300 block mb-1">Gender</label>
                            <select x-model="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>
                </div>
            </div>

            <!-- Auto Generated Lucy VTON 3.5 Prompt Card -->
            <div class="glass-panel p-5 rounded-2xl border border-slate-800 space-y-3" x-show="result">
                <div class="flex items-center justify-between">
                    <h3 class="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-1.5">
                        <i class="fa-solid fa-brain text-purple-400"></i>
                        Generated Lucy VTON 3.5 Prompt
                    </h3>
                    <button @click="copyPrompt()" class="text-xs text-map-400 hover:text-white flex items-center gap-1">
                        <i class="fa-solid fa-copy"></i> Copy
                    </button>
                </div>
                <textarea x-model="result.suggested_prompt" rows="3" class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-slate-200 font-mono focus:outline-none"></textarea>
                
                <button @click="addToCatalog()" :disabled="saving" class="w-full py-2.5 rounded-xl text-xs font-bold bg-gradient-to-r from-map-600 to-purple-600 hover:from-map-500 hover:to-purple-500 text-white shadow-lg shadow-map-600/30 transition flex items-center justify-center gap-2">
                    <i class="fa-solid fa-circle-check" x-show="!saving"></i>
                    <i class="fa-solid fa-circle-notch animate-spin" x-show="saving"></i>
                    <span>Save & Add Directly to Cloth Catalog</span>
                </button>
            </div>
        </div>

        <!-- Right Column: Visual Comparison Viewport -->
        <div class="lg:col-span-7 space-y-4">
            <div class="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4 min-h-[480px] flex flex-col justify-between">
                <!-- Viewport Tabs & Background Switcher -->
                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-800 pb-3">
                    <div class="flex items-center gap-2">
                        <button @click="viewMode = 'cutout'" :class="viewMode === 'cutout' ? 'bg-purple-600 text-white' : 'text-slate-400 hover:bg-slate-800'" class="px-3 py-1.5 rounded-xl text-xs font-semibold transition flex items-center gap-1.5">
                            <i class="fa-solid fa-wand-magic"></i> Cutout Preview
                        </button>
                        <button @click="viewMode = 'original'" :class="viewMode === 'original' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:bg-slate-800'" class="px-3 py-1.5 rounded-xl text-xs font-semibold transition">
                            Original Photo
                        </button>
                        <button @click="viewMode = 'mask'" :class="viewMode === 'mask' ? 'bg-slate-700 text-white' : 'text-slate-400 hover:bg-slate-800'" class="px-3 py-1.5 rounded-xl text-xs font-semibold transition">
                            Binary Alpha Mask
                        </button>
                    </div>

                    <!-- Backdrop color toggle for cutout -->
                    <div class="flex items-center gap-1.5" x-show="viewMode === 'cutout'">
                        <span class="text-[10px] text-slate-400 uppercase">Backdrop:</span>
                        <button @click="bgType = 'checker'" title="Transparent Grid" class="w-5 h-5 rounded-md checkerboard-bg border" :class="bgType === 'checker' ? 'border-purple-400 scale-110' : 'border-slate-700'"></button>
                        <button @click="bgType = 'dark'" title="Dark Navy" class="w-5 h-5 rounded-md bg-slate-900 border" :class="bgType === 'dark' ? 'border-purple-400 scale-110' : 'border-slate-700'"></button>
                        <button @click="bgType = 'white'" title="Clean White" class="w-5 h-5 rounded-md bg-white border" :class="bgType === 'white' ? 'border-purple-400 scale-110' : 'border-slate-700'"></button>
                    </div>
                </div>

                <!-- Display Canvas View -->
                <div class="flex-1 min-h-[380px] rounded-2xl flex items-center justify-center p-6 relative overflow-hidden transition"
                     :class="{
                        'checkerboard-bg': viewMode === 'cutout' && bgType === 'checker',
                        'bg-slate-950': (viewMode === 'cutout' && bgType === 'dark') || viewMode === 'mask',
                        'bg-white': viewMode === 'cutout' && bgType === 'white',
                        'bg-slate-900': viewMode === 'original'
                     }">
                    <template x-if="result">
                        <div class="w-full h-full flex items-center justify-center">
                            <!-- Cutout View -->
                            <img x-show="viewMode === 'cutout'" :src="result.cutout_url" class="max-h-[360px] max-w-full object-contain filter drop-shadow-2xl">
                            <!-- Original View -->
                            <img x-show="viewMode === 'original'" :src="result.original_url" class="max-h-[360px] max-w-full object-contain rounded-xl">
                            <!-- Mask View -->
                            <img x-show="viewMode === 'mask'" :src="result.mask_url" class="max-h-[360px] max-w-full object-contain rounded-xl">
                        </div>
                    </template>

                    <div x-show="!result" class="text-center space-y-2 text-slate-500">
                        <i class="fa-solid fa-shirt text-5xl"></i>
                        <p class="text-sm font-medium">Upload a cloth image on the left to start</p>
                    </div>
                </div>

                <!-- Bottom Stats -->
                <div x-show="result" class="flex items-center justify-between text-xs text-slate-400 pt-2 border-t border-slate-800">
                    <span x-text="'Resolution: ' + result.width + ' × ' + result.height + ' px'"></span>
                    <span class="text-emerald-400 flex items-center gap-1"><i class="fa-solid fa-circle-check"></i> Alpha Matting Complete</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function rembgStudio() {
    return {
        garmentName: 'Batik Executive Shirt',
        category: 'Batik',
        gender: 'Unisex',
        processing: false,
        saving: false,
        result: null,
        viewMode: 'cutout',
        bgType: 'checker',

        async processFile(event) {
            const file = event.target.files[0];
            if (!file) return;
            this.processing = true;
            this.result = null;

            const formData = new FormData();
            formData.append('file', file);
            formData.append('cloth_name', this.garmentName);
            formData.append('category', this.category);
            formData.append('brand', 'MAP Collection');
            formData.append('gender', this.gender);

            try {
                const res = await fetch('/api/v1/rembg/remove-background', {
                    method: 'POST',
                    body: formData
                });
                this.result = await res.json();
            } catch(e) {
                alert('Background removal processing failed');
            }
            this.processing = false;
        },

        copyPrompt() {
            if (this.result?.suggested_prompt) {
                navigator.clipboard.writeText(this.result.suggested_prompt);
                alert('Decart Lucy VTON 3.5 prompt copied to clipboard!');
            }
        },

        async addToCatalog() {
            if (!this.result) return;
            this.saving = true;
            const sku = 'MAP-' + Math.floor(100 + Math.random() * 900);
            try {
                const res = await fetch('/api/v1/clothes/', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        sku: sku,
                        name: this.garmentName,
                        category: this.category,
                        brand: 'MAP Collection',
                        gender: this.gender,
                        price: 420000,
                        tryon_prompt: this.result.suggested_prompt,
                        original_image_url: this.result.original_url,
                        cutout_image_url: this.result.cutout_url,
                        mask_image_url: this.result.mask_url,
                        is_active: true
                    })
                });
                if (res.ok) {
                    alert(`Garment successfully added to catalog with SKU: ${sku}!`);
                    window.location.href = '/clothes';
                }
            } catch(e) {
                alert('Failed to save to catalog');
            }
            this.saving = false;
        }
    }
}
</script>
{% endblock %}