@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">
   <!-- 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" readonly value="{{ session('new_api_key') }}" class="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">
            <button onclick="navigator.clipboard.writeText('{{ session('new_api_key') }}'); alert('Copied!')" class="bg-green-600 px-4 py-2.5 rounded-lg text-white text-sm font-medium hover:bg-green-700">Copy Key</button>
        </div>
   </div>
   @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 x-data="{isModalOpen: false}">
            <button @click="isModalOpen = 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>

            <!-- Generate Key Modal -->
            <div x-show="isModalOpen" class="fixed inset-0 z-99999 flex items-center justify-center overflow-y-auto p-5" x-cloak>
               <div class="fixed inset-0 h-full w-full bg-gray-400/50 backdrop-blur-[32px]"></div>
               <div @click.outside="isModalOpen = false" class="relative w-full max-w-[600px] rounded-3xl bg-white p-6 lg:p-10 dark:bg-gray-900">
                  <h4 class="text-title-sm mb-1 font-semibold text-gray-800 dark:text-white/90">Generate API key</h4>
                  <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.</p>
                  
                  <form action="{{ route('api_keys.store') }}" method="POST">
                     @csrf
                     <div class="space-y-4">
                        <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 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm dark:border-gray-700 dark:text-white">
                        </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 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 text-sm dark:border-gray-700 dark:text-white">
                              <option value="production">Production</option>
                              <option value="development">Development</option>
                              <option value="sandbox">Sandbox</option>
                           </select>
                        </div>
                     </div>
                     <div class="mt-8 flex w-full items-center justify-between gap-3">
                        <button @click="isModalOpen = false" type="button" class="w-full justify-center rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400">Close</button>
                        <button type="submit" class="bg-brand-500 w-full justify-center rounded-lg px-4 py-3 text-sm font-medium text-white hover:bg-brand-600">Generate Key</button>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>

      <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">
               @foreach($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">
                                <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>
               @endforeach
            </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>
@endsection