<?php

use Illuminate\Support\Facades\Auth;
use Livewire\Volt\Component;

new class extends Component
{
    public string $token = '';
    public string $tokenName = 'My Token';
    public array $tokens = [];

    public function mount()
    {
        $this->loadTokens();
    }

    public function newToken(): void
    {
        $user = Auth::user();

        // 從 Spatie 權限套件取得權限名稱作為 abilities
        $abilities = $user->getAllPermissions()->pluck('name')->toArray();

        $token = $user->createToken($this->tokenName, $abilities);

        $this->token = $token->plainTextToken;
        $user->api_plain_token=$this->token;
        $user->save();
        $this->loadTokens();

        session()->flash('status', 'Token created!');
    }

    public function loadTokens()
    {
        $this->tokens = Auth::user()
            ->tokens()
            ->get()
            ->map(function ($token) {
                return [
                    'name' => $token->name,
                    'abilities' => $token->abilities,
                    'last_used_at' => $token->last_used_at,
                    'created_at' => $token->created_at->toDateTimeString(),
                ];
            })->toArray();
    }

    public function deleteToken($name)
    {
        Auth::user()->tokens()->where('name', $name)->delete();
        $this->loadTokens();
    }
};
?>

<section class="space-y-6">
    <header>
        <h2 class="text-lg font-medium text-gray-900">
            {{ __('New API Token') }}
        </h2>

        <p class="mt-1 text-sm text-gray-600">
            {{ __('Create a new personal access token.') }}
        </p>
    </header>

    <form wire:submit="newToken" class="space-y-4">
        <div>
            <x-input-label for="tokenName" value="Token Name" />
            <x-text-input id="tokenName" wire:model.defer="tokenName" class="mt-1 block w-full" required />
        </div>

        <div>
            <x-primary-button>{{ __('Create Token') }}</x-primary-button>
        </div>

        @if($token)
            <div class="mt-4">
                <x-input-label value="New Token" />
                <x-wireui:textarea readonly rows="2" class="mt-1 w-full">{{ $token }}</x-wireui:textarea>
                <p class="text-xs text-gray-500 mt-1">Please copy this token now. You won't be able to see it again.</p>
            </div>
        @endif
    </form>

    <div class="mt-6">
        <h3 class="text-md font-semibold text-gray-800 mb-2">Existing Tokens ({{ count($tokens) }})</h3>

        @forelse ($tokens as $token)
            <div class="p-3 mb-2 border rounded bg-gray-50">
                <div><strong>Name:</strong> {{ $token['name'] }}</div>
                <div><strong>Abilities:</strong> {{ implode(', ', $token['abilities']) }}</div>
                <div><strong>Created At:</strong> {{ $token['created_at'] }}</div>
                <div><strong>Last Used:</strong> {{ $token['last_used_at'] ?? 'Never' }}</div>

                <button wire:click="deleteToken('{{ $token['name'] }}')" class="mt-2 text-sm text-red-600 hover:underline">Delete</button>
            </div>
        @empty
            <p class="text-sm text-gray-500">No tokens created yet.</p>
        @endforelse
    </div>
</section>
