{# app/templates/admin/platform-edit.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import loading_state %}
{% from 'shared/macros/headers.html' import edit_page_header %}

{% block title %}Edit Platform{% endblock %}

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

{% block content %}
{% call edit_page_header('Edit Platform', '/admin/platforms', subtitle_show='platform', back_label='Back to Platforms') %}
    <span x-text="platform?.name"></span>
    <span class="text-gray-400">•</span>
    <code class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded" x-text="platform?.code"></code>
{% endcall %}

{{ loading_state('Loading platform...', show_condition='loading') }}

<!-- Error State -->
<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg dark:bg-red-900/50 dark:border-red-600 dark:text-red-200">
    <div class="flex items-center">
        <span x-html="$icon('exclamation-circle', 'w-5 h-5 mr-2')"></span>
        <span x-text="error"></span>
    </div>
</div>

<!-- Success State -->
<div x-show="success" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg dark:bg-green-900/50 dark:border-green-600 dark:text-green-200">
    <div class="flex items-center">
        <span x-html="$icon('check-circle', 'w-5 h-5 mr-2')"></span>
        <span x-text="success"></span>
    </div>
</div>

<!-- Edit Form -->
<div x-show="!loading && platform">
    <!-- Quick Actions Card -->
    <div class="px-4 py-3 mb-6 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">
            Quick Actions
        </h3>
        <div class="flex flex-wrap items-center gap-3">
            <button
                @click="toggleActive()"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                :class="formData.is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'">
                <span x-html="$icon(formData.is_active ? 'pause' : 'play', 'w-4 h-4 mr-2')"></span>
                <span x-text="formData.is_active ? 'Deactivate' : 'Activate'"></span>
            </button>

            <button
                @click="togglePublic()"
                :disabled="saving"
                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
                :class="formData.is_public ? 'bg-orange-600 hover:bg-orange-700' : 'bg-blue-600 hover:bg-blue-700'">
                <span x-html="$icon(formData.is_public ? 'eye-off' : 'eye', 'w-4 h-4 mr-2')"></span>
                <span x-text="formData.is_public ? 'Make Private' : 'Make Public'"></span>
            </button>

            <!-- Status Badges -->
            <div class="ml-auto flex items-center gap-2">
                <span
                    x-show="formData.is_active"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
                    <span x-html="$icon('check-circle', 'w-3 h-3 mr-1')"></span>
                    Active
                </span>
                <span
                    x-show="!formData.is_active"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
                    <span x-html="$icon('x-circle', 'w-3 h-3 mr-1')"></span>
                    Inactive
                </span>
                <span
                    x-show="formData.is_public"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100">
                    <span x-html="$icon('globe-alt', 'w-3 h-3 mr-1')"></span>
                    Public
                </span>
                <span
                    x-show="!formData.is_public"
                    class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-100">
                    <span x-html="$icon('lock-closed', 'w-3 h-3 mr-1')"></span>
                    Private
                </span>
            </div>
        </div>
    </div>

    <!-- Form Card -->
    <form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <div class="grid gap-6 mb-8 md:grid-cols-2">
            <!-- Left Column: Basic Info -->
            <div>
                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                    Basic Information
                </h3>

                <!-- Platform Code (readonly) -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Platform Code
                    </span>
                    <input
                        type="text"
                        :value="platform?.code || ''"
                        disabled
                        class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        Cannot be changed after creation
                    </span>
                </label>

                <!-- Name -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Platform Name <span class="text-red-600">*</span>
                    </span>
                    <input
                        type="text"
                        x-model="formData.name"
                        required
                        maxlength="100"
                        :disabled="saving"
                        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 dark:focus:shadow-outline-gray form-input"
                        :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.name }"
                    >
                    <span x-show="errors.name" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.name"></span>
                </label>

                <!-- Description -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Description
                    </span>
                    <textarea
                        x-model="formData.description"
                        rows="3"
                        maxlength="500"
                        :disabled="saving"
                        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 dark:focus:shadow-outline-gray form-textarea"
                    ></textarea>
                </label>

                <!-- Default Language -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Default Language
                    </span>
                    <select
                        x-model="formData.default_language"
                        :disabled="saving"
                        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 dark:focus:shadow-outline-gray form-select"
                    >
                        <template x-for="lang in availableLanguages" :key="lang.code">
                            <option :value="lang.code" x-text="lang.name"></option>
                        </template>
                    </select>
                </label>

                <!-- Supported Languages -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Supported Languages
                    </span>
                    <div class="mt-2 flex flex-wrap gap-2">
                        <template x-for="lang in availableLanguages" :key="lang.code">
                            <button
                                type="button"
                                @click="toggleLanguage(lang.code)"
                                :disabled="saving"
                                class="px-3 py-1 text-sm rounded-full transition-colors"
                                :class="isLanguageSupported(lang.code)
                                    ? 'bg-purple-600 text-white'
                                    : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'"
                            >
                                <span x-text="lang.name"></span>
                            </button>
                        </template>
                    </div>
                </label>
            </div>

            <!-- Right Column: Routing & Branding -->
            <div>
                <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                    Routing & Branding
                </h3>

                <!-- Domain -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Production Domain
                    </span>
                    <input
                        type="text"
                        x-model="formData.domain"
                        placeholder="e.g., oms.lu"
                        :disabled="saving"
                        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 dark:focus:shadow-outline-gray form-input"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        Domain used in production for this platform
                    </span>
                </label>

                <!-- Path Prefix -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Development Path Prefix
                    </span>
                    <input
                        type="text"
                        x-model="formData.path_prefix"
                        placeholder="e.g., oms"
                        :disabled="saving"
                        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 dark:focus:shadow-outline-gray form-input"
                    >
                    <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                        Used for /platforms/{prefix}/ routing in development
                    </span>
                </label>

                <!-- Logo URL -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Logo URL (Light Mode)
                    </span>
                    <input
                        type="url"
                        x-model="formData.logo"
                        placeholder="https://..."
                        :disabled="saving"
                        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 dark:focus:shadow-outline-gray form-input"
                    >
                </label>

                <!-- Logo Dark URL -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Logo URL (Dark Mode)
                    </span>
                    <input
                        type="url"
                        x-model="formData.logo_dark"
                        placeholder="https://..."
                        :disabled="saving"
                        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 dark:focus:shadow-outline-gray form-input"
                    >
                </label>

                <!-- Favicon URL -->
                <label class="block mb-4 text-sm">
                    <span class="text-gray-700 dark:text-gray-400">
                        Favicon URL
                    </span>
                    <input
                        type="url"
                        x-model="formData.favicon"
                        placeholder="https://..."
                        :disabled="saving"
                        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 dark:focus:shadow-outline-gray form-input"
                    >
                </label>
            </div>
        </div>

        <!-- Platform Stats (Read Only) -->
        <div class="mb-8 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
                Platform Statistics
            </h3>
            <div class="grid grid-cols-3 gap-4 text-center">
                <div>
                    <p class="text-2xl font-bold text-purple-600 dark:text-purple-400" x-text="platform?.vendor_count || 0"></p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Vendors</p>
                </div>
                <div>
                    <p class="text-2xl font-bold text-blue-600 dark:text-blue-400" x-text="platform?.platform_pages_count || 0"></p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Marketing Pages</p>
                </div>
                <div>
                    <p class="text-2xl font-bold text-teal-600 dark:text-teal-400" x-text="platform?.vendor_defaults_count || 0"></p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Vendor Defaults</p>
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="flex justify-end gap-3">
            <a
                href="/admin/platforms"
                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
            >
                Cancel
            </a>
            <button
                type="submit"
                :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 active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
            >
                <span x-show="saving" x-html="$icon('refresh', 'w-4 h-4 mr-2 animate-spin')"></span>
                <span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
            </button>
        </div>
    </form>

    <!-- Timestamps -->
    <div class="text-sm text-gray-500 dark:text-gray-400">
        <p>
            Created: <span x-text="formatDate(platform?.created_at)"></span>
        </p>
        <p>
            Last Updated: <span x-text="formatDate(platform?.updated_at)"></span>
        </p>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="/static/admin/js/platform-edit.js"></script>
{% endblock %}