<?php

use App\Concerns\HandlesOperations;
use App\Enums\Permissions\AppPermissionEnum;
use App\Enums\ConnectionStatusEnum;
use App\Models\{ConnectedApp, ConnectionStatus};
use Livewire\Component;
use Livewire\Attributes\Title;
use Livewire\WithFileUploads;
use Laravel\Passport\Client;
use App\Services\Applications\OIDC\{OidcService, OidcConfigResolver};
use App\Services\ConnectedAppService;
use App\Services\ApplicationLogoUploader;
use App\Data\ConnectedApp\ConnectAppRequest;
use App\Livewire\Concerns\WithRepeaterFields;

new #[Title('OIDC Application Details')]
class extends Component {
    use HandlesOperations, WithFileUploads, WithRepeaterFields;

    public int $appId;
    public ConnectedApp $app;
    public ?Client $passportClient = null;
    public array $signOutUris = [];
    public string $selectedTab = 'general-tab';
    public ?string $newSecretPlain = null;

    // Edit fields
    public bool $editGeneralModal = false;
    public string $editName = '';
    public $editLogo = null;

    public bool $editRedirectsMode = false;
    public array $editSignInUris = [];
    public array $editSignOutUris = [];

    private OidcService $oidcService;
    private OidcConfigResolver $configResolver;
    private ConnectedAppService $connectedAppService;
    private ApplicationLogoUploader $logoUploader;

    public function boot(
        OidcService $oidcService,
        OidcConfigResolver $configResolver,
        ConnectedAppService $connectedAppService,
        ApplicationLogoUploader $logoUploader
    ): void {
        $this->oidcService = $oidcService;
        $this->configResolver = $configResolver;
        $this->connectedAppService = $connectedAppService;
        $this->logoUploader = $logoUploader;
    }

    public function requiresPkce(Client $client): bool
    {
        return $this->configResolver->requiresPkce($client);
    }

    public function mount(int $id): void
    {
        $this->authorize(AppPermissionEnum::Read->value);
        $this->appId = $id;
        $this->loadAppData();
    }

    public function loadAppData(): void
    {
        $this->app = ConnectedApp::with(['protocol', 'status', 'roles'])->findOrFail($this->appId);
        $this->passportClient = $this->oidcService->getPassportClient($this->app);
        $this->signOutUris = $this->oidcService->getSignOutUris($this->app);
    }

    public function generateNewSecret(): void
    {
        $this->authorize(AppPermissionEnum::Update->value);

        if (!$this->passportClient) {
            $this->error('No corresponding Passport Client found to update.');
            return;
        }

        $this->attempt(
            action: function () {
                $plainSecret = $this->oidcService->generateNewSecret($this->passportClient);
                $this->newSecretPlain = $plainSecret;
                $this->success('A new client secret has been generated! Make sure to copy it now.');
                $this->loadAppData();
            },
            successMessage: 'New client secret generated successfully!',
            showSuccess: false
        );
    }

    public function changeStatus(string $statusName): void
    {
        $this->authorize(AppPermissionEnum::Update->value);

        $this->attempt(
            action: function () use ($statusName) {
                $statusId = ConnectionStatus::where('name', $statusName)->firstOrFail()->id;
                $request = new ConnectAppRequest(
                    name: $this->app->name,
                    connectionProtocolId: $this->app->connection_protocol_id,
                    connectionProviderId: $this->app->connection_provider_id,
                    slug: $this->app->slug,
                    connectionStatusId: $statusId,
                    settings: $this->app->settings,
                    logo: $this->app->logo,
                );
                $this->connectedAppService->update($this->app->id, $request);
                $this->loadAppData();
            },
            successMessage: 'Application status updated successfully!'
        );
    }

    public function goBack(): void
    {
        $this->redirectRoute('apps.index', navigate: true);
    }

    public function openEditGeneralModal(): void
    {
        $this->editName = $this->app->name;
        $this->editLogo = null;
        $this->editGeneralModal = true;
    }

    public function saveGeneralInfo(): void
    {
        $this->authorize(AppPermissionEnum::Update->value);

        $this->validate([
            'editName' => 'required|string|max:255',
            'editLogo' => 'nullable|image|max:2048',
        ]);

        $this->attempt(
            action: function () {
                $logoPath = $this->editLogo
                    ? $this->logoUploader->store($this->editLogo)
                    : $this->app->logo;

                $request = new ConnectAppRequest(
                    name: $this->editName,
                    connectionProtocolId: $this->app->connection_protocol_id,
                    connectionProviderId: $this->app->connection_provider_id,
                    slug: \Illuminate\Support\Str::slug($this->editName),
                    connectionStatusId: $this->app->connection_status_id,
                    settings: $this->app->settings,
                    logo: $logoPath,
                );

                $this->connectedAppService->update($this->app->id, $request);

                if ($this->passportClient && $this->passportClient->name !== $this->editName) {
                    $this->passportClient->name = $this->editName;
                    $this->passportClient->save();
                }

                $this->editGeneralModal = false;
                $this->success('Application updated successfully!');
                $this->loadAppData();
            }
        );
    }

    public function startEditRedirects(): void
    {
        $clientUris = $this->passportClient->redirect_uris ?? [];
        $this->editSignOutUris = $this->signOutUris;

        $this->editSignInUris = array_values(array_filter(
            $clientUris,
            fn($uri) => !in_array($uri, $this->editSignOutUris, true)
        ));

        $this->editRedirectsMode = true;
    }

    public function cancelEditRedirects(): void
    {
        $this->editRedirectsMode = false;
    }


    public function saveRedirectUris(): void
    {
        $this->authorize(AppPermissionEnum::Update->value);

        if (!$this->passportClient) {
            $this->error('No corresponding Passport Client found to update.');
            return;
        }

        $signInUris = array_values(array_filter(array_map('trim', $this->editSignInUris)));
        $signOutUris = array_values(array_filter(array_map('trim', $this->editSignOutUris)));

        $this->attempt(
            action: function () use ($signInUris, $signOutUris) {
                $this->oidcService->updateRedirectUris($this->app, $this->passportClient, $signInUris, $signOutUris);
                $this->editRedirectsMode = false;
                $this->success('Redirect URIs updated successfully!');
                $this->loadAppData();
            }
        );
    }
};
?>

<div class="space-y-6">
    <!-- Header Card -->
    <x-shared.card class="p-6">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="flex items-center gap-4">
                <div class="relative group">
                    <x-mary-avatar
                        :image="$app->logo ? asset($app->logo) : null"
                        :placeholder="$app->logo ? null : 'lucide.settings'"
                        class="w-16 h-16 rounded-xl border border-gray-200 p-2 shadow-xs bg-gray-50 group-hover:opacity-85 transition-opacity"
                    />
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <h1 class="text-2xl font-bold text-gray-900 ">{{ $app->name }}</h1>
                        <button wire:click="openEditGeneralModal" class="text-gray-400 hover:text-gray-600 ">
                            <x-lucide-pencil class="w-4 h-4"/>
                        </button>
                    </div>
                    <p class="text-sm text-gray-500 mt-0.5">Protocol: <span
                            class="font-semibold text-gray-700 ">{{ strtoupper($app->protocol->name) }}</span>
                    </p>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <!-- Status Dropdown/Trigger -->
                <div class="dropdown dropdown-end">
                    <label tabindex="0"
                           class="btn btn-sm btn-outline gap-1.5 font-semibold {{ $app->status->name === 'connected' ? 'border-emerald-200 text-emerald-700 bg-emerald-50/30' : ($app->status->name === 'disconnected' ? 'border-rose-200 text-rose-700 bg-rose-50/30' : 'border-gray-200 text-gray-700 bg-gray-50/30') }}">
                        <span
                            class="w-2 h-2 rounded-full {{ $app->status->name === 'connected' ? 'bg-emerald-500' : ($app->status->name === 'disconnected' ? 'bg-rose-500' : 'bg-gray-400') }}"></span>
                        {{ ucfirst($app->status->name) }}
                        <x-lucide-chevron-down class="w-3.5 h-3.5 opacity-60"/>
                    </label>
                    <ul tabindex="0"
                        class="dropdown-content menu p-1 shadow-md bg-base-100 rounded-box w-44 border border-gray-100 mt-1 z-30">
                        @foreach(App\Enums\ConnectionStatusEnum::cases() as $statusCase)
                            <li>
                                <button wire:click="changeStatus('{{ $statusCase->value }}')"
                                        class="font-medium text-xs py-2">
                                    <span
                                        class="w-2 h-2 rounded-full {{ $statusCase->value === 'connected' ? 'bg-emerald-500' : ($statusCase->value === 'disconnected' ? 'bg-rose-500' : 'bg-gray-400') }}"></span>
                                    {{ ucfirst($statusCase->value) }}
                                </button>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <x-mary-button
                    icon="lucide.arrow-left"
                    class="btn-sm btn-ghost text-gray-500"
                    wire:click="goBack"
                    label="Back"
                />
            </div>
        </div>
    </x-shared.card>

    <!-- Main Content Area -->
    <x-shared.card class="p-0 overflow-hidden">
        <x-mary-tabs wire:model="selectedTab" class="px-4" label-div-class="pt-3 bg-gray-50 border-b border-gray-200"
                     label-class="font-bold pb-3">

            <!-- General Tab -->
            <x-mary-tab name="general-tab" label="General">
                <div class="space-y-6">
                    @if($newSecretPlain)
                        <x-mary-alert
                            title="New Client Secret Generated"
                            description="Make sure to copy the client secret below now. You won't be able to see it again."
                            icon="lucide.key-round"
                            class="alert-warning alert-soft border border-yellow-200/80"
                        />

                        <div x-data="{ copied: false }" class="flex items-center gap-2 max-w-xl">
                            <input
                                type="text"
                                readonly
                                value="{{ $newSecretPlain }}"
                                x-ref="secretInput"
                                class="input input-sm font-mono w-full bg-white border border-gray-200 focus:outline-none"
                            />
                            <button
                                type="button"
                                @click="navigator.clipboard.writeText($refs.secretInput.value); copied = true; setTimeout(() => copied = false, 2000)"
                                class="btn btn-sm btn-square btn-outline border-gray-200 shrink-0"
                            >
                                <x-lucide-copy class="w-4 h-4 text-gray-500" x-show="!copied"/>
                                <x-lucide-check class="w-4 h-4 text-green-500" x-show="copied"/>
                            </button>
                        </div>
                    @endif

                    @if(!$passportClient)
                        <x-mary-alert
                            title="Passport Client Misconfigured"
                            description="No Laravel Passport Client is associated with this app name. Double check database or create client."
                            icon="lucide.alert-triangle"
                            class="alert-error alert-soft"
                        />
                    @endif

                    <!-- Client Credentials Section -->
                    <x-shared.card title="Client Credentials">
                        <div class="p-6 space-y-6">
                            <!-- Client ID -->
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-2 md:items-center">
                                <span class="text-xs font-medium text-gray-500">Client ID</span>
                                <div class="md:col-span-3 flex items-center gap-2 max-w-lg">
                                    <input
                                        type="text"
                                        readonly
                                        value="{{ $passportClient?->id ?? 'Not found' }}"
                                        class="input input-sm input-bordered font-mono w-full bg-gray-50  border-gray-200 focus:outline-hidden"
                                    />
                                    @if($passportClient)
                                        <x-mary-button
                                            icon="lucide.copy"
                                            class="btn-sm btn-square btn-outline border-gray-200"
                                            @click="navigator.clipboard.writeText('{{ $passportClient->id }}'); alert('Client ID copied!');"
                                            tooltip="Copy Client ID"
                                        />
                                    @endif
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-2">
                                <div></div>
                                <div class="md:col-span-3 text-xs text-gray-400 -mt-2">
                                    Public identifier for the client that is required for all OAuth flows.
                                </div>
                            </div>

                            <!-- Client Authentication -->
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-2 md:items-start">
                                <span class="text-xs font-medium text-gray-500">Client Authentication</span>
                                <div class="md:col-span-3 space-y-3">
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="radio" checked readonly @click.prevent
                                               class="radio radio-primary radio-xs"/>
                                        <span
                                            class="text-xs font-medium text-gray-700 ">Client secret</span>
                                    </label>
                                    <label class="flex items-center gap-2 opacity-50 cursor-not-allowed">
                                        <input type="radio" readonly @click.prevent class="radio radio-xs"/>
                                        <span class="text-xs font-medium text-gray-700">Public key / Private key</span>
                                    </label>
                                </div>
                            </div>

                            <!-- PKCE -->
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-2 md:items-center">
                                <span
                                    class="text-xs font-medium text-gray-500">Proof Key for Code Exchange (PKCE)</span>
                                <div class="md:col-span-3">
                                    <label class="flex items-center gap-2">
                                        <input
                                            type="checkbox"
                                            @click.prevent
                                            @checked($passportClient && $this->requiresPkce($passportClient))
                                            class="checkbox checkbox-xs"
                                        />
                                        <span
                                            class="text-xs text-gray-600">Require PKCE as additional verification</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </x-shared.card>

                    <!-- Client Secrets Section -->
                    <x-shared.card title="Client Secrets">
                        @if($passportClient)
                            <x-slot:actions>
                                <x-mary-button
                                    wire:click="generateNewSecret"
                                    class="btn-outline border-blue-200 text-blue-600 hover:bg-blue-50"
                                    icon="lucide.plus"
                                    label="Generate new secret"
                                    spinner="generateNewSecret"
                                />
                            </x-slot:actions>
                        @endif
                        <div class="overflow-x-auto">
                            <table class="table w-full text-xs">
                                <thead>
                                <tr class="bg-gray-50/30 text-gray-400 border-b border-gray-100">
                                    <th class="font-semibold py-3 px-6 text-left">Creation date</th>
                                    <th class="font-semibold py-3 px-6 text-left">Secret</th>
                                    <th class="font-semibold py-3 px-6 text-right">Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                @if($passportClient)
                                    <tr class="hover:bg-gray-50/50 border-b border-gray-100">
                                        <td class="py-4 px-6 text-gray-600 ">
                                            {{ $passportClient->updated_at?->format('M j, Y H:i:s') ?? 'N/A' }}
                                        </td>
                                        <td class="py-4 px-6 font-mono text-gray-500 tracking-widest flex items-center gap-3">
                                            <span>••••••••••••••••••••••••••••••••••••••••</span>
                                        </td>
                                        <td class="py-4 px-6 text-right">
                                                <span
                                                    class="badge {{ !$passportClient->revoked ? 'badge-soft badge-success' : 'badge-soft badge-error' }} font-semibold text-xs px-2.5 py-1">
                                                    {{ !$passportClient->revoked ? 'Active' : 'Revoked' }}
                                                </span>
                                        </td>
                                    </tr>
                                @else
                                    <tr>
                                        <td colspan="3" class="text-center py-6 text-gray-400 italic">No secrets
                                            available
                                        </td>
                                    </tr>
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </x-shared.card>
                </div>
            </x-mary-tab>

            <!-- Sign On Tab -->
            <x-mary-tab name="signon-tab" label="Sign On">
                <div class="space-y-6">
                    <x-shared.card title="Sign In Redirect URIs">
                        <x-slot:actions>
                            @if($editRedirectsMode)
                                <div class="flex gap-2">
                                    <x-mary-button
                                        icon="lucide.check"
                                        class="btn-primary"
                                        label="Save"
                                        wire:click="saveRedirectUris"
                                    />
                                    <x-mary-button
                                        icon="lucide.x"
                                        class="btn-ghost"
                                        label="Cancel"
                                        wire:click="cancelEditRedirects"
                                    />
                                </div>
                            @else
                                <x-mary-button
                                    icon="lucide.pencil"
                                    class="btn-outline border-gray-200"
                                    label="Edit"
                                    wire:click="startEditRedirects"
                                />
                            @endif
                        </x-slot:actions>

                        <div class="p-6 space-y-3">
                            @if($editRedirectsMode)
                                <x-shared.repeater-input
                                    model="editSignInUris"
                                    :items="$editSignInUris"
                                    placeholder="https://app.example.com/callback"
                                    min="0"
                                />
                            @else
                                @php
                                    $onlySignInUris = array_values(array_filter(
                                        $passportClient?->redirect_uris ?? [],
                                        fn($uri) => !in_array($uri, $signOutUris, true)
                                    ));
                                @endphp
                                @if(!empty($onlySignInUris))
                                    @foreach($onlySignInUris as $uri)
                                        <div
                                            class="flex items-center gap-2 p-2 border border-gray-150 rounded-lg font-mono text-xs text-gray-600 bg-gray-50">
                                            <x-lucide-link class="w-3.5 h-3.5 text-gray-400"/>
                                            <span class="flex-1">{{ $uri }}</span>
                                        </div>
                                    @endforeach
                                @else
                                    <span
                                        class="text-xs text-gray-400 italic">No Sign In Redirect URIs configured</span>
                                @endif
                            @endif
                        </div>
                    </x-shared.card>

                    <!-- Sign Out Redirect URIs -->
                    <x-shared.card title="Sign Out Redirect URIs">
                        <div class="p-6 space-y-3">
                            @if($editRedirectsMode)
                                <x-shared.repeater-input
                                    model="editSignOutUris"
                                    :items="$editSignOutUris"
                                    placeholder="https://app.example.com/logout"
                                    min="0"
                                />
                            @else
                                @if(!empty($signOutUris))
                                    @foreach($signOutUris as $uri)
                                        <div
                                            class="flex items-center gap-2 p-2 border border-gray-150 rounded-lg font-mono text-xs text-gray-600 bg-gray-50">
                                            <x-lucide-log-out class="w-3.5 h-3.5 text-gray-400"/>
                                            <span class="flex-1">{{ $uri }}</span>
                                        </div>
                                    @endforeach
                                @else
                                    <span
                                        class="text-xs text-gray-400 italic">No Sign Out Redirect URIs configured</span>
                                @endif
                            @endif
                        </div>
                    </x-shared.card>
                </div>
            </x-mary-tab>

            <!-- Assignments Tab -->
            <x-mary-tab name="assignments-tab" label="Assignments">
                <div class="">
                    <x-shared.card title="Assigned Roles">
                        <div class="overflow-x-auto">
                            <table class="table w-full text-xs">
                                <thead>
                                <tr class="bg-gray-50/30 text-gray-400 border-b border-gray-100">
                                    <th class="font-semibold py-3 px-6 text-left">Role Name</th>
                                    <th class="font-semibold py-3 px-6 text-left">Priority</th>
                                    <th class="font-semibold py-3 px-6 text-right">Access Type</th>
                                </tr>
                                </thead>
                                <tbody>
                                @forelse($app->roles as $role)
                                    <tr class="hover:bg-gray-50/50 border-b border-gray-100">
                                        <td class="py-4 px-6 font-semibold text-gray-800 0">
                                            {{ $role->name }}
                                        </td>
                                        <td class="py-4 px-6 text-gray-500">
                                            {{ $role->priority }}
                                        </td>
                                        <td class="py-4 px-6 text-right">
                                                <span
                                                    class="badge badge-soft badge-primary font-semibold text-xs px-2.5 py-1">
                                                    SSO Access
                                                 </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center py-6 text-gray-400 italic">
                                            No specific roles assigned. Accessible by everyone depending on user access
                                            setting.
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </x-shared.card>
                </div>
            </x-mary-tab>

            <!-- Scopes Tab -->
            <x-mary-tab name="scopes-tab" label="Scopes">
                <div class="">
                    <x-shared.card title="Granted OAuth/OIDC Scopes">
                        <div class="p-6 space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="flex items-start gap-3 p-3 border border-gray-100 rounded-xl bg-gray-50/50">
                                    <span class="p-2 bg-blue-50 text-blue-600 rounded-lg mt-0.5">
                                        <x-lucide-user class="w-4 h-4"/>
                                    </span>
                                    <div>
                                        <div class="font-semibold text-xs text-gray-800">openid</div>
                                        <p class="text-[11px] text-gray-400 mt-0.5">Allows the application to fetch ID
                                            tokens for authenticating users.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-3 p-3 border border-gray-100 rounded-xl bg-gray-50/50">
                                    <span class="p-2 bg-blue-50 text-blue-600 rounded-lg mt-0.5">
                                        <x-lucide-id-card class="w-4 h-4"/>
                                    </span>
                                    <div>
                                        <div class="font-semibold text-xs text-gray-800">profile</div>
                                        <p class="text-[11px] text-gray-400 mt-0.5">Allows reading default profile
                                            fields like name, picture, and locale.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-3 p-3 border border-gray-100 rounded-xl bg-gray-50/50">
                                    <span class="p-2 bg-blue-50 text-blue-600 rounded-lg mt-0.5">
                                        <x-lucide-mail class="w-4 h-4"/>
                                    </span>
                                    <div>
                                        <div class="font-semibold text-xs text-gray-800">email</div>
                                        <p class="text-[11px] text-gray-400 mt-0.5">Grants access to the user's primary
                                            email address.</p>
                                    </div>
                                </div>
                                <div class="flex items-start gap-3 p-3 border border-gray-100 rounded-xl bg-gray-50/50">
                                    <span class="p-2 bg-blue-50 text-blue-600 rounded-lg mt-0.5">
                                        <x-lucide-refresh-cw class="w-4 h-4"/>
                                    </span>
                                    <div>
                                        <div class="font-semibold text-xs text-gray-800">offline_access</div>
                                        <p class="text-[11px] text-gray-400 mt-0.5">Allows requesting refresh tokens to
                                            maintain access offline.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </x-shared.card>
                </div>
            </x-mary-tab>

        </x-mary-tabs>
    </x-shared.card>

    <!-- Edit General Info Modal -->
    <x-mary-modal wire:model="editGeneralModal" title="Edit App General Settings" class="backdrop-blur">
        <x-mary-form wire:submit="saveGeneralInfo">
            <x-mary-input
                label="Application Name"
                wire:model="editName"
                placeholder="e.g. My App"
                required
            />
            <x-mary-file
                label="Application Logo"
                wire:model="editLogo"
                accept="image/jpeg,image/png"
                hint="Optional. Max 2MB."
            />

            <x-slot:actions>
                <x-mary-button label="Cancel" @click="$wire.editGeneralModal = false" class="btn-ghost"/>
                <x-mary-button label="Save Settings" type="submit" class="btn-primary" spinner="saveGeneralInfo"/>
            </x-slot:actions>
        </x-mary-form>
    </x-mary-modal>
</div>