@extends('layouts.app')
@section('title', 'API Key Management')
@section('content')
<div class="mx-auto max-w-(--breakpoint-2xl) p-4 pb-20 md:p-6 md:pb-6" x-data="{ isOffCanvasOpen: false }">
   <!-- Breadcrumb Start -->
   <div x-data="{ pageName: `API Keys`}">
      <div class="flex flex-wrap items-center justify-between gap-3 pb-6">
         <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>
         <nav>
            <ol class="flex items-center gap-1.5">
               <li>
                  <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('dashboard') }}">
                     Home
                     <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke="" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
                  </a>
               </li>
               <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
            </ol>
         </nav>
      </div>
   </div>
   <!-- Breadcrumb End -->

   @if(session('new_api_key'))
   <!-- Success Message for New Key (Show only once) -->
   <div class="mb-6 rounded-2xl border border-green-200 bg-green-50 p-5 dark:border-green-900/30 dark:bg-green-500/10">
        <h4 class="text-lg font-semibold text-green-800 dark:text-green-400">Key Generated Successfully!</h4>
        <p class="text-sm text-green-700 dark:text-green-500 mb-4">Please copy this key now. For security reasons, you cannot see it again.</p>
        <div class="flex items-center gap-3">
            <input type="text" id="plain_api_key" readonly value="{{ session('new_api_key') }}" class="dark:bg-dark-900 h-11 w-full max-w-lg rounded-lg border border-green-300 bg-white px-4 text-sm text-gray-800 focus:outline-none dark:border-green-800 dark:text-white">
            <button onclick="copyPlainKey()" class="bg-green-600 px-4 py-2.5 rounded-lg text-white text-sm font-medium hover:bg-green-700 transition">Copy Key</button>
        </div>
   </div>
   <script>
       function copyPlainKey() {
           const copyText = document.getElementById("plain_api_key");
           navigator.clipboard.writeText(copyText.value);
           alert("API Key copied to clipboard!");
       }
   </script>
   @endif

   <div class="rounded-2xl border border-gray-200 bg-white p-5 lg:p-6 dark:border-gray-800 dark:bg-white/[0.03]">
      <div class="flex flex-col justify-between gap-5 border-b border-gray-100 py-4 sm:flex-row sm:items-center dark:border-gray-800">
         <div>
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">API Keys</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Manage multiple API keys for different environments and applications.</p>
         </div>
         <div>
            <button @click="isOffCanvasOpen = true" class="bg-brand-500 hover:bg-brand-600 inline-flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium text-white transition">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path d="M5 10.0002H15.0006M10.0002 5V15.0006" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
               </svg>
               Add API Key
            </button>
         </div>
      </div>

      <!-- Off-Canvas Start -->
      <div 
         x-show="isOffCanvasOpen" 
         class="fixed inset-0 z-99999 overflow-hidden" 
         x-cloak>
         <!-- Backdrop -->
         <div 
            class="absolute inset-0 bg-gray-400/50 backdrop-blur-sm transition-opacity" 
            @click="isOffCanvasOpen = false"
            x-show="isOffCanvasOpen"
            x-transition:enter="ease-in-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in-out duration-300"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0">
         </div>

         <div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
            <div 
               class="w-screen max-w-md transform transition ease-in-out duration-300"
               x-show="isOffCanvasOpen"
               x-transition:enter="translate-x-full"
               x-transition:enter-end="translate-x-0"
               x-transition:leave="translate-x-0"
               x-transition:leave-end="translate-x-full"
               @click.outside="isOffCanvasOpen = false">
               
               <div class="flex h-full flex-col border-l border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-900">
                  <!-- Header -->
                  <div class="flex items-center justify-between border-b border-gray-100 p-6 dark:border-gray-800">
                     <h2 class="text-lg font-semibold text-gray-800 dark:text-white/90">Generate API Key</h2>
                     <button @click="isOffCanvasOpen = false" class="text-gray-400 hover:text-gray-700 dark:hover:text-white">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                           <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                     </button>
                  </div>

                  <!-- Form Content -->
                  <div class="relative flex-1 p-6">
                     <p class="mb-7 text-sm leading-6 text-gray-500 dark:text-gray-400">Assign a name and environment to your new API key. Keys are used to authenticate your requests safely.</p>
                     
                     <form action="{{ route('api_keys.store') }}" method="POST">
                        @csrf
                        <div class="space-y-6">
                           <div>
                              <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Key Name</label>
                              <input type="text" name="name" required placeholder="e.g. Mobile App" class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                           </div>
                           <div>
                              <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Environment</label>
                              <select name="environment" class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                 <option value="production">Production</option>
                                 <option value="development">Development</option>
                                 <option value="sandbox">Sandbox</option>
                              </select>
                           </div>
                        </div>

                        <div class="mt-10 flex flex-col gap-3">
                           <button type="submit" class="bg-brand-500 shadow-theme-xs hover:bg-brand-600 flex w-full justify-center rounded-lg px-4 py-3 text-sm font-medium text-white transition">
                              Generate API key
                           </button>
                           <button @click="isOffCanvasOpen = false" type="button" class="shadow-theme-xs flex w-full justify-center rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]">
                              Cancel
                           </button>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Off-Canvas End -->

      <div class="custom-scrollbar overflow-x-auto px-1 pb-4">
         <table class="min-w-full">
            <thead>
               <tr class="border-b border-gray-100 dark:border-gray-800">
                  <th class="py-3 pr-5 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Name / Prefix</th>
                  <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Environment</th>
                  <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Status</th>
                  <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Created</th>
                  <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Actions</th>
               </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
               @forelse($api_keys as $key)
               <tr x-data="keyRowHandler({ id: {{ $key->id }}, initialStatus: {{ $key->is_active ? 'true' : 'false' }} })">
                  <td class="py-3 pr-5 whitespace-nowrap">
                     <div class="font-medium text-gray-800 dark:text-white/90">{{ $key->name }}</div>
                     <div class="text-xs text-gray-500">{{ $key->key_prefix }}********************</div>
                  </td>
                  <td class="px-5 py-3 whitespace-nowrap">
                     <span class="rounded-lg bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400 uppercase">
                        {{ $key->environment }}
                     </span>
                  </td>
                  <td class="px-5 py-3 whitespace-nowrap">
                     <span x-text="status ? 'Active' : 'Inactive'"
                           :class="status ? 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500' : 'bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-500'"
                           class="inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-medium"></span>
                  </td>
                  <td class="px-5 py-3 text-sm text-gray-500 dark:text-gray-400">
                     {{ \Carbon\Carbon::parse($key->created_at)->format('d M, Y') }}
                  </td>
                  <td class="px-5 py-3 whitespace-nowrap">
                     <div class="flex items-center gap-4">
                        <!-- Toggle -->
                        <label class="cursor-pointer">
                           <div class="relative">
                              <input type="checkbox" class="sr-only" x-model="status" @change="toggleStatus"/>
                              <div class="block h-6 w-11 rounded-full transition-colors duration-200" :class="status ? 'bg-brand-500' : 'bg-gray-200 dark:bg-white/10'"></div>
                              <div class="shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-200 ease-linear transition-transform" :class="status ? 'translate-x-full': 'translate-x-0'"></div>
                           </div>
                        </label>
                        <!-- Delete -->
                        <form action="{{ route('api_keys.delete', $key->id) }}" method="POST" onsubmit="return confirm('Permanently delete this key?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-gray-500 hover:text-error-600 transition">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <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" />
                                </svg>
                            </button>
                        </form>
                     </div>
                  </td>
               </tr>
               @empty
               <tr>
                  <td colspan="5" class="py-10 text-center text-sm text-gray-500">No API keys found.</td>
               </tr>
               @endforelse
            </tbody>
         </table>
      </div>
   </div>
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('keyRowHandler', (config) => ({
        id: config.id,
        status: config.initialStatus,
        async toggleStatus() {
            try {
                const response = await fetch("{{ route('api_keys.toggle') }}", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ id: this.id, status: this.status })
                });
                const data = await response.json();
                if (!data.success) throw new Error();
            } catch (e) {
                this.status = !this.status;
                alert('Update failed');
            }
        }
    }));
});
</script>

<style>
    [x-cloak] { display: none !important; }
</style>
@endsection