@extends('layouts.admin')

@section('title', 'Gestion des Fonctionnalités')

@section('content')
<div class="feature-wrapper">
    <!-- Hero -->
    <div class="feature-hero mb-4">
        <div>
            <p class="hero-eyebrow">Pilotage produit</p>
            <h1 class="hero-title">Gestion des fonctionnalités</h1>
            <p class="hero-subtitle">Activez, désactivez et organisez les capacités clés de votre plateforme.</p>
        </div>
        <div class="hero-actions">
            <a href="{{ route('admin.features.config-all') }}" class="btn btn-light me-2">
                <i class="bi bi-sliders me-2"></i>Configuration avancée
            </a>
            @if(app()->environment('local', 'development'))
            <a href="{{ route('admin.features.initialize') }}" class="btn btn-outline-light btn-ghost">
                <i class="bi bi-database-add me-2"></i>Initialiser les fonctionnalités
            </a>
            @endif
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-circle me-2"></i> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Stats cards -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="stat-card gradient-blue">
                <div class="stat-icon"><i class="bi bi-toggle-on"></i></div>
                <div>
                    <p class="stat-label">Activées</p>
                    <h3 class="stat-value">{{ $features->where('is_enabled', true)->count() }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card gradient-amber">
                <div class="stat-icon"><i class="bi bi-toggle-off"></i></div>
                <div>
                    <p class="stat-label">Désactivées</p>
                    <h3 class="stat-value">{{ $features->where('is_enabled', false)->count() }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card gradient-cyan">
                <div class="stat-icon"><i class="bi bi-gear"></i></div>
                <div>
                    <p class="stat-label">Total</p>
                    <h3 class="stat-value">{{ $features->count() }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card gradient-green">
                <div class="stat-icon"><i class="bi bi-grid-3x3-gap"></i></div>
                <div>
                    <p class="stat-label">Catégories</p>
                    <h3 class="stat-value">{{ count($categories) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Tableau principal -->
        <div class="col-lg-8">
            <div class="panel-card h-100">
                <div class="panel-header">
                    <div>
                        <p class="panel-eyebrow">Inventaire</p>
                        <h5 class="mb-0">Toutes les fonctionnalités</h5>
                    </div>
                    <label class="toggle-switch mb-0">
                        <input type="checkbox" id="showDisabled" checked>
                        <span class="switch-slider"></span>
                        <span class="switch-label">Afficher désactivées</span>
                    </label>
                </div>

                <div class="table-responsive">
                    <table class="modern-table" id="featuresTable">
                        <thead>
                            <tr>
                                <th>Nom</th>
                                <th>Clé</th>
                                <th>Description</th>
                                <th>Catégorie</th>
                                <th>Statut</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($features as $feature)
                            <tr data-status="{{ $feature->is_enabled ? 'enabled' : 'disabled' }}">
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="bullet {{ $feature->is_enabled ? 'on' : 'off' }}"></div>
                                        <div>
                                            <strong>{{ $feature->name }}</strong><br>
                                            <small class="text-muted">{{ $feature->feature_key }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td><code class="code-pill">{{ $feature->feature_key }}</code></td>
                                <td class="text-muted">{{ $feature->description ?? '-' }}</td>
                                <td>
                                    <span class="badge rounded-pill bg-light text-dark">
                                        {{ $categories[$feature->category] ?? ucfirst($feature->category) }}
                                    </span>
                                </td>
                                <td>
                                    @if($feature->is_enabled)
                                    <span class="status-chip success"><span class="dot"></span>Activé</span>
                                    @else
                                    <span class="status-chip danger"><span class="dot"></span>Désactivé</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="btn-group" role="group">
                                        <form action="{{ route('admin.features.toggle', $feature->feature_key) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="btn btn-sm {{ $feature->is_enabled ? 'btn-outline-warning' : 'btn-outline-success' }}">
                                                @if($feature->is_enabled)
                                                    <i class="bi bi-toggle-off me-1"></i>Désactiver
                                                @else
                                                    <i class="bi bi-toggle-on me-1"></i>Activer
                                                @endif
                                            </button>
                                        </form>
                                        @if(!empty($feature->config))
                                        <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#configModal{{ $feature->id }}">
                                            <i class="bi bi-gear me-1"></i>Config
                                        </button>
                                        @endif
                                    </div>

                                    @if(!empty($feature->config))
                                    <div class="modal fade" id="configModal{{ $feature->id }}" tabindex="-1">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Configuration: {{ $feature->name }}</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <pre class="bg-light p-3 rounded"><code>{{ json_encode($feature->config, JSON_PRETTY_PRINT) }}</code></pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-5">
                                    <i class="bi bi-inbox fs-1 d-block mb-3"></i>
                                    Aucune fonctionnalité configurée.
                                    @if(app()->environment('local', 'development'))
                                    <div class="mt-2">
                                        <a href="{{ route('admin.features.initialize') }}" class="btn btn-outline-primary btn-sm">Initialiser les fonctionnalités</a>
                                    </div>
                                    @endif
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Panneau latéral -->
        <div class="col-lg-4">
            <div class="panel-card mb-4">
                <div class="panel-header">
                    <div>
                        <p class="panel-eyebrow">Vue synthétique</p>
                        <h6 class="mb-0">Par catégorie</h6>
                    </div>
                </div>
                <div class="category-grid">
                    @foreach($categories as $categoryKey => $categoryName)
                    @php
                        $categoryFeatures = $features->where('category', $categoryKey);
                        $enabledCount = $categoryFeatures->where('is_enabled', true)->count();
                        $totalCount = $categoryFeatures->count();
                        $percent = $totalCount > 0 ? round(($enabledCount / $totalCount) * 100) : 0;
                    @endphp
                    <div class="category-card">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div>
                                <h6 class="mb-0">{{ $categoryName }}</h6>
                                <small class="text-muted">{{ $enabledCount }} / {{ $totalCount }} activées</small>
                            </div>
                            <span class="badge bg-primary-subtle text-primary">{{ $percent }}%</span>
                        </div>
                        <div class="progress soft">
                            <div class="progress-bar" role="progressbar" style="width: {{ $percent }}%" aria-valuenow="{{ $percent }}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="feature-chips">
                            @foreach($categoryFeatures as $feature)
                                <span class="chip {{ $feature->is_enabled ? 'chip-on' : 'chip-off' }}">
                                    {{ $feature->name }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="panel-card">
                <div class="panel-header">
                    <div>
                        <p class="panel-eyebrow">Guides</p>
                        <h6 class="mb-0">Bonnes pratiques</h6>
                    </div>
                </div>
                <ul class="best-practice">
                    <li><i class="bi bi-check2-circle"></i> Groupez par logique métier claire.</li>
                    <li><i class="bi bi-check2-circle"></i> Évitez de laisser des features critiques désactivées en prod.</li>
                    <li><i class="bi bi-check2-circle"></i> Documentez chaque clé pour l'équipe.</li>
                    <li><i class="bi bi-check2-circle"></i> Validez en staging avant bascule.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
:root {
    --card-radius: 16px;
    --shadow-soft: 0 12px 40px rgba(15, 23, 42, 0.08);
    --border-soft: 1px solid rgba(0,0,0,0.05);
}

.feature-wrapper {
    padding: 8px 0 24px;
}

.feature-hero {
    padding: 24px 28px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1f2937, #111827);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-soft);
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 6px;
}

.hero-title {
    font-weight: 800;
    margin-bottom: 6px;
}

.hero-subtitle {
    margin: 0;
    color: rgba(255,255,255,0.75);
}

.btn-ghost {
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    background: rgba(255,255,255,0.05);
    transition: all 0.25s ease;
}

.btn-ghost:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-1px);
}

.stat-card {
    border-radius: var(--card-radius);
    padding: 18px;
    color: white;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-soft);
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255,255,255,0.15);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
}

.stat-label {
    margin: 0;
    opacity: 0.8;
    font-weight: 600;
    font-size: 0.9rem;
}

.stat-value {
    margin: 2px 0 0;
    font-weight: 800;
}

.gradient-blue { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.gradient-amber { background: linear-gradient(135deg, #f59e0b, #f97316); }
.gradient-cyan { background: linear-gradient(135deg, #06b6d4, #0ea5e9); }
.gradient-green { background: linear-gradient(135deg, #10b981, #22c55e); }

.panel-card {
    background: white;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-soft);
    border: var(--border-soft);
    overflow: hidden;
}

.panel-header {
    padding: 18px 20px;
    border-bottom: var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
}

.modern-table thead {
    background: #f8fafc;
}

.modern-table th {
    padding: 14px 16px;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 700;
    border-bottom: var(--border-soft);
}

.modern-table td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: var(--border-soft);
}

.modern-table tr:hover td {
    background: #f9fafb;
}

.bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.bullet.on { background: #10b981; }
.bullet.off { background: #ef4444; }

.code-pill {
    background: #f1f5f9;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #0f172a;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid transparent;
}
.status-chip .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.status-chip.success { background: #ecfdf3; color: #15803d; border-color: #bbf7d0; }
.status-chip.success .dot { background: #22c55e; }
.status-chip.danger { background: #fef2f2; color: #b91c1c; border-color: #fecdd3; }
.status-chip.danger .dot { background: #ef4444; }

.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input { display: none; }

.switch-slider {
    width: 46px;
    height: 26px;
    background: #e5e7eb;
    border-radius: 999px;
    position: relative;
    transition: all 0.25s ease;
}

.switch-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    transition: all 0.25s ease;
}

.toggle-switch input:checked + .switch-slider {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.toggle-switch input:checked + .switch-slider::after {
    transform: translateX(20px);
}

.switch-label {
    font-weight: 600;
    color: #1f2937;
}

.category-grid {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.category-card {
    border: var(--border-soft);
    border-radius: 12px;
    padding: 14px;
    background: #f8fafc;
}

.progress.soft {
    height: 10px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress.soft .progress-bar {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.feature-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}
.chip-on { background: #ecfdf3; color: #15803d; }
.chip-off { background: #fef2f2; color: #b91c1c; }

.best-practice {
    list-style: none;
    padding: 14px 16px 18px;
    margin: 0;
}
.best-practice li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: var(--border-soft);
    color: #374151;
}
.best-practice li:last-child { border-bottom: none; }
.best-practice i { color: #22c55e; }

@media (max-width: 992px) {
    .feature-hero { flex-direction: column; align-items: flex-start; }
    .hero-actions { width: 100%; }
}

@media (max-width: 768px) {
    .panel-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .modern-table th, .modern-table td { padding: 10px; }
    .stat-card { flex-direction: row; }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const showDisabledCheckbox = document.getElementById('showDisabled');
    const featuresTable = document.getElementById('featuresTable');

    if (showDisabledCheckbox && featuresTable) {
        showDisabledCheckbox.addEventListener('change', function() {
            const rows = featuresTable.querySelectorAll('tbody tr');
            rows.forEach(row => {
                if (row.dataset.status === 'disabled') {
                    row.style.display = this.checked ? '' : 'none';
                }
            });
        });
    }

    const toggleForms = document.querySelectorAll('form[action*="/toggle"]');
    toggleForms.forEach(form => {
        form.addEventListener('submit', function(e) {
            const row = this.closest('tr');
            const strongElement = row ? row.querySelector('strong') : null;
            const featureName = strongElement ? strongElement.textContent : 'cette fonctionnalité';

            if (!confirm(`Êtes-vous sûr de vouloir modifier l'état de "${featureName}" ?`)) {
                e.preventDefault();
            }
        });
    });
});
</script>
@endpush
@endsection
