{% extends "admin/base.html" %}

{% block title %}Feature Management{% endblock %}

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

{% block content %}
<div class="py-6">
    <!-- Header -->
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
            Feature Management
        </h2>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Configure which features are available to each subscription tier.
        </p>
    </div>

    <!-- Loading State -->
    <div x-show="loading" class="flex justify-center py-12">
        <svg class="animate-spin h-8 w-8 text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
    </div>

    <!-- Tier Tabs -->
    <div x-show="!loading" x-cloak>
        <!-- Tab Navigation -->
        <div class="border-b border-gray-200 dark:border-gray-700 mb-6">
            <nav class="-mb-px flex space-x-8">
                <template x-for="tier in tiers" :key="tier.code">
                    <button
                        @click="selectedTier = tier.code"
                        :class="{
                            'border-purple-500 text-purple-600 dark:text-purple-400': selectedTier === tier.code,
                            'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300': selectedTier !== tier.code
                        }"
                        class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                        <span x-text="tier.name"></span>
                        <span class="ml-2 px-2 py-0.5 text-xs rounded-full"
                              :class="selectedTier === tier.code ? 'bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-300' : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'"
                              x-text="tier.feature_count"></span>
                    </button>
                </template>
            </nav>
        </div>

        <!-- Features Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Available Features (for selected tier) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                        Included Features
                    </h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400"
                          x-text="`${getSelectedTierFeatures().length} features`"></span>
                </div>

                <div class="space-y-2 max-h-96 overflow-y-auto">
                    <template x-for="featureCode in getSelectedTierFeatures()" :key="featureCode">
                        <div class="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
                            <div class="flex items-center">
                                <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <div>
                                    <p class="text-sm font-medium text-gray-900 dark:text-white"
                                       x-text="getFeatureName(featureCode)"></p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400"
                                       x-text="getFeatureCategory(featureCode)"></p>
                                </div>
                            </div>
                            <button
                                @click="removeFeatureFromTier(featureCode)"
                                class="text-red-500 hover:text-red-700 p-1">
                                <svg class="w-4 h-4" 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>
                    </template>

                    <div x-show="getSelectedTierFeatures().length === 0"
                         class="text-center py-8 text-gray-500 dark:text-gray-400">
                        No features assigned to this tier
                    </div>
                </div>
            </div>

            <!-- All Features (to add) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                        Available to Add
                    </h3>
                    <select
                        x-model="categoryFilter"
                        class="text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 rounded-md">
                        <option value="">All Categories</option>
                        <template x-for="cat in categories" :key="cat">
                            <option :value="cat" x-text="cat.charAt(0).toUpperCase() + cat.slice(1)"></option>
                        </template>
                    </select>
                </div>

                <div class="space-y-2 max-h-96 overflow-y-auto">
                    <template x-for="feature in getAvailableFeatures()" :key="feature.code">
                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                            <div class="flex items-center">
                                <svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                </svg>
                                <div>
                                    <p class="text-sm font-medium text-gray-900 dark:text-white"
                                       x-text="feature.name"></p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400"
                                       x-text="feature.category"></p>
                                </div>
                            </div>
                            <button
                                @click="addFeatureToTier(feature.code)"
                                class="text-green-500 hover:text-green-700 p-1">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                </svg>
                            </button>
                        </div>
                    </template>

                    <div x-show="getAvailableFeatures().length === 0"
                         class="text-center py-8 text-gray-500 dark:text-gray-400">
                        All features are assigned to this tier
                    </div>
                </div>
            </div>
        </div>

        <!-- Save Button -->
        <div class="mt-6 flex justify-end">
            <button
                @click="saveTierFeatures"
                :disabled="saving || !hasChanges"
                :class="{
                    'opacity-50 cursor-not-allowed': saving || !hasChanges,
                    'hover:bg-purple-700': !saving && hasChanges
                }"
                class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                <svg x-show="saving" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
            </button>
        </div>

        <!-- All Features Table -->
        <div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                    All Features
                </h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Complete list of all platform features with their minimum tier requirement.
                </p>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Feature
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Category
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Minimum Tier
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Status
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        <template x-for="feature in allFeatures" :key="feature.code">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900 dark:text-white" x-text="feature.name"></div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400" x-text="feature.code"></div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
                                          x-text="feature.category"></span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs rounded-full"
                                          :class="{
                                              'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': feature.minimum_tier_code === 'essential',
                                              'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': feature.minimum_tier_code === 'professional',
                                              'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300': feature.minimum_tier_code === 'business',
                                              'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300': feature.minimum_tier_code === 'enterprise',
                                              'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': !feature.minimum_tier_code
                                          }"
                                          x-text="feature.minimum_tier_name || 'N/A'"></span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span x-show="feature.is_active"
                                          class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                                        Active
                                    </span>
                                    <span x-show="!feature.is_active"
                                          class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">
                                        Inactive
                                    </span>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function featuresPage() {
    return {
        ...data(),

        // State
        loading: true,
        saving: false,
        tiers: [],
        allFeatures: [],
        categories: [],
        selectedTier: 'essential',
        categoryFilter: '',
        originalTierFeatures: {},  // To track changes
        currentTierFeatures: {},   // Current state

        // Computed
        get hasChanges() {
            const original = this.originalTierFeatures[this.selectedTier] || [];
            const current = this.currentTierFeatures[this.selectedTier] || [];
            return JSON.stringify(original.sort()) !== JSON.stringify(current.sort());
        },

        // Lifecycle
        async init() {
            // Call parent init
            const path = window.location.pathname;
            const segments = path.split('/').filter(Boolean);
            this.currentPage = segments[segments.length - 1] || 'features';

            await this.loadData();
        },

        // Methods
        async loadData() {
            try {
                this.loading = true;

                // Load tiers and features in parallel
                const [tiersResponse, featuresResponse, categoriesResponse] = await Promise.all([
                    apiClient.get('/admin/features/tiers'),
                    apiClient.get('/admin/features'),
                    apiClient.get('/admin/features/categories'),
                ]);

                this.tiers = tiersResponse.tiers;
                this.allFeatures = featuresResponse.features;
                this.categories = categoriesResponse.categories;

                // Initialize tier features tracking
                for (const tier of this.tiers) {
                    this.originalTierFeatures[tier.code] = [...tier.features];
                    this.currentTierFeatures[tier.code] = [...tier.features];
                }

            } catch (error) {
                console.error('Failed to load features:', error);
                this.showNotification('Failed to load features', 'error');
            } finally {
                this.loading = false;
            }
        },

        getSelectedTierFeatures() {
            return this.currentTierFeatures[this.selectedTier] || [];
        },

        getAvailableFeatures() {
            const tierFeatures = this.getSelectedTierFeatures();
            return this.allFeatures.filter(f => {
                const notIncluded = !tierFeatures.includes(f.code);
                const matchesCategory = !this.categoryFilter || f.category === this.categoryFilter;
                return notIncluded && matchesCategory && f.is_active;
            });
        },

        getFeatureName(code) {
            const feature = this.allFeatures.find(f => f.code === code);
            return feature?.name || code;
        },

        getFeatureCategory(code) {
            const feature = this.allFeatures.find(f => f.code === code);
            return feature?.category || 'unknown';
        },

        addFeatureToTier(featureCode) {
            if (!this.currentTierFeatures[this.selectedTier].includes(featureCode)) {
                this.currentTierFeatures[this.selectedTier].push(featureCode);
            }
        },

        removeFeatureFromTier(featureCode) {
            const index = this.currentTierFeatures[this.selectedTier].indexOf(featureCode);
            if (index > -1) {
                this.currentTierFeatures[this.selectedTier].splice(index, 1);
            }
        },

        async saveTierFeatures() {
            if (!this.hasChanges) return;

            try {
                this.saving = true;

                await apiClient.put(`/admin/features/tiers/${this.selectedTier}/features`, {
                    feature_codes: this.currentTierFeatures[this.selectedTier]
                });

                // Update original to match current
                this.originalTierFeatures[this.selectedTier] = [...this.currentTierFeatures[this.selectedTier]];

                // Update tier in tiers array
                const tier = this.tiers.find(t => t.code === this.selectedTier);
                if (tier) {
                    tier.features = [...this.currentTierFeatures[this.selectedTier]];
                    tier.feature_count = tier.features.length;
                }

                this.showNotification('Features saved successfully', 'success');

            } catch (error) {
                console.error('Failed to save features:', error);
                this.showNotification('Failed to save features', 'error');
            } finally {
                this.saving = false;
            }
        },

        showNotification(message, type = 'info') {
            // Simple alert for now - could be improved with toast notifications
            if (type === 'error') {
                alert('Error: ' + message);
            } else {
                console.log(message);
            }
        }
    };
}
</script>
{% endblock %}