@extends('layouts.app')

@section('content')
@php
$money = fn($m) => is_array($m)
? ($m['formatted_amount'] ?? (isset($m['amount'])
? number_format(((int) $m['amount']) / 100, 2) . ' ' . ($m['currency_code'] ?? '')
: '-'))
: '-';

$stateUpper = strtoupper($state);
$stateBadge = match ($stateUpper) {
'CREATED', 'PLACED' => 'bg-amber-100 text-amber-700',
'ACCEPTED' => 'bg-green-100 text-green-700',
'PREPARING', 'IN_PROGRESS' => 'bg-blue-100 text-blue-700',
'READY_FOR_PICKUP', 'FINISHED', 'COMPLETED', 'DELIVERED' => 'bg-green-100 text-green-700',
'DENIED', 'CANCELED', 'CANCELLED' => 'bg-red-100 text-red-700',
'' => 'bg-stone-100 text-stone-500',
default => 'bg-stone-200 text-stone-700',
};

// Accept/deny is only meaningful while Uber still waits for a POS response.
$actionable = in_array($stateUpper, ['CREATED', 'PLACED', ''], true);
// After acceptance the order is in the kitchen: mark it ready for pickup or
// cancel it while it is being prepared (local POS-side transitions).
$isPreparing = in_array($stateUpper, ['PREPARING', 'ACCEPTED'], true);
$readyConfirm = __('This order will be marked READY for pickup. Are you sure?');
$cancelConfirm = __('This order will be CANCELLED. Are you sure?');
$windowOpen = $windowEnd !== null && $windowEnd->isFuture();
$secondsLeft = $windowOpen ? (int) now()->diffInSeconds($windowEnd) : 0;

$items = data_get($detail, 'cart.items') ?? [];
$charges = data_get($detail, 'payment.charges') ?? [];
$eater = data_get($detail, 'eater') ?? [];
$store = data_get($detail, 'store') ?? [];
$deliveries = data_get($detail, 'deliveries') ?? [];
$issues = data_get($detail, 'fulfillment_issues') ?? [];
@endphp

<div class="w-full px-4 pb-60">
    <div class="grid max-w-6xl mx-auto gap-y-6">

        {{-- HEADER --}}
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div>
                <a href="{{ route('orders.index') }}"
                    class="inline-flex items-center gap-1 text-sm text-stone-500 hover:text-stone-700">
                    <span class="text-base material-symbols-rounded">arrow_back</span>
                    {{ __('Orders') }}
                </a>
                <div class="flex flex-wrap items-center gap-3 mt-1">
                    <h1 class="text-2xl font-semibold text-stone-800">
                        {{ data_get($detail, 'display_id') ?: __('Order #:id', ['id' => substr($order->order_id, 0, 8)])
                        }}
                    </h1>
                    <span class="px-2.5 py-0.5 text-xs font-semibold rounded-full {{ $stateBadge }}">
                        {{ $stateUpper !== '' ? __($stateUpper) : __('UNKNOWN') }}
                    </span>
                    @if (data_get($detail, 'type'))
                    <span class="px-2 py-0.5 text-xs rounded-full bg-stone-100 text-stone-600">
                        {{ str_replace('_', ' ', data_get($detail, 'type')) }}
                    </span>
                    @endif
                </div>
                <p class="mt-1 font-mono text-xs text-stone-400" title="{{ $order->order_id }}">
                    {{ $order->order_id }}
                </p>
            </div>

            <div class="text-sm text-right text-stone-500">
                <div>{{ __('Business') }}:
                    <span class="font-medium text-stone-700">
                        {{ $order->integration?->posAccess?->note ?? ($order->pos_service_id ? __('Business #:id', ['id'
                        => $order->pos_service_id]) : '-') }}
                    </span>
                </div>
                <div class="mt-0.5">{{ __('Received') }}: {{ $order->created_at?->format('d.m.Y H:i') }}</div>
                <a href="{{ route('orders.print', $order->order_id) }}" target="_blank"
                    class="inline-flex items-center gap-1 mt-2 text-sm font-semibold text-stone-700 hover:text-stone-900">
                    <span class="text-base material-symbols-rounded">print</span>
                    {{ __('Print') }}
                </a>
            </div>
        </div>

        {{-- FLASH --}}
        @if (session('status'))
        <div class="flex items-center gap-2 p-3 text-sm text-green-800 rounded-lg bg-green-50 ring-1 ring-green-200">
            <span class="text-base material-symbols-rounded">check_circle</span>
            {{ session('status') }}
        </div>
        @endif
        @if (session('error'))
        <div class="flex items-center gap-2 p-3 text-sm text-red-800 rounded-lg bg-red-50 ring-1 ring-red-200">
            <span class="text-base material-symbols-rounded">error</span>
            {{ session('error') }}
        </div>
        @endif
        @if (isset($errors) && $errors->any())
        <div class="p-3 text-sm text-red-800 rounded-lg bg-red-50 ring-1 ring-red-200">
            {{ $errors->first() }}
        </div>
        @endif

        {{-- ACTION PANEL --}}
        @if ($actionable)
        <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <p class="text-sm font-semibold text-stone-800">{{ __('Order approval is pending') }}</p>
                    @if ($windowOpen)
                    <p class="mt-0.5 text-xs text-amber-700">
                        <span class="material-symbols-rounded text-sm align-[-2px]">timer</span>
                        {{ __('Uber accept/deny window: :time left — the order is auto-cancelled when it expires.',
                        ['time' => __(':min min :sec sec', ['min' => intdiv($secondsLeft, 60), 'sec' => $secondsLeft %
                        60])]) }}
                    </p>
                    @else
                    <p class="mt-0.5 text-xs text-red-600">
                        {{ __('The approval window has closed — a response can still be sent, but Uber will most likely
                        return "order is no longer active".') }}{{ $windowEnd ? ' (' . $windowEnd->format('H:i:s') . ')'
                        : '' }}
                    </p>
                    @endif
                </div>

                <div class="flex flex-wrap items-center gap-2">
                    <form method="POST" action="{{ route('orders.respond', $order->order_id) }}"
                        onsubmit='return confirm(@json(__(' This order will be ACCEPTED on Uber Eats. Are you
                        sure?')));'>
                        @csrf
                        <input type="hidden" name="action" value="accept">
                        <button type="submit"
                            class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold text-white rounded-lg bg-green-600 hover:bg-green-700 {{ $windowOpen ? '' : 'opacity-70' }}">
                            <span class="text-base material-symbols-rounded">check</span>
                            {{ __('Accept') }}
                        </button>
                    </form>

                    <form method="POST" action="{{ route('orders.respond', $order->order_id) }}"
                        class="flex items-center gap-2" onsubmit='return confirm(@json(__(' This order will be DENIED on
                        Uber Eats. Are you sure?')));'>
                        @csrf
                        <input type="hidden" name="action" value="deny">
                        <select name="reason"
                            class="w-48 px-3 py-2 text-sm border rounded-lg border-stone-300 focus:ring-2 focus:ring-stone-400 focus:outline-none">
                            <option value="">{{ __('Deny reason (optional)') }}</option>
                            <option value="ITEM_AVAILABILITY">{{ __('Item unavailable') }}</option>
                            <option value="STORE_CLOSED">{{ __('Store closed') }}</option>
                            <option value="POS_NOT_READY">{{ __('POS not ready') }}</option>
                            <option value="POS_OFFLINE">{{ __('POS offline') }}</option>
                            <option value="MISSING_ITEM">{{ __('Missing item/option') }}</option>
                            <option value="MISSING_INFO">{{ __('Missing order info') }}</option>
                            <option value="PRICING">{{ __('Pricing mismatch') }}</option>
                            <option value="CAPACITY">{{ __('Capacity full / busy') }}</option>
                            <option value="ADDRESS">{{ __('Address issue') }}</option>
                            <option value="SPECIAL_INSTRUCTIONS">{{ __('Special instructions issue') }}</option>
                            <option value="OTHER">{{ __('Other') }}</option>
                        </select>
                        <button type="submit"
                            class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold text-white rounded-lg bg-red-600 hover:bg-red-700 {{ $windowOpen ? '' : 'opacity-70' }}">
                            <span class="text-base material-symbols-rounded">close</span>
                            {{ __('Deny') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @elseif ($isPreparing)
        <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <p class="text-sm font-semibold text-stone-800">{{ __('Order is being prepared') }}</p>
                    <p class="mt-0.5 text-xs text-stone-500">
                        {{ __('Mark the order ready for pickup, or cancel it while it is being prepared.') }}
                    </p>
                </div>

                <div class="flex flex-wrap items-center gap-2">
                    <form method="POST" action="{{ route('orders.respond', $order->order_id) }}"
                        onsubmit='return confirm(@json($readyConfirm));'>
                        @csrf
                        <input type="hidden" name="action" value="ready">
                        <button type="submit"
                            class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold text-white rounded-lg bg-blue-600 hover:bg-blue-700">
                            <span class="text-base material-symbols-rounded">shopping_bag</span>
                            {{ __('Ready') }}
                        </button>
                    </form>

                    <form method="POST" action="{{ route('orders.respond', $order->order_id) }}"
                        onsubmit='return confirm(@json($cancelConfirm));'>
                        @csrf
                        <input type="hidden" name="action" value="cancel">
                        <button type="submit"
                            class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold text-white rounded-lg bg-red-600 hover:bg-red-700">
                            <span class="text-base material-symbols-rounded">cancel</span>
                            {{ __('Cancel') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @else
        <div class="p-3 mt-4 text-sm rounded-lg text-stone-600 bg-stone-50 ring-1 ring-stone-200">
            {!! __('This order is in :status state — accept/deny cannot be applied.', ['status' => '<span
                class="font-semibold">' . e(__($stateUpper)) . '</span>']) !!}
        </div>
        @endif

        {{-- DETAIL GRID --}}
        <div class="grid gap-4 lg:grid-cols-3">

            {{-- LEFT: CART --}}
            <div class="space-y-4 lg:col-span-2">
                <div class="overflow-hidden bg-white rounded-lg shadow ring-1 ring-stone-300">
                    <div class="px-4 py-3 border-b border-stone-200 bg-stone-50">
                        <h2 class="text-sm font-semibold text-stone-700">
                            <span class="material-symbols-rounded text-base align-[-3px]">restaurant</span>
                            {{ __('Cart (:count items)', ['count' => count($items)]) }}
                        </h2>
                    </div>

                    @if (count($items) > 0)
                    <table class="min-w-full divide-y divide-stone-200">
                        <thead>
                            <tr class="text-xs font-medium tracking-wide text-left uppercase text-stone-500">
                                <th class="px-4 py-2">{{ __('Item') }}</th>
                                <th class="px-4 py-2 text-center">{{ __('Qty') }}</th>
                                <th class="px-4 py-2 text-right">{{ __('Unit') }}</th>
                                <th class="px-4 py-2 text-right">{{ __('Total') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-stone-100">
                            @foreach ($items as $item)
                            <tr>
                                <td class="px-4 py-3 text-sm text-stone-800">
                                    {{ data_get($item, 'title') ?? data_get($item, 'id') ?? '-' }}
                                    @if (data_get($item, 'special_instructions'))
                                    <p class="mt-0.5 text-xs italic text-amber-700">
                                        “{{ data_get($item, 'special_instructions') }}”
                                    </p>
                                    @endif
                                    @foreach (data_get($item, 'selected_modifier_groups') ?? [] as $group)
                                    @php $selected = data_get($group, 'selected_items') ?? []; @endphp
                                    @if (count($selected) > 0)
                                    <p class="mt-0.5 text-xs text-stone-500">
                                        {{ data_get($group, 'title') }}:
                                        {{ collect($selected)->map(fn($s) => trim((data_get($s, 'title') ?? '') .
                                        (data_get($s, 'quantity', 1) > 1 ? ' ×' . data_get($s, 'quantity') :
                                        '')))->filter()->implode(', ') }}
                                    </p>
                                    @endif
                                    @endforeach
                                </td>
                                <td class="px-4 py-3 text-sm text-center text-stone-600">
                                    {{ data_get($item, 'quantity', 1) }}
                                </td>
                                <td class="px-4 py-3 text-sm text-right text-stone-600">
                                    {{ $money(data_get($item, 'price.unit_price')) }}
                                </td>
                                <td class="px-4 py-3 text-sm font-medium text-right text-stone-800">
                                    {{ $money(data_get($item, 'price.total_price')) }}
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @else
                    <div class="p-6 text-sm text-center text-stone-400">
                        {{ __('No cart detail — the order may not be enriched (raw webhook payload).') }}
                    </div>
                    @endif

                    @if (count($issues) > 0)
                    <div class="px-4 py-3 border-t border-stone-200 bg-amber-50">
                        <p class="text-xs font-semibold text-amber-800">
                            {{ __(':count item fulfillment issue(s):', ['count' => count($issues)]) }}
                            {{ collect($issues)->map(fn($i) => data_get($i,
                            'fulfillment_issue_type'))->filter()->unique()->implode(', ') }}
                        </p>
                    </div>
                    @endif
                </div>

                {{-- EVENTS TIMELINE --}}
                <div class="overflow-hidden bg-white rounded-lg shadow ring-1 ring-stone-300">
                    <div class="px-4 py-3 border-b border-stone-200 bg-stone-50">
                        <h2 class="text-sm font-semibold text-stone-700">
                            <span class="material-symbols-rounded text-base align-[-3px]">history</span>
                            {{ __('Webhook events (:count)', ['count' => $events->count()]) }}
                        </h2>
                    </div>
                    @if ($events->count() > 0)
                    <table class="min-w-full divide-y divide-stone-200">
                        <tbody class="divide-y divide-stone-100">
                            @foreach ($events as $event)
                            <tr>
                                <td class="px-4 py-2 font-mono text-sm text-stone-700">{{ $event->event_type }}</td>
                                <td class="px-4 py-2 text-sm">
                                    <span
                                        class="px-2 py-0.5 text-xs font-semibold rounded-full {{ $event->status === 'processed' ? 'bg-green-100 text-green-700' : 'bg-stone-100 text-stone-600' }}">
                                        {{ $event->status }}
                                    </span>
                                </td>
                                <td class="px-4 py-2 text-sm text-stone-500">
                                    {{ __('Signature:') }} {{ $event->signature_valid ? '✓ ' . __('valid') : '✗ ' .
                                    __('invalid') }}
                                </td>
                                <td class="px-4 py-2 text-sm text-right text-stone-400">
                                    {{ $event->received_at?->format('d.m.Y H:i:s') }}
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @else
                    <div class="p-6 text-sm text-center text-stone-400">{{ __('No webhook event records for this
                        order.') }}</div>
                    @endif
                </div>
            </div>

            {{-- RIGHT: SUMMARY CARDS --}}
            <div class="space-y-4">

                {{-- PAYMENT --}}
                <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                    <h2 class="text-sm font-semibold text-stone-700">
                        <span class="material-symbols-rounded text-base align-[-3px]">payments</span>
                        {{ __('Payment') }}
                    </h2>
                    <dl class="mt-2 space-y-1.5 text-sm">
                        @foreach ([
                        __('Subtotal') => data_get($charges, 'sub_total'),
                        __('Tax') => data_get($charges, 'tax'),
                        __('Fees') => data_get($charges, 'total_fee'),
                        ] as $label => $value)
                        <div class="flex justify-between">
                            <dt class="text-stone-500">{{ $label }}</dt>
                            <dd class="text-stone-700">{{ $money($value) }}</dd>
                        </div>
                        @endforeach
                        <div class="flex justify-between pt-2 border-t border-stone-200">
                            <dt class="font-semibold text-stone-700">{{ __('Total') }}</dt>
                            <dd class="font-semibold text-stone-900">{{ $money(data_get($charges, 'total')) }}</dd>
                        </div>
                    </dl>
                </div>

                {{-- EATER --}}
                <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                    <h2 class="text-sm font-semibold text-stone-700">
                        <span class="material-symbols-rounded text-base align-[-3px]">person</span>
                        {{ __('Customer') }}
                    </h2>
                    <div class="mt-2 text-sm text-stone-600">
                        <div>{{ data_get($eater, 'first_name') ?: '-' }}</div>
                        @if (data_get($eater, 'phone'))
                        <div class="mt-1 font-mono text-xs text-stone-500">{{ data_get($eater, 'phone') }}</div>
                        @endif
                    </div>
                </div>

                {{-- STORE + COURIER + TIMES --}}
                <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                    <h2 class="text-sm font-semibold text-stone-700">
                        <span class="material-symbols-rounded text-base align-[-3px]">storefront</span>
                        {{ __('Store & Delivery') }}
                    </h2>
                    <div class="mt-2 space-y-2 text-sm text-stone-600">
                        <div>
                            <span class="text-stone-400">{{ __('Store') }}:</span>
                            {{ data_get($store, 'name') ?: ($order->store_id ? substr($order->store_id, 0, 8) . '…' :
                            '-') }}
                        </div>
                        @foreach ($deliveries as $courier)
                        <div>
                            <span class="text-stone-400">{{ __('Courier:') }}</span>
                            {{ data_get($courier, 'first_name') ?: '-' }}
                            @if (data_get($courier, 'current_state'))
                            <span class="ml-1 px-1.5 py-0.5 text-xs rounded bg-stone-100 text-stone-600">
                                {{ str_replace('_', ' ', data_get($courier, 'current_state')) }}
                            </span>
                            @endif
                            @if (data_get($courier, 'estimated_pickup_time'))
                            <div class="mt-0.5 text-xs text-stone-400">
                                {{ __('Estimated pickup:') }} {{ \Illuminate\Support\Carbon::parse(data_get($courier,
                                'estimated_pickup_time'))->format('d.m.Y H:i') }}
                            </div>
                            @endif
                        </div>
                        @endforeach
                        <div class="pt-2 space-y-1 text-xs border-t border-stone-100 text-stone-400">
                            @if (data_get($detail, 'placed_at'))
                            <div>{{ __('Order time:') }}
                                {{ \Illuminate\Support\Carbon::parse(data_get($detail, 'placed_at'))->format('d.m.Y
                                H:i') }}
                            </div>
                            @endif
                            @if (data_get($detail, 'estimated_ready_for_pickup_at'))
                            <div>{{ __('Ready (estimated):') }}
                                {{ \Illuminate\Support\Carbon::parse(data_get($detail,
                                'estimated_ready_for_pickup_at'))->format('d.m.Y H:i') }}
                            </div>
                            @endif
                            <div>{{ __('POS sync:') }}
                                {{ $order->synced_to_pos ? __('Sent (:time)', ['time' =>
                                $order->synced_to_pos_at?->format('d.m.Y H:i')]) : __('Pending') }}
                            </div>
                        </div>
                    </div>
                </div>

                {{-- RAW PAYLOAD --}}
                <details class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                    <summary class="text-sm font-semibold cursor-pointer text-stone-700">
                        <span class="material-symbols-rounded text-base align-[-3px]">data_object</span>
                        {{ __('Raw payload (JSON)') }}
                    </summary>
                    <pre
                        class="p-3 mt-2 overflow-x-auto text-xs rounded bg-stone-900 text-stone-100">{{ json_encode($detail, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
                </details>
            </div>
        </div>

    </div>
</div>
@endsection