@extends('layouts.app')

@section('content')
<div class="w-full px-4 pb-60">
    <div class="grid max-w-4xl pt-8 mx-auto gap-y-8">

        {{-- HEADER --}}
        <div>
            <h1 class="text-2xl font-semibold text-stone-800">{{ __('Integrations') }}</h1>
            <p class="mt-1 text-sm text-stone-500">
                {{ __('Selected business:') }} <span class="font-semibold">{{ session('selected_pos_note') ?: __('None')
                    }}</span>
            </p>
        </div>

        @if (blank($selectedPosServiceId))
        <div class="p-4 mt-4 text-sm rounded-lg text-amber-700 bg-amber-50 ring-1 ring-amber-200">
            {{ __('No business is selected yet. Choose a branch from the Switch Business menu at the top-left —
            connections are listed for the selected business.') }}
        </div>
        @endif

        {{-- UNMAPPED EVENTS BADGE (Faz 5.5) --}}
        @if ($unmappedEvents > 0)
        <div
            class="flex items-start gap-2 p-4 mt-4 text-sm rounded-lg text-amber-700 bg-amber-50 ring-1 ring-amber-200">
            <span class="material-symbols-rounded text-base mt-0.5">warning</span>
            <span>
                {{ __(':count webhook event(s) did not match any business (unknown store). Events were acknowledged with
                200, no order was written.', ['count' => $unmappedEvents]) }}
            </span>
        </div>
        @endif

        {{-- PLATFORM CARDS --}}
        <div class="grid gap-4 mt-4">
            @foreach ($platforms as $platform)
            <div class="p-6 bg-white rounded-lg shadow ring-1 ring-stone-300">
                <div class="flex items-center justify-between gap-3">
                    <div class="flex items-center gap-3">
                        <span class="w-2.5 h-2.5 rounded-full" style="background: {{ $platform['color'] }}"></span>
                        <h2 class="text-lg font-medium text-stone-700">{{ $platform['label'] }}</h2>
                    </div>

                    @if ($platform['integration'])
                    <span class="px-2.5 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-700">
                        {{ __('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>

                @if ($platform['integration'])
                @php
                $expiresAt = $platform['integration']->token_expires_at;
                @endphp
                <dl class="mt-4 space-y-2 text-sm">
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500">{{ __('Registration Status') }}</dt>
                        <dd class="font-medium text-stone-700">{{ $platform['integration']->status ?? '-' }}</dd>
                    </div>
                    @if ($platform['credential_mode'] === 'oauth')
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500">{{ __('Token') }}</dt>
                        <dd class="font-medium text-stone-700">
                            {{ $expiresAt ? ($expiresAt->isFuture() ? __('Valid') : __('Expired')) : '-' }}
                        </dd>
                    </div>
                    @endif
                    <div class="flex justify-between gap-4">
                        <dt class="text-stone-500">{{ __('Store') }}</dt>
                        <dd class="font-medium text-stone-700">
                            @if ($platform['store_mapped'])
                            <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-700">{{
                                __('Matched') }}</span>
                            @else
                            <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-amber-100 text-amber-700">{{
                                __('Match Pending') }}</span>
                            @endif
                        </dd>
                    </div>
                </dl>
                @endif

                <div class="mt-5 flex flex-wrap items-center gap-2">
                    @if ($platform['connect_route'])
                    <a href="{{ route($platform['connect_route']) }}"
                        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">
                        {{ $platform['integration'] ? __('Reconnect') : __('Connect') }}
                    </a>
                    @else
                    <span class="text-xs text-stone-400">{{ __('Credentials will be entered manually (api_key).')
                        }}</span>
                    @endif

                    @if ($platform['integration'] && $platform['settings_route'])
                    <a href="{{ route($platform['settings_route']) }}"
                        class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium transition-colors rounded-lg ring-1 ring-stone-300 text-stone-700 hover:bg-stone-50">
                        <span class="text-base material-symbols-rounded">settings</span>
                        {{ __('Settings') }}
                    </a>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

    </div>
</div>
@endsection