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

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

{% block content %}
<style>
    [x-cloak] { display: none !important; }
    
    /* Action button styles */
    .action-btn {
        transition: all 0.2s ease;
        border: 1px solid transparent;
    }
    .action-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .action-btn:active {
        transform: translateY(0);
    }
    
    @media (prefers-color-scheme: dark) {
        .action-btn:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }
    }
    
    .edit-btn {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        color: white;
    }
    .edit-btn:hover {
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
        color: white;
    }
    
    .toggle-btn {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
    }
    .toggle-btn:hover {
        background: linear-gradient(135deg, #d97706, #b45309);
        color: white;
    }
    
    .enable-btn {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
    }
    .enable-btn:hover {
        background: linear-gradient(135deg, #059669, #047857);
        color: white;
    }
    
    .delete-btn {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
    }
    .delete-btn:hover {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        color: white;
    }
</style>

<div class="bg-slate-50 dark:bg-slate-900">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="{
        editModalOpen: false,
        featureToEdit: {},
        showInactive: false,
        
        init() {
            console.log('Feature Management Alpine.js initialized');
            console.log('Available features:', {{ features|length }});
        },
        
        openEditModal(id, name, urlName, description, category, isActive) {
            console.log('Opening edit modal for feature:', { id, name, urlName, description, category, isActive });
            this.featureToEdit = {
                id: id,
                name: name,
                url_name: urlName,
                description: description,
                category: category,
                is_active: isActive === 'true'
            };
            this.editModalOpen = true;
        }
    }">
        
        <!-- Page Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100">Feature Management</h1>
            <p class="mt-1 text-slate-500 dark:text-slate-400">Add, edit, and manage system features available for user groups.</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            <!-- Left Column: Create Feature Form -->
            <div class="lg:col-span-1">
                <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 sticky top-24">
                    <h2 class="text-xl font-semibold mb-4 text-slate-800 dark:text-slate-200">Create New Feature</h2>
                    <form method="post" class="space-y-4">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="create_feature">
                        <div>
                            <label for="name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Feature Name</label>
                            <input type="text" id="name" name="name" required placeholder="e.g., User Management"
                                   class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 transition">
                        </div>
                        <div>
                            <label for="url_name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">URL Name</label>
                            <input type="text" id="url_name" name="url_name" required placeholder="e.g., user_management"
                                   class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 transition">
                            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Must match the URL name in your urls.py</p>
                        </div>
                        <div>
                            <label for="description" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Description</label>
                            <textarea id="description" name="description" rows="3" placeholder="Brief description of the feature's purpose..."
                                      class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 transition"></textarea>
                        </div>
                        <div>
                            <label for="category" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Category</label>
                            <input type="text" id="category" name="category" placeholder="e.g., Administration, Reports"
                                   class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 transition">
                        </div>
                        <div class="flex items-center">
                            <input id="is_active" name="is_active" type="checkbox" checked
                                   class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-indigo-600 focus:ring-indigo-500 dark:bg-slate-700">
                            <label for="is_active" class="ml-2 block text-sm text-slate-700 dark:text-slate-300">
                                Active (feature is available for assignment)
                            </label>
                        </div>
                        <button type="submit"
                                class="w-full inline-flex justify-center items-center px-5 py-2.5 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-800 transition">
                            <svg class="w-5 h-5 mr-2" 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"></path></svg>
                            Create Feature
                        </button>
                    </form>
                </div>
            </div>

            <!-- Right Column: Features List -->
            <div class="lg:col-span-2">
                <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
                    <div class="p-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
                        <h3 class="text-lg font-medium text-slate-800 dark:text-slate-100">Available Features</h3>
                        <label class="flex items-center space-x-2">
                            <input type="checkbox" x-model="showInactive" class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-indigo-600 focus:ring-indigo-500 dark:bg-slate-700">
                            <span class="text-sm text-slate-600 dark:text-slate-400">Show inactive</span>
                        </label>
                    </div>
                    {% if features %}
                    <ul class="divide-y divide-slate-200 dark:divide-slate-700">
                        {% for feature in features %}
                        <li x-show="showInactive || {{ 'true' if feature.is_active else 'false' }}" 
                            x-transition
                            class="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                            <div class="flex items-start justify-between">
                                <div class="flex-grow">
                                    <div class="flex items-center space-x-3 mb-2">
                                        <h4 class="text-md font-semibold text-slate-800 dark:text-slate-100">{{ feature.name }}</h4>
                                        {% if feature.is_active %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800/30 dark:text-green-300">Active</span>
                                        {% else %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300">Inactive</span>
                                        {% endif %}
                                        {% if feature.category %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800/30 dark:text-blue-300">{{ feature.category }}</span>
                                        {% endif %}
                                    </div>
                                    {% if feature.description %}
                                    <p class="text-sm text-slate-500 dark:text-slate-400 mb-2">{{ feature.description }}</p>
                                    {% endif %}
                                    <p class="text-xs text-slate-400 dark:text-slate-500 font-mono">{{ feature.url_name }}</p>
                                    <div class="text-xs text-slate-400 dark:text-slate-500 mt-1">
                                        Created: {{ feature.created_dtm|date("M d, Y") }}
                                        {% if feature.updated_dtm != feature.created_dtm %}
                                        • Updated: {{ feature.updated_dtm|date("M d, Y") }}
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <!-- Action Buttons - Always Visible -->
                                <div class="ml-4 flex flex-col sm:flex-row gap-2">
                                    <!-- Edit Button -->
                                    <!-- <button @click="openEditModal({{ feature.id }}, {{ feature.name|tojson }}, {{ feature.url_name|tojson }}, {{ (feature.description or '')|tojson }}, {{ (feature.category or '')|tojson }}, {{ 'true' if feature.is_active else 'false' }})" 
                                            class="action-btn edit-btn inline-flex items-center px-3 py-2 text-xs font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-slate-800">
                                        <svg class="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                        </svg>
                                        Edit
                                    </button> -->
                                    
                                    <!-- Toggle Status Button -->
                                    <form method="post" class="inline">
                                        {% csrf_token %}
                                        <input type="hidden" name="action" value="toggle_feature_status">
                                        <input type="hidden" name="feature_id" value="{{ feature.id }}">
                                        <button type="submit" 
                                                class="action-btn {% if feature.is_active %}toggle-btn{% else %}enable-btn{% endif %} inline-flex items-center px-3 py-2 text-xs font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-slate-800 {% if feature.is_active %}focus:ring-yellow-500{% else %}focus:ring-green-500{% endif %}">
                                            {% if feature.is_active %}
                                            <svg class="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728"></path>
                                            </svg>
                                            Disable
                                            {% else %}
                                            <svg class="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            Enable
                                            {% endif %}
                                        </button>
                                    </form>
                                    
                                    <!-- Delete Button -->
                                    <form method="post" class="inline" onsubmit="return confirm('Are you sure you want to delete this feature? This will remove it from all groups.');">
                                        {% csrf_token %}
                                        <input type="hidden" name="action" value="delete_feature">
                                        <input type="hidden" name="feature_id" value="{{ feature.id }}">
                                        <button type="submit" 
                                                class="action-btn delete-btn inline-flex items-center px-3 py-2 text-xs font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-slate-800">
                                            <svg class="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                            </svg>
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                    {% else %}
                    <div class="p-8 text-center">
                        <svg class="mx-auto h-12 w-12 text-slate-400 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-slate-900 dark:text-slate-100">No Features Found</h3>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Create your first feature to get started.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Edit Feature Modal -->
        <div x-show="editModalOpen" 
             @keydown.escape.window="editModalOpen = false" 
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/60" 
             x-cloak
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0">
            <div @click.away="editModalOpen = false" 
                 class="bg-white dark:bg-slate-800 rounded-lg shadow-xl p-6 w-full max-w-lg mx-4"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform scale-95"
                 x-transition:enter-end="opacity-100 transform scale-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 transform scale-100"
                 x-transition:leave-end="opacity-0 transform scale-95">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium text-slate-900 dark:text-slate-100">Edit Feature</h3>
                    <button @click="editModalOpen = false" 
                            class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 rounded-md p-1">
                        <svg class="w-6 h-6" 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"></path>
                        </svg>
                    </button>
                </div>
                <form method="post">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="edit_feature">
                    <input type="hidden" name="feature_id" :value="featureToEdit.id">
                    <div class="space-y-4">
                        <div>
                            <label for="edit_name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Feature Name</label>
                            <input type="text" id="edit_name" name="name" :value="featureToEdit.name" required 
                                   class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-slate-900 dark:text-slate-100 transition">
                        </div>
                        <div>
                            <label for="edit_url_name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">URL Name</label>
                            <input type="text" id="edit_url_name" name="url_name" :value="featureToEdit.url_name" required 
                                   class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-slate-900 dark:text-slate-100 transition">
                        </div>
                        <div>
                            <label for="edit_description" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Description</label>
                            <textarea id="edit_description" name="description" rows="3" :value="featureToEdit.description" 
                                      class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-slate-900 dark:text-slate-100 transition"></textarea>
                        </div>
                        <div>
                            <label for="edit_category" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Category</label>
                            <input type="text" id="edit_category" name="category" :value="featureToEdit.category" 
                                   class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-slate-900 dark:text-slate-100 transition">
                        </div>
                        <div class="flex items-center">
                            <input id="edit_is_active" name="is_active" type="checkbox" :checked="featureToEdit.is_active"
                                   class="h-4 w-4 rounded border-slate-300 dark:border-slate-600 text-indigo-600 focus:ring-indigo-500 dark:bg-slate-700">
                            <label for="edit_is_active" class="ml-2 block text-sm text-slate-700 dark:text-slate-300">
                                Active (feature is available for assignment)
                            </label>
                        </div>
                    </div>
                    <div class="mt-6 flex justify-end space-x-3">
                        <button type="button" @click="editModalOpen = false" 
                                class="px-4 py-2 bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-200 font-semibold rounded-md hover:bg-slate-200 dark:hover:bg-slate-600 transition focus:outline-none focus:ring-2 focus:ring-slate-500">
                            Cancel
                        </button>
                        <button type="submit" 
                                class="px-4 py-2 bg-indigo-600 text-white font-semibold rounded-md hover:bg-indigo-700 transition focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Enhanced debugging and Alpine.js initialization
    console.log('�� Feature Management page loading...');
    
    document.addEventListener('DOMContentLoaded', function() {
        console.log('📄 DOM loaded, initializing Alpine.js...');
        
        // Check Alpine.js availability
        setTimeout(function() {
            if (window.Alpine) {
                console.log('✅ Alpine.js is available:', window.Alpine);
                console.log('🔧 Alpine version:', window.Alpine.version);
            } else {
                console.error('❌ Alpine.js is not available!');
            }
        }, 100);
    });
</script>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
{% endblock %}