{% 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="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>
{% 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 %}
