{# app/templates/admin/vendor-theme.html #}
{% extends "admin/base.html" %}

{% block title %}Vendor Theme - {{ vendor_code }}{% endblock %}

{% block alpine_data %}vendorThemeData(){% endblock %}

{% block content %}
<div class="container px-6 mx-auto grid">
    <!-- Page Header -->
    <div class="flex items-center justify-between my-6">
        <div>
            <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
                Vendor Theme
            </h2>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                Customize appearance for <span x-text="vendor?.name"></span>
            </p>
        </div>
        <div class="flex space-x-2">
            <a :href="`/admin/vendors/${vendorCode}`"
               class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg hover:border-gray-400 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
                <span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
                Back to Vendor
            </a>
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading" class="text-center py-12">
        <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600 animate-spin')"></span>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Loading theme...</p>
    </div>

    <!-- Main Content -->
    <div x-show="!loading" class="grid gap-6 mb-8 md:grid-cols-3">
        
        <!-- Theme Configuration Form (2 columns) -->
        <div class="md:col-span-2">
            <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                    Theme Configuration
                </h3>

                <!-- Theme Preset Selector -->
                <div class="mb-6 p-4 bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 rounded-lg border border-purple-200 dark:border-purple-800">
                    <h4 class="text-sm font-semibold text-purple-800 dark:text-purple-200 mb-2">
                        Quick Start: Choose a Preset
                    </h4>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                        <button @click="applyPreset('modern')"
                                class="px-3 py-2 text-sm font-medium text-purple-700 bg-white border border-purple-300 rounded-lg hover:bg-purple-50 dark:bg-gray-800 dark:text-purple-300 dark:border-purple-700">
                            Modern
                        </button>
                        <button @click="applyPreset('classic')"
                                class="px-3 py-2 text-sm font-medium text-blue-700 bg-white border border-blue-300 rounded-lg hover:bg-blue-50 dark:bg-gray-800 dark:text-blue-300 dark:border-blue-700">
                            Classic
                        </button>
                        <button @click="applyPreset('minimal')"
                                class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700">
                            Minimal
                        </button>
                        <button @click="applyPreset('vibrant')"
                                class="px-3 py-2 text-sm font-medium text-orange-700 bg-white border border-orange-300 rounded-lg hover:bg-orange-50 dark:bg-gray-800 dark:text-orange-300 dark:border-orange-700">
                            Vibrant
                        </button>
                    </div>
                </div>

                <!-- Colors Section -->
                <div class="mb-6">
                    <h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Colors</h4>
                    <div class="grid gap-4 md:grid-cols-2">
                        <!-- Primary Color -->
                        <label class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">Primary Color</span>
                            <div class="flex items-center mt-1 space-x-2">
                                <input type="color" 
                                       x-model="themeData.colors.primary"
                                       class="h-10 w-20 border border-gray-300 rounded dark:border-gray-600 cursor-pointer">
                                <input type="text" 
                                       x-model="themeData.colors.primary"
                                       class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
                            </div>
                        </label>

                        <!-- Secondary Color -->
                        <label class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">Secondary Color</span>
                            <div class="flex items-center mt-1 space-x-2">
                                <input type="color" 
                                       x-model="themeData.colors.secondary"
                                       class="h-10 w-20 border border-gray-300 rounded dark:border-gray-600 cursor-pointer">
                                <input type="text" 
                                       x-model="themeData.colors.secondary"
                                       class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
                            </div>
                        </label>

                        <!-- Accent Color -->
                        <label class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">Accent Color</span>
                            <div class="flex items-center mt-1 space-x-2">
                                <input type="color" 
                                       x-model="themeData.colors.accent"
                                       class="h-10 w-20 border border-gray-300 rounded dark:border-gray-600 cursor-pointer">
                                <input type="text" 
                                       x-model="themeData.colors.accent"
                                       class="block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input">
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Typography Section -->
                <div class="mb-6">
                    <h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Typography</h4>
                    <div class="grid gap-4 md:grid-cols-2">
                        <!-- Heading Font -->
                        <label class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">Heading Font</span>
                            <select x-model="themeData.fonts.heading"
                                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
                                <option value="Inter, sans-serif">Inter</option>
                                <option value="Roboto, sans-serif">Roboto</option>
                                <option value="Poppins, sans-serif">Poppins</option>
                                <option value="Playfair Display, serif">Playfair Display</option>
                                <option value="Merriweather, serif">Merriweather</option>
                                <option value="Georgia, serif">Georgia</option>
                            </select>
                        </label>

                        <!-- Body Font -->
                        <label class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">Body Font</span>
                            <select x-model="themeData.fonts.body"
                                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
                                <option value="Inter, sans-serif">Inter</option>
                                <option value="Open Sans, sans-serif">Open Sans</option>
                                <option value="Lato, sans-serif">Lato</option>
                                <option value="Source Sans Pro, sans-serif">Source Sans Pro</option>
                                <option value="Arial, sans-serif">Arial</option>
                            </select>
                        </label>
                    </div>
                </div>

                <!-- Layout Section -->
                <div class="mb-6">
                    <h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Layout</h4>
                    <div class="grid gap-4 md:grid-cols-2">
                        <!-- Product Layout Style -->
                        <label class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">Product Layout</span>
                            <select x-model="themeData.layout.style"
                                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
                                <option value="grid">Grid</option>
                                <option value="list">List</option>
                                <option value="masonry">Masonry</option>
                            </select>
                        </label>

                        <!-- Header Style -->
                        <label class="block text-sm">
                            <span class="text-gray-700 dark:text-gray-400">Header Style</span>
                            <select x-model="themeData.layout.header"
                                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-select">
                                <option value="fixed">Fixed</option>
                                <option value="static">Static</option>
                                <option value="transparent">Transparent</option>
                            </select>
                        </label>
                    </div>
                </div>

                <!-- Custom CSS Section -->
                <div class="mb-6">
                    <h4 class="mb-4 text-md font-semibold text-gray-700 dark:text-gray-200">Advanced</h4>
                    <label class="block text-sm">
                        <span class="text-gray-700 dark:text-gray-400">Custom CSS</span>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">
                            Advanced: Add custom CSS rules (use with caution)
                        </p>
                        <textarea x-model="themeData.custom_css"
                                  rows="6"
                                  placeholder=".my-custom-class { color: red; }"
                                  class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-textarea"></textarea>
                    </label>
                </div>

                <!-- Action Buttons -->
                <div class="flex justify-between items-center">
                    <button @click="resetToDefault()"
                            :disabled="saving"
                            class="px-4 py-2 text-sm font-medium leading-5 text-red-700 transition-colors duration-150 bg-white border border-red-300 rounded-lg hover:bg-red-50 focus:outline-none disabled:opacity-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-600">
                        Reset to Default
                    </button>
                    <button @click="saveTheme()"
                            :disabled="saving"
                            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none disabled:opacity-50">
                        <span x-show="!saving">Save Theme</span>
                        <span x-show="saving" class="flex items-center">
                            <span x-html="$icon('spinner', 'w-4 h-4 mr-2 animate-spin')"></span>
                            Saving...
                        </span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Preview Panel (1 column) -->
        <div class="md:col-span-1">
            <div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800 sticky top-6">
                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                    Preview
                </h3>

                <!-- Theme Preview -->
                <div class="space-y-4">
                    <!-- Colors Preview -->
                    <div>
                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">COLORS</p>
                        <div class="grid grid-cols-3 gap-2">
                            <div class="text-center">
                                <div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700"
                                     :style="`background-color: ${themeData.colors.primary}`"></div>
                                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Primary</p>
                            </div>
                            <div class="text-center">
                                <div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700"
                                     :style="`background-color: ${themeData.colors.secondary}`"></div>
                                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Secondary</p>
                            </div>
                            <div class="text-center">
                                <div class="h-12 rounded-lg border border-gray-200 dark:border-gray-700"
                                     :style="`background-color: ${themeData.colors.accent}`"></div>
                                <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">Accent</p>
                            </div>
                        </div>
                    </div>

                    <!-- Typography Preview -->
                    <div>
                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">TYPOGRAPHY</p>
                        <div class="space-y-2">
                            <p class="text-lg" :style="`font-family: ${themeData.fonts.heading}`">
                                Heading Font
                            </p>
                            <p class="text-sm" :style="`font-family: ${themeData.fonts.body}`">
                                Body text font example
                            </p>
                        </div>
                    </div>

                    <!-- Button Preview -->
                    <div>
                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">BUTTONS</p>
                        <button class="px-4 py-2 text-sm font-medium text-white rounded-lg w-full"
                                :style="`background-color: ${themeData.colors.primary}`">
                            Primary Button
                        </button>
                    </div>

                    <!-- Layout Preview -->
                    <div>
                        <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">LAYOUT</p>
                        <div class="text-xs space-y-1">
                            <p class="text-gray-700 dark:text-gray-300">
                                <span class="font-semibold">Product Layout:</span> 
                                <span class="capitalize" x-text="themeData.layout.style"></span>
                            </p>
                            <p class="text-gray-700 dark:text-gray-300">
                                <span class="font-semibold">Header:</span> 
                                <span class="capitalize" x-text="themeData.layout.header"></span>
                            </p>
                        </div>
                    </div>

                    <!-- Preview Link -->
                    <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
                        <a :href="`http://${vendor?.subdomain}.localhost:8000`"
                           target="_blank"
                           class="flex items-center justify-center px-4 py-2 text-sm font-medium text-purple-700 bg-purple-50 border border-purple-300 rounded-lg hover:bg-purple-100 dark:bg-purple-900 dark:bg-opacity-20 dark:text-purple-300 dark:border-purple-700">
                            <span x-html="$icon('eye', 'w-4 h-4 mr-2')"></span>
                            View Live Shop
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', path='admin/js/vendor-theme.js') }}"></script>
{% endblock %}