@extends('layouts.cp')
@section('title', 'API Tokens')

@section('content')

<div class="bg-white rounded-xl border border-gray-200 p-6 mb-6">
    <h2 class="text-sm font-medium text-gray-900 mb-4">Generate Token</h2>
    <form method="POST" action="{{ route('cp.tokens.store') }}">
        @csrf
        <div class="grid grid-cols-2 lg:grid-cols-5 gap-3">
            <div>
                <label class="block text-xs text-gray-500 mb-1">Name</label>
                <input type="text" name="name" required placeholder="e.g. Web Administrasi Prod"
                       class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"/>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">For</label>
                <input type="text" name="for" required placeholder="e.g. web_administrasi"
                       class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"/>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Environment</label>
                <select name="environment"
                        class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
                    <option value="prod">Production</option>
                    <option value="dev">Development</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Status</label>
                <select name="status"
                        class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200">
                    <option value="active">Active (auto-rotate 24h)</option>
                    <option value="inactive">Inactive</option>
                    <option value="permanent">Permanent (dev only)</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-gray-500 mb-1">Note</label>
                <input type="text" name="note" placeholder="optional"
                       class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"/>
            </div>
        </div>
        <button type="submit"
            class="mt-4 px-4 py-2 text-sm bg-gray-900 text-white rounded-lg hover:bg-gray-700">
            Generate Token
        </button>
    </form>
</div>

<div class="bg-white rounded-xl border border-gray-200 p-6">
    @if($tokens->isEmpty())
        <p class="text-sm text-gray-400">No tokens yet.</p>
    @else
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-100">
                    <th class="text-left text-xs text-gray-400 font-medium pb-2">Name</th>
                    <th class="text-left text-xs text-gray-400 font-medium pb-2">Token</th>
                    <th class="text-left text-xs text-gray-400 font-medium pb-2">For</th>
                    <th class="text-left text-xs text-gray-400 font-medium pb-2">Env</th>
                    <th class="text-left text-xs text-gray-400 font-medium pb-2">Status</th>
                    <th class="text-left text-xs text-gray-400 font-medium pb-2">Expires</th>
                    <th class="pb-2"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach($tokens as $token)
                <tr>
                    <td class="py-3 font-medium text-gray-900">
                        {{ $token->name }}
                        @if($token->note)
                            <span class="text-xs text-gray-400 ml-1">— {{ $token->note }}</span>
                        @endif
                    </td>
                    <td class="py-3">
                        <div class="flex items-center gap-2">
                            <code class="text-xs bg-gray-50 px-2 py-1 rounded font-mono text-gray-600"
                                  id="token-{{ $token->id }}">
                                {{ substr($token->token, 0, 16) }}...
                            </code>
                            <button type="button"
                                onclick="copyToken('{{ $token->token }}')"
                                class="text-xs text-blue-600 hover:underline">Copy</button>
                            <button type="button"
                                onclick="toggleTokenVisibility({{ $token->id }}, '{{ $token->token }}')"
                                id="show-btn-{{ $token->id }}"
                                class="text-xs text-gray-400 hover:underline">Show</button>
                        </div>
                    </td>
                    <td class="py-3">
                        <span class="text-xs px-2 py-1 bg-gray-100 text-gray-600 rounded-full font-mono">
                            {{ $token->for }}
                        </span>
                    </td>
                    <td class="py-3">
                        <span class="text-xs px-2 py-1 rounded-full {{ $token->environment === 'prod' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-600' }}">
                            {{ $token->environment }}
                        </span>
                    </td>
                    <td class="py-3">
                        <form method="POST" action="{{ route('cp.tokens.status', $token) }}">
                            @csrf @method('PATCH')
                            <select name="status" onchange="this.form.submit()"
                                    class="border border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none
                                           {{ $token->status === 'active' ? 'text-green-700 bg-green-50' : ($token->status === 'permanent' ? 'text-orange-700 bg-orange-50' : 'text-gray-500 bg-gray-50') }}">
                                <option value="active"    {{ $token->status === 'active'    ? 'selected' : '' }}>Active</option>
                                <option value="inactive"  {{ $token->status === 'inactive'  ? 'selected' : '' }}>Inactive</option>
                                <option value="permanent" {{ $token->status === 'permanent' ? 'selected' : '' }}>Permanent</option>
                            </select>
                        </form>
                    </td>
                    <td class="py-3 text-xs text-gray-500">
                        @if($token->status === 'permanent')
                            <span class="text-orange-500">Never</span>
                        @elseif($token->expires_at)
                            @if($token->isExpired())
                                <span class="text-red-500">Expired</span>
                            @else
                                {{ $token->expires_at->diffForHumans() }}
                            @endif
                        @else
                            <span class="text-gray-400">—</span>
                        @endif
                    </td>
                    <td class="py-3">
                        <div class="flex items-center gap-3">
                            <form method="POST" action="{{ route('cp.tokens.regenerate', $token) }}">
                                @csrf
                                <button type="submit" class="text-xs text-blue-600 hover:underline"
                                    onclick="return confirm('Regenerate this token?')">
                                    Regenerate
                                </button>
                            </form>
                            <button type="button"
                                onclick="openHistory({{ $token->id }}, '{{ addslashes($token->name) }}')"
                                class="text-xs text-gray-500 hover:underline">
                                History
                            </button>
                            <form method="POST" action="{{ route('cp.tokens.destroy', $token) }}">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-xs text-red-500 hover:underline"
                                    onclick="return confirm('Delete this token?')">Delete</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

{{-- History Modal --}}
<div id="history-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/30" onclick="closeHistory()"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-xl w-full max-w-2xl p-6">
        <div class="flex items-center justify-between mb-5">
            <div>
                <h3 class="text-sm font-semibold text-gray-900">Token History</h3>
                <p class="text-xs text-gray-400 mt-0.5" id="history-token-name"></p>
            </div>
            <button onclick="closeHistory()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div id="history-content" class="max-h-96 overflow-y-auto">
            <p class="text-sm text-gray-400">Loading...</p>
        </div>
    </div>
</div>

<script>
let tokenVisible = {};

function copyToken(token) {
    navigator.clipboard.writeText(token).then(() => {
        const btn = event.target;
        btn.textContent = 'Copied!';
        setTimeout(() => btn.textContent = 'Copy', 2000);
    });
}

function toggleTokenVisibility(id, fullToken) {
    const el = document.getElementById(`token-${id}`);
    const btn = document.getElementById(`show-btn-${id}`);
    if (tokenVisible[id]) {
        el.textContent = fullToken.substring(0, 16) + '...';
        btn.textContent = 'Show';
        tokenVisible[id] = false;
    } else {
        el.textContent = fullToken;
        btn.textContent = 'Hide';
        tokenVisible[id] = true;
    }
}

function openHistory(tokenId, tokenName) {
    document.getElementById('history-token-name').textContent = tokenName;
    document.getElementById('history-content').innerHTML = '<p class="text-sm text-gray-400">Loading...</p>';
    document.getElementById('history-modal').classList.remove('hidden');

    fetch(`/cp/tokens/${tokenId}/history`)
        .then(r => r.json())
        .then(histories => {
            if (histories.length === 0) {
                document.getElementById('history-content').innerHTML =
                    '<p class="text-sm text-gray-400">No history yet.</p>';
                return;
            }

            const reasonColors = {
                'auto_rotate':       'bg-blue-100 text-blue-700',
                'manual_regenerate': 'bg-purple-100 text-purple-700',
                'deactivated':       'bg-red-100 text-red-700',
            };

            let html = `<table class="w-full text-xs">
                <thead>
                    <tr class="border-b border-gray-100">
                        <th class="text-left text-gray-400 font-medium pb-2">Time</th>
                        <th class="text-left text-gray-400 font-medium pb-2">Reason</th>
                        <th class="text-left text-gray-400 font-medium pb-2">Old Token</th>
                        <th class="text-left text-gray-400 font-medium pb-2">New Token</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">`;

            histories.forEach(h => {
                html += `<tr>
                    <td class="py-2 text-gray-400">${h.rotated_at}</td>
                    <td class="py-2">
                        <span class="px-2 py-0.5 rounded-full ${reasonColors[h.reason] || 'bg-gray-100 text-gray-600'}">
                            ${h.reason.replace('_', ' ')}
                        </span>
                    </td>
                    <td class="py-2 font-mono text-gray-500">${h.old_token.substring(0, 12)}...</td>
                    <td class="py-2 font-mono text-gray-500">${h.new_token.substring(0, 12)}...</td>
                </tr>`;
            });

            html += '</tbody></table>';
            document.getElementById('history-content').innerHTML = html;
        });
}

function closeHistory() {
    document.getElementById('history-modal').classList.add('hidden');
}
</script>

@endsection