@extends('layouts.dashboard')

@section('title', trans('dashboard.apikeys_page_title'))
@section('header_title', trans('dashboard.apikeys_header'))

@section('content')
<div class="max-w-4xl mx-auto space-y-8 text-xs">

    <!-- Alert for newly generated key -->
    @if(session('new_raw_key'))
        <div class="p-6 rounded-2xl bg-emerald-500/10 border-2 border-emerald-500/40 text-emerald-300">
            <h3 class="text-sm font-black mb-2 flex items-center gap-2">
                <i class="fa-solid fa-key"></i> {{ trans('dashboard.keep_key_secret_title') }}
            </h3>
            <p class="text-[11px] text-slate-300 mb-3">
                {{ trans('dashboard.keep_key_secret_desc') }}
            </p>
            <div class="p-3 rounded-xl bg-navy-950 border border-emerald-500/30 code-font text-sm text-emerald-400 font-bold select-all break-all" dir="ltr">
                {{ session('new_raw_key') }}
            </div>
        </div>
    @endif

    <!-- API Documentation & Interactive Runner Banner -->
    <div class="bg-gradient-to-r from-brand-500/10 via-brand-500/5 to-white dark:from-brand-600/15 dark:via-navy-900 dark:to-navy-900 border border-brand-500/30 rounded-2xl p-5 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 shadow-sm dark:shadow-none">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-brand-500/10 border border-brand-500/20 flex items-center justify-center text-brand-600 dark:text-brand-400 text-xl shrink-0">
                <i class="fa-solid fa-code"></i>
            </div>
            <div>
                <h4 class="text-sm font-bold text-slate-900 dark:text-white">{{ trans('dashboard.api_docs_banner_title') }}</h4>
                <p class="text-slate-600 dark:text-slate-400 text-xs mt-0.5">{{ trans('dashboard.api_docs_banner_desc') }}</p>
            </div>
        </div>
        <a href="{{ route('dashboard.docs.index') }}" class="px-4 py-2.5 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold text-xs flex items-center gap-2 shadow-lg shadow-brand-500/20 whitespace-nowrap transition force-white">
            <i class="fa-solid fa-play text-[10px]"></i>
            <span>{{ trans('dashboard.api_docs_banner_btn') }}</span>
        </a>
    </div>

    <!-- Create API Key -->
    <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 sm:p-8">
        <h3 class="text-sm font-bold text-white mb-2">{{ trans('dashboard.generate_key_heading') }}</h3>
        <p class="text-slate-400 text-xs mb-6">
            {!! trans('dashboard.generate_key_desc', ['header' => '<code class="code-font text-brand-400 bg-navy-950 px-2 py-0.5 rounded">X-API-Key</code>']) !!}
        </p>

        <form action="{{ route('dashboard.apikeys.store') }}" method="POST" class="flex flex-col sm:flex-row items-end gap-4">
            @csrf
            <div class="flex-1 w-full">
                <label class="block font-bold text-slate-300 mb-1">{{ trans('dashboard.key_name_label') }}</label>
                <input type="text" name="name" placeholder="{{ trans('dashboard.key_name_placeholder') }}" required class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-brand-500 focus:outline-none transition">
            </div>

            <div class="w-full sm:w-48">
                <label class="block font-bold text-slate-300 mb-1">{{ trans('dashboard.environment_label') }}</label>
                <select name="environment" class="w-full rounded-xl bg-navy-950 border border-slate-700 text-slate-100 p-3 focus:border-brand-500 focus:outline-none transition">
                    <option value="sandbox">{{ trans('dashboard.env_sandbox') }}</option>
                    <option value="production">{{ trans('dashboard.env_production') }}</option>
                </select>
            </div>

            <button type="submit" class="w-full sm:w-auto px-6 py-3 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold whitespace-nowrap shadow-lg shadow-brand-500/20 transition">
                {{ trans('dashboard.create_key_btn') }}
            </button>
        </form>
    </div>

    <!-- API Keys List -->
    <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6">
        <h3 class="text-sm font-bold text-white mb-4">{{ trans('dashboard.active_keys_heading') }}</h3>
        <div class="overflow-x-auto">
            <table class="w-full text-start text-xs">
                <thead class="text-slate-400 border-b border-slate-800">
                    <tr>
                        <th class="pb-3 text-start">{{ trans('dashboard.th_name') }}</th>
                        <th class="pb-3 text-start">{{ trans('dashboard.th_prefix') }}</th>
                        <th class="pb-3 text-start">{{ trans('dashboard.th_env') }}</th>
                        <th class="pb-3 text-start">{{ trans('dashboard.th_requests') }}</th>
                        <th class="pb-3 text-start">{{ trans('dashboard.th_created_at') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60 text-slate-300">
                    @forelse($apiKeys as $key)
                        <tr>
                            <td class="py-3 font-bold text-white">{{ $key->name }}</td>
                            <td class="py-3 code-font text-slate-400">{{ $key->key_prefix }}</td>
                            <td class="py-3">
                                @if($key->environment === 'production')
                                    <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 font-bold text-[10px]">Live</span>
                                @else
                                    <span class="px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-400 font-bold text-[10px]">Sandbox</span>
                                @endif
                            </td>
                            <td class="py-3 code-font">{{ trans('dashboard.requests_count_label', ['count' => $key->requests_count]) }}</td>
                            <td class="py-3 text-[11px] text-slate-500">{{ $key->created_at->format('Y-m-d') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-6 text-slate-500">{{ trans('dashboard.no_keys_yet') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection