@extends('admin.layouts.app')
@section('title', 'Themes')
@section('page-title', 'Themes')

@section('content')
<div x-data="themesManager()" x-init="init()" @keydown.escape.window="colorPanel = false">
    <template x-if="loading">
        <div class="flex items-center justify-center py-16 gap-2 text-gray-400">
            <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
            </svg>
            Loading...
        </div>
    </template>

    <template x-if="!loading">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <template x-if="themes.length === 0">
                <div class="col-span-full py-12 text-center text-gray-400">No themes found in <code>Themes/</code> directory.</div>
            </template>
            <template x-for="theme in themes" :key="theme.slug">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden border-2 transition-colors"
                     :class="theme.is_active ? 'border-indigo-500' : 'border-transparent'">
                    <div class="h-40 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600">
                        <img x-show="hasThumb(theme.slug)"
                             :src="thumbSrc(theme.slug)"
                             x-on:error="thumbFailed(theme.slug)"
                             alt="Theme Thumbnail"
                             class="h-full w-full object-cover">
                    </div>
                    <div class="p-5">
                        <div class="flex items-start justify-between mb-2">
                            <div>
                                <h3 class="font-semibold text-gray-900 dark:text-white" x-text="theme.name"></h3>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    v<span x-text="theme.version"></span> &middot; <span x-text="theme.author ?? 'Unknown'"></span>
                                </p>
                            </div>
                            <span x-show="theme.is_active"
                                  class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400">
                                Active
                            </span>
                        </div>
                        <div class="mt-3 flex gap-2">
                            <button x-show="!theme.is_active"
                                    x-on:click="activate(theme.slug)"
                                    :disabled="activating === theme.slug"
                                    class="flex-1 py-2 text-sm font-medium bg-gray-100 dark:bg-gray-700 hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-600 text-gray-700 dark:text-gray-300 rounded-lg transition-colors disabled:opacity-50"
                                    x-text="activating === theme.slug ? 'Activating...' : 'Activate'">
                            </button>
                            <button x-show="theme.is_active && theme.colors && theme.colors.length"
                                    x-on:click="openColorPanel(theme)"
                                    class="flex-1 py-2 text-sm font-medium bg-gray-100 dark:bg-gray-700 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 hover:text-indigo-600 dark:hover:text-indigo-400 text-gray-700 dark:text-gray-300 rounded-lg transition-colors flex items-center justify-center gap-1.5">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
                                Colors
                            </button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </template>

    {{-- Color Customizer Panel --}}
    <div x-show="colorPanel" x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         style="display:none">
        <div class="absolute inset-0 bg-black/50" @click="colorPanel = false"></div>
        <div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-md">
            <div class="flex items-center justify-between p-5 border-b border-gray-200 dark:border-gray-700">
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white">Color Customization</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5" x-text="'Theme: ' + (colorTheme?.name ?? '')"></p>
                </div>
                <button @click="colorPanel = false" class="p-1.5 text-gray-400 hover:text-gray-600 rounded-lg">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <div class="p-5 space-y-4">
                <template x-for="def in colorTheme?.colors ?? []" :key="def.key">
                    <div class="flex items-center gap-4">
                        <div class="flex-1">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" x-text="def.label"></label>
                            <p class="text-xs text-gray-400" x-text="'Default: ' + def.default"></p>
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="color"
                                   :value="colorValues[def.key] ?? def.default"
                                   @input="colorValues[def.key] = $event.target.value"
                                   class="w-10 h-10 rounded-lg border border-gray-300 dark:border-gray-600 cursor-pointer p-0.5 bg-white dark:bg-gray-700">
                            <button @click="resetColor(def)"
                                    class="text-xs text-gray-400 hover:text-red-500 transition-colors px-2 py-1 rounded"
                                    title="Reset to default">↺</button>
                        </div>
                    </div>
                </template>
            </div>
            <div class="flex items-center gap-3 p-5 border-t border-gray-200 dark:border-gray-700">
                <div x-show="colorMessage" x-text="colorMessage"
                     :class="colorSaved ? 'text-green-600 dark:text-green-400' : 'text-red-600'"
                     class="flex-1 text-sm"></div>
                <div x-show="!colorMessage" class="flex-1"></div>
                <button @click="colorPanel = false"
                        class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
                    Cancel
                </button>
                <button @click="saveColors()" :disabled="colorSaving"
                        class="px-4 py-2 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white rounded-lg flex items-center gap-2">
                    <svg x-show="colorSaving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    <span x-text="colorSaving ? 'Saving...' : 'Save Colors'"></span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection
