@extends('admin.layouts.app')

@section('title', 'Configurations API')
@section('header', 'Configurations API')

@section('content')
    <div class="max-w-7xl mx-auto space-y-8" x-data="{ 
        addModalOpen: false, 
        editModalOpen: false,
        editingConfig: null,
        editUrl: '',
        copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                // You could add a toast notification here
                alert('Copié !'); 
            });
        },
        openEdit(config, url) {
            this.editingConfig = config;
            this.editUrl = url;
            this.editModalOpen = true;
        }
    }">
        
        <!-- Header & Actions -->
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Gestion des APIs</h1>
                <p class="text-slate-500 dark:text-slate-400 mt-1">Gérez les clés d'API et les secrets pour vos services tiers.</p>
            </div>
            <button @click="addModalOpen = true" class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all transform hover:scale-105">
                <i class="fas fa-plus mr-2"></i> Ajouter une Configuration
            </button>
        </div>

        @if(session('success'))
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)" class="p-4 rounded-lg bg-green-50 dark:bg-green-900/30 text-green-800 dark:text-green-400 border border-green-200 dark:border-green-800 flex items-center justify-between shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-check-circle mr-2"></i>
                    <span class="font-medium">{{ session('success') }}</span>
                </div>
                <button @click="show = false" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        @endif

        @if($errors->any())
            <div class="p-4 rounded-lg bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-400 border border-red-200 dark:border-red-800 shadow-sm">
                <ul class="list-disc list-inside space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if($configurations->isEmpty())
            <div class="glass rounded-xl p-12 text-center border border-dashed border-slate-300 dark:border-slate-700">
                <div class="w-16 h-16 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-cogs text-2xl text-slate-400"></i>
                </div>
                <h3 class="text-lg font-medium text-slate-900 dark:text-white">Aucune configuration</h3>
                <p class="text-slate-500 dark:text-slate-400 max-w-sm mx-auto mt-2">Commencez par ajouter votre première clé d'API pour connecter vos services.</p>
                <button @click="addModalOpen = true" class="mt-6 text-blue-600 dark:text-blue-400 font-medium hover:underline">
                    Ajouter maintenant &rarr;
                </button>
            </div>
        @else
            <div class="grid grid-cols-1 gap-6">
                @foreach($configurations as $service => $configs)
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
                        <!-- Service Header -->
                        <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 flex justify-between items-center">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400">
                                    <i class="fas fa-cube text-lg"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-slate-800 dark:text-white capitalize leading-tight">
                                        {{ $service }}
                                    </h3>
                                    <p class="text-xs text-slate-500 dark:text-slate-400">{{ $configs->count() }} clés configurées</p>
                                </div>
                            </div>
                            <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 border border-green-200 dark:border-green-800">
                                Actif
                            </span>
                        </div>
                        
                        <!-- Configs Table -->
                        <div class="overflow-x-auto">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="text-xs font-semibold tracking-wide text-slate-500 dark:text-slate-400 uppercase bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-700">
                                        <th class="px-6 py-3">Clé / Identifiant</th>
                                        <th class="px-6 py-3">Valeur</th>
                                        <th class="px-6 py-3 text-center">État</th>
                                        <th class="px-6 py-3 text-right">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                                    @foreach($configs as $config)
                                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors group">
                                            <td class="px-6 py-4">
                                                <div class="font-medium text-slate-900 dark:text-white font-mono">{{ $config->key }}</div>
                                            </td>
                                            <td class="px-6 py-4">
                                                <div class="flex items-center gap-2 max-w-md" x-data="{ revealed: false }">
                                                    <div class="relative flex-1 bg-slate-100 dark:bg-slate-900 rounded-md px-3 py-2 font-mono text-sm text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-700 overflow-hidden">
                                                        <span x-show="!revealed" class="tracking-widest filter blur-[2px] select-none">••••••••••••••••••••••••</span>
                                                        <span x-show="revealed" x-cloak class="break-all">{{ $config->value }}</span>
                                                    </div>
                                                    <button @click="revealed = !revealed" class="p-2 text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" title="Afficher/Masquer">
                                                        <i class="fas" :class="revealed ? 'fa-eye-slash' : 'fa-eye'"></i>
                                                    </button>
                                                    <button @click="copyToClipboard('{{ $config->value }}')" class="p-2 text-slate-400 hover:text-green-600 dark:hover:text-green-400 transition-colors" title="Copier">
                                                        <i class="fas fa-copy"></i>
                                                    </button>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 text-center">
                                                <form action="{{ route('admin.api-configurations.update', $config) }}" method="POST" class="inline-block">
                                                    @csrf
                                                    @method('PUT')
                                                    <input type="hidden" name="is_active" value="{{ $config->is_active ? '0' : '1' }}">
                                                    <button type="submit" 
                                                        class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 {{ $config->is_active ? 'bg-blue-600' : 'bg-slate-200 dark:bg-slate-700' }}"
                                                        title="{{ $config->is_active ? 'Désactiver' : 'Activer' }}">
                                                        <span class="sr-only">Toggle status</span>
                                                        <span aria-hidden="true" class="{{ $config->is_active ? 'translate-x-5' : 'translate-x-0' }} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
                                                    </button>
                                                </form>
                                            </td>
                                            <td class="px-6 py-4 text-right">
                                                <div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                                    <button @click="openEdit({{ json_encode($config) }}, '{{ route('admin.api-configurations.update', $config) }}')" 
                                                        class="p-2 bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-lg text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-slate-600 transition-colors shadow-sm">
                                                        <i class="fas fa-pen"></i>
                                                    </button>
                                                    
                                                    <form action="{{ route('admin.api-configurations.destroy', $config) }}" method="POST" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette configuration ?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="p-2 bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-lg text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-slate-600 transition-colors shadow-sm">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        <!-- Add Configuration Modal -->
        <div x-show="addModalOpen" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div x-show="addModalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-slate-900/75 transition-opacity" aria-hidden="true" @click="addModalOpen = false"></div>

                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                <div x-show="addModalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="inline-block align-bottom bg-white dark:bg-slate-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
                    <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-900/50">
                        <h3 class="text-lg leading-6 font-bold text-slate-900 dark:text-white" id="modal-title">
                            Nouvelle Configuration
                        </h3>
                        <button @click="addModalOpen = false" class="text-slate-400 hover:text-slate-500 focus:outline-none">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <form action="{{ route('admin.api-configurations.store') }}" method="POST">
                        @csrf
                        <div class="px-6 py-6 space-y-4">
                            <div>
                                <label for="service_name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Service</label>
                                <div class="relative rounded-md shadow-sm">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-cube text-slate-400"></i>
                                    </div>
                                    <input type="text" name="service_name" id="service_name" class="pl-10 w-full rounded-lg border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="ex: openai" required>
                                </div>
                                <p class="mt-1 text-xs text-slate-500">Le nom du service (ex: stripe, aws, openai).</p>
                            </div>
                            
                            <div>
                                <label for="key" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Clé / Nom</label>
                                <div class="relative rounded-md shadow-sm">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-key text-slate-400"></i>
                                    </div>
                                    <input type="text" name="key" id="key" class="pl-10 w-full rounded-lg border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="ex: api_key" required>
                                </div>
                            </div>
                            
                            <div>
                                <label for="value" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Valeur</label>
                                <textarea name="value" id="value" rows="3" class="w-full rounded-lg border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 sm:text-sm font-mono" placeholder="Collez la valeur secrète ici..."></textarea>
                            </div>
                        </div>
                        <div class="px-6 py-4 bg-slate-50 dark:bg-slate-900/50 flex flex-row-reverse gap-2">
                            <button type="submit" class="w-full sm:w-auto inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
                                Ajouter
                            </button>
                            <button type="button" @click="addModalOpen = false" class="w-full sm:w-auto inline-flex justify-center rounded-lg border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
                                Annuler
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Edit Configuration Modal -->
        <div x-show="editModalOpen" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" style="display: none;">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div x-show="editModalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-slate-900/75 transition-opacity" aria-hidden="true" @click="editModalOpen = false"></div>

                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                <div x-show="editModalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="inline-block align-bottom bg-white dark:bg-slate-800 rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full">
                    <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-900/50">
                        <h3 class="text-lg leading-6 font-bold text-slate-900 dark:text-white" id="modal-title">
                            Modifier la Configuration
                        </h3>
                        <button @click="editModalOpen = false" class="text-slate-400 hover:text-slate-500 focus:outline-none">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                    <form :action="editUrl" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="px-6 py-6 space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">Service & Clé</label>
                                <div class="flex gap-2">
                                     <input type="text" :value="editingConfig?.service_name" disabled class="w-1/3 rounded-lg border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-500 sm:text-sm">
                                     <input type="text" :value="editingConfig?.key" disabled class="w-2/3 rounded-lg border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 text-slate-500 sm:text-sm">
                                </div>
                            </div>
                            
                            <div>
                                <label for="edit_value" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Nouvelle Valeur</label>
                                <textarea name="value" id="edit_value" rows="4" class="w-full rounded-lg border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 sm:text-sm font-mono" x-bind:value="editingConfig?.value"></textarea>
                            </div>
                        </div>
                        <div class="px-6 py-4 bg-slate-50 dark:bg-slate-900/50 flex flex-row-reverse gap-2">
                            <button type="submit" class="w-full sm:w-auto inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
                                Enregistrer
                            </button>
                            <button type="button" @click="editModalOpen = false" class="w-full sm:w-auto inline-flex justify-center rounded-lg border border-slate-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
                                Annuler
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection