@extends('layouts.app')

@section('content')
<div class="w-full px-4">
    <div class="max-w-2xl mx-auto">
        <div class="p-6 bg-white rounded-lg shadow ring-1 ring-stone-300">
            <div class="flex items-center justify-between">
                <h2 class="text-lg font-medium text-stone-700">{{ __('Uber Eats Integration') }}</h2>
                @if($connected)
                <span class="px-2.5 py-1 text-xs font-semibold rounded-full
                        {{ $expired ? 'bg-amber-100 text-amber-700' : 'bg-green-100 text-green-700' }}">
                    {{ $expired ? __('Expired') : __('Connected') }}
                </span>
                @else
                <span class="px-2.5 py-1 text-xs font-semibold rounded-full bg-stone-100 text-stone-600">
                    {{ __('Not Connected') }}
                </span>
                @endif
            </div>

            <p class="mt-2 text-sm text-stone-500">
                {{ __('Sandbox OAuth 2.0 (Authorization Code) connection status.') }}
            </p>

            <dl class="mt-6 space-y-3 text-sm">
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">{{ __('Registration Status') }}</dt>
                    <dd class="font-medium text-stone-700">{{ $integration->status ?? '-' }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">{{ __('Token') }}</dt>
                    <dd class="font-medium text-stone-700">
                        {{ $connected ? '••••' . substr((string) $integration->access_token, -6) : __('None') }}
                    </dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">{{ __('Last Validity') }}</dt>
                    <dd class="font-medium text-stone-700">
                        {{ $integration->token_expires_at ? $integration->token_expires_at->format('d.m.Y H:i') : '-' }}
                    </dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">{{ __('Refresh Token') }}</dt>
                    <dd class="font-medium text-stone-700">{{ $integration->refresh_token ? __('Present') : __('None')
                        }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">{{ __('Scopes') }}</dt>
                    <dd class="font-medium text-stone-700">{{ implode(', ', $scopes) ?: '-' }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-stone-500">{{ __('Redirect URI') }}</dt>
                    <dd class="font-medium text-right break-all text-stone-700">{{ $redirectUri }}</dd>
                </div>
            </dl>

            <div class="mt-6">
                <a href="{{ route('uber-eats.connect') }}"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors rounded-lg bg-stone-800 hover:bg-stone-700">
                    {{ $connected ? __('Reconnect') : __('Connect with Uber Eats') }}
                </a>
            </div>
        </div>
    </div>
</div>
@endsection