@php
    $customer = $workOrder->customer;
    $deadline = $workOrder->deadlineState();
    $days = $workOrder->isOpen() ? $workOrder->daysUntilDeadline() : null;
@endphp
<div>
    <x-ui.page-header :title="'Work order '.$workOrder->work_order_number" :breadcrumbs="['Work Orders' => route('work-orders.index'), $workOrder->work_order_number => null]">
        <x-slot:meta>
            <div class="mt-2 flex flex-wrap items-center gap-2">
                <x-ui.status-badge :status="$workOrder->status" />
                <x-ui.deadline-badge :work-order="$workOrder" />
                <x-ui.play-type :type="$workOrder->play_type" :count="$workOrder->service_count" />
                <x-ui.badge :tone="$workOrder->priority->tone()" :icon="$workOrder->priority->icon()">{{ $workOrder->priority->label() }} priority</x-ui.badge>
                @if ($workOrder->external_order_number)<span class="text-sm text-slate-500">Vendor order #{{ $workOrder->external_order_number }}</span>@endif
            </div>
        </x-slot:meta>
        <x-slot:actions>
            <x-ui.button variant="secondary" icon="printer" :href="route('work-orders.print', $workOrder)" :navigate="false" target="_blank" rel="noopener">Print</x-ui.button>
            @can('update', $workOrder)
                <x-ui.button variant="secondary" icon="pencil-square" :href="route('work-orders.edit', $workOrder)">Edit</x-ui.button>
            @endcan
        </x-slot:actions>
    </x-ui.page-header>

    {{-- Key facts --}}
    <div class="mb-6 grid grid-cols-2 gap-4 lg:grid-cols-5">
        <div class="card p-4"><p class="text-xs font-medium uppercase tracking-wide text-slate-500">Customer</p><p class="mt-1 line-clamp-2 break-words text-sm font-semibold text-slate-900">{{ $customer?->displayName() }}</p></div>
        <div class="card p-4"><p class="text-xs font-medium uppercase tracking-wide text-slate-500">Vendor</p><p class="mt-1 line-clamp-2 break-words text-sm font-semibold text-slate-900">{{ $workOrder->vendor_name_snapshot }}</p></div>
        <div class="card p-4"><p class="text-xs font-medium uppercase tracking-wide text-slate-500">Seller</p><p class="mt-1 line-clamp-2 break-words text-sm font-semibold text-slate-900">{{ $workOrder->seller?->fullName() }}</p></div>
        <div class="card p-4"><p class="text-xs font-medium uppercase tracking-wide text-slate-500">Work order date</p><p class="mt-1 text-sm font-semibold text-slate-900">{{ format_date($workOrder->work_order_date) }}</p></div>
        <div @class(['card p-4', 'ring-2 ring-rose-300' => $deadline === \App\Enums\DeadlineState::Overdue])>
            <p class="text-xs font-medium uppercase tracking-wide text-slate-500">Deadline</p>
            <p class="mt-1 text-sm font-semibold text-slate-900">{{ format_date($workOrder->deadline_date) }}</p>
            @if ($days !== null)
                <p class="text-xs {{ $days < 0 ? 'text-rose-700' : 'text-slate-500' }}">{{ $days < 0 ? abs($days).' day(s) overdue' : ($days === 0 ? 'Due today' : 'In '.$days.' day(s)') }}</p>
            @endif
        </div>
    </div>

    {{-- Status actions --}}
    @if ($transitions)
        <div class="mb-6 flex flex-wrap items-center gap-2 rounded-xl bg-white p-3 shadow-sm ring-1 ring-slate-900/5">
            <span class="mr-2 text-sm font-medium text-slate-600">Next step:</span>
            @foreach ($transitions as $to)
                @php($danger = in_array($to, [\App\Enums\WorkOrderStatus::Cancelled, \App\Enums\WorkOrderStatus::Failed], true))
                @php($success = $to === \App\Enums\WorkOrderStatus::Completed)
                <x-ui.button size="sm" :variant="$danger ? 'secondary' : ($success ? 'success' : ($loop->first ? 'primary' : 'secondary'))" :icon="$workOrder->status->isRecoveryTransition($to) ? 'arrow-uturn-left' : $to->icon()"
                    wire:click="openTransition('{{ $to->value }}')" @class(['!text-rose-700' => $danger])>
                    {{ $workOrder->status->actionLabel($to) }}
                </x-ui.button>
            @endforeach
        </div>
    @elseif ($workOrder->status === \App\Enums\WorkOrderStatus::Completed)
        <x-ui.alert tone="success" class="mb-6" title="Completed {{ format_date($workOrder->completion_date) }}">
            This work order is closed. {{ $deadline === \App\Enums\DeadlineState::CompletedOnTime ? 'It was completed on time.' : 'It was completed after the deadline.' }}
        </x-ui.alert>
    @elseif ($workOrder->status === \App\Enums\WorkOrderStatus::Cancelled)
        <x-ui.alert tone="danger" class="mb-6" title="Cancelled {{ format_datetime($workOrder->cancelled_at) }}">{{ $workOrder->cancellation_reason }}</x-ui.alert>
    @endif

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
        <div class="space-y-6 xl:col-span-2">
            {{-- Customer & service address --}}
            <x-ui.card title="Customer & service address" icon="user">
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <dl class="space-y-3">
                        <x-ui.detail label="Customer">
                            @can('view', $customer)
                                <a href="{{ route('customers.show', $customer) }}" wire:navigate class="font-medium text-brand-700 hover:underline">{{ $customer->displayName() }}</a>
                            @else
                                {{ $customer?->displayName() }}
                            @endcan
                            <span class="block font-mono text-xs text-slate-500">{{ $customer?->customer_number }}</span>
                        </x-ui.detail>
                        <x-ui.detail label="Phone / e-mail">{{ format_phone($customer?->phone) }}@if ($customer?->email)<span class="block text-slate-600">{{ $customer->email }}</span>@endif</x-ui.detail>
                        <x-ui.detail label="Preferred contact" :value="$customer?->preferred_contact_method->label()" />
                    </dl>
                    <div>
                        <p class="detail-label">Service address (as ordered)</p>
                        <address class="mt-1 text-sm not-italic text-slate-900">
                            {{ $workOrder->serviceStreetLine() }}<br>{{ $workOrder->serviceCityLine() }}
                            @if ($workOrder->service_county)<br><span class="text-slate-500">{{ $workOrder->service_county }} County</span>@endif
                        </address>
                        @if ($customer?->serviceAddress && ($customer->serviceAddress->streetLine() !== $workOrder->serviceStreetLine() || $customer->serviceAddress->zip !== $workOrder->service_zip))
                            <p class="mt-2 text-xs text-amber-700"><x-icon name="information-circle" class="inline size-3.5" /> The customer's current address differs: {{ $customer->serviceAddress->streetLine() }}, {{ $customer->serviceAddress->cityLine() }}</p>
                        @endif
                    </div>
                </div>
            </x-ui.card>

            {{-- Package & services --}}
            <x-ui.card title="Package & services" description="Snapshot of what was ordered. Later catalog changes do not alter it." icon="cube">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div>
                        <p class="text-base font-semibold text-slate-900">{{ $workOrder->package_name_snapshot }}</p>
                        <p class="text-sm text-slate-500"><span class="font-mono text-xs">{{ $workOrder->package_code_snapshot }}</span> · {{ $workOrder->vendor_name_snapshot }}</p>
                    </div>
                    <x-ui.play-type :type="$workOrder->play_type" :count="$workOrder->service_count" />
                </div>
                @if ($workOrder->package_description_snapshot)<p class="mt-3 text-sm text-slate-600">{{ $workOrder->package_description_snapshot }}</p>@endif
                <div class="mt-4 grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-4">
                    @foreach ($workOrder->services as $item)
                        <div class="rounded-xl p-4 ring-1 ring-slate-200">
                            <div class="flex items-center gap-2">
                                <span class="icon-tile size-8 tone-brand"><x-icon :name="$item->service_category->defaultIcon()" class="size-4" /></span>
                                <p class="text-sm font-semibold text-slate-900">{{ $item->service_name }}</p>
                            </div>
                            @php($lines = \App\Services\Packages\ServiceDetailSchema::describe($item->service_category, $item->details))
                            @if ($lines)
                                <dl class="mt-3 space-y-1 text-xs">
                                    @foreach ($lines as $label => $value)
                                        <div class="flex justify-between gap-2"><dt class="text-slate-500">{{ $label }}</dt><dd class="text-right font-medium text-slate-800">{{ $value }}</dd></div>
                                    @endforeach
                                </dl>
                            @endif
                        </div>
                    @endforeach
                </div>
            </x-ui.card>

            {{-- Internal notes --}}
            <x-ui.card title="Internal notes" description="Staff-only timeline. Notes cannot be edited or deleted." icon="chat-bubble-left-ellipsis">
                @can('addNote', $workOrder)
                    <form wire:submit="addNote" class="mb-5">
                        <label for="note" class="sr-only">New internal note</label>
                        <textarea id="note" wire:model="note" rows="2" maxlength="5000" placeholder="Add an internal note..." class="form-control" aria-invalid="{{ $errors->has('note') ? 'true' : 'false' }}"></textarea>
                        @error('note')<p class="form-error">{{ $message }}</p>@enderror
                        <div class="mt-2 flex justify-end"><x-ui.button type="submit" size="sm" icon="plus" loading="addNote">Add note</x-ui.button></div>
                    </form>
                @endcan
                <ul class="space-y-4">
                    @forelse ($workOrder->notes as $entry)
                        <li class="flex gap-3" wire:key="note-{{ $entry->id }}">
                            <span class="flex size-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600" aria-hidden="true">{{ $entry->author?->initials() ?? '?' }}</span>
                            <div class="min-w-0 flex-1">
                                <p class="text-xs text-slate-500"><span class="font-medium text-slate-800">{{ $entry->author?->name ?? 'Unknown' }}</span> · {{ format_datetime($entry->created_at) }}</p>
                                <p class="mt-1 whitespace-pre-line text-sm text-slate-700">{{ $entry->body }}</p>
                            </div>
                        </li>
                    @empty
                        <li class="text-sm text-slate-500">No internal notes yet.</li>
                    @endforelse
                </ul>
            </x-ui.card>

            {{-- Attachments --}}
            <x-ui.card title="Attachments" :description="'Allowed: '.strtoupper(implode(', ', $allowedExtensions)).' · up to '.$maxUploadMb.' MB'" icon="paper-clip">
                @can('uploadAttachment', $workOrder)
                    <form wire:submit="uploadAttachment" class="mb-5 flex flex-col gap-3 rounded-lg border border-dashed border-slate-300 p-4 sm:flex-row sm:items-center">
                        <label for="upload" class="sr-only">Choose a file</label>
                        <input id="upload" type="file" wire:model="upload" accept=".{{ implode(',.', $allowedExtensions) }}"
                               class="block w-full text-sm text-slate-600 file:mr-3 file:rounded-lg file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-slate-700 hover:file:bg-slate-200">
                        <x-ui.button type="submit" size="sm" icon="arrow-up-tray" loading="uploadAttachment" :disabled="! $upload">Upload</x-ui.button>
                    </form>
                    <div wire:loading wire:target="upload" class="-mt-3 mb-4 text-xs text-slate-500">Uploading file...</div>
                    @error('upload')<p class="form-error -mt-3 mb-4">{{ $message }}</p>@enderror
                @endcan
                <ul class="divide-y divide-slate-100">
                    @forelse ($workOrder->attachments as $attachment)
                        <li class="flex items-center gap-3 py-3" wire:key="att-{{ $attachment->ulid }}">
                            <span class="icon-tile size-9 tone-neutral"><x-icon :name="$attachment->isImage() ? 'photo' : 'document-text'" class="size-4" /></span>
                            <div class="min-w-0 flex-1">
                                <p class="truncate text-sm font-medium text-slate-900">{{ $attachment->original_name }}</p>
                                <p class="text-xs text-slate-500">{{ strtoupper($attachment->extension) }} · {{ number_format($attachment->size / 1024, 0) }} KB · {{ $attachment->uploader?->name }} · {{ format_datetime($attachment->created_at) }}</p>
                            </div>
                            <a href="{{ route('attachments.download', $attachment) }}" class="btn-icon" title="Download"><x-icon name="arrow-down-tray" class="size-4" /><span class="sr-only">Download {{ $attachment->original_name }}</span></a>
                            @can('delete', $attachment)
                                <button type="button" class="btn-icon" title="Delete" wire:click="deleteAttachment('{{ $attachment->ulid }}')" wire:confirm="Delete this attachment? The file is removed permanently; the action is logged.">
                                    <x-icon name="trash" class="size-4" /><span class="sr-only">Delete {{ $attachment->original_name }}</span>
                                </button>
                            @endcan
                        </li>
                    @empty
                        <li class="py-2 text-sm text-slate-500">No attachments.</li>
                    @endforelse
                </ul>
            </x-ui.card>

            {{-- Activity --}}
            <x-ui.card title="Activity history" icon="clock" :padding="false">
                <ul class="divide-y divide-slate-100">
                    @foreach ($activity as $entry)
                        <li class="flex flex-wrap items-baseline justify-between gap-2 px-5 py-3 text-sm">
                            <span><span class="font-medium text-slate-900">{{ \Illuminate\Support\Str::headline(str_replace('work_order.', '', $entry->event)) }}</span>
                                <span class="text-slate-500">by {{ $entry->actor_name ?? 'System' }}</span>
                                @if ($entry->description)<span class="block text-xs text-slate-500">{{ \Illuminate\Support\Str::limit($entry->description, 160) }}</span>@endif
                            </span>
                            <time class="text-xs text-slate-500">{{ format_datetime($entry->created_at) }}</time>
                        </li>
                    @endforeach
                </ul>
            </x-ui.card>
        </div>

        <div class="space-y-6">
            {{-- Pricing --}}
            <x-ui.card title="Pricing (snapshot)" icon="currency-dollar">
                <p class="text-3xl font-semibold tabular-nums tracking-tight text-slate-900">{{ format_money($workOrder->monthly_price ?? $workOrder->package_price) }}<span class="text-base font-normal text-slate-500">{{ $workOrder->monthly_price !== null ? '/mo' : $workOrder->price_frequency->suffix() }}</span></p>
                <dl class="mt-4 space-y-2.5 text-sm">
                    <div class="flex justify-between"><dt class="text-slate-500">Package price</dt><dd class="tabular-nums">{{ format_money($workOrder->package_price) }} {{ $workOrder->price_frequency->label() }}</dd></div>
                    @if ($workOrder->promotional_price !== null)
                        <div class="flex justify-between"><dt class="text-slate-500">Promotional price</dt><dd class="text-right tabular-nums text-emerald-700">{{ format_money($workOrder->promotional_price) }}@if ($workOrder->promotion_end_date)<span class="block text-xs text-slate-500">until {{ format_date($workOrder->promotion_end_date) }}</span>@endif</dd></div>
                    @endif
                    <div class="flex justify-between"><dt class="text-slate-500">Installation</dt><dd class="tabular-nums">{{ format_money($workOrder->installation_charge) }}</dd></div>
                    <div class="flex justify-between"><dt class="text-slate-500">Activation</dt><dd class="tabular-nums">{{ format_money($workOrder->activation_charge) }}</dd></div>
                </dl>
                <p class="mt-4 text-xs text-slate-500">Informational only. No payments are collected in this portal.</p>
            </x-ui.card>

            {{-- Dates --}}
            <x-ui.card title="Dates" icon="calendar-days">
                <dl class="space-y-3">
                    <x-ui.detail label="Order created" :value="format_datetime($workOrder->created_at)" />
                    <x-ui.detail label="Work order date" :value="format_date($workOrder->work_order_date)" />
                    <x-ui.detail label="Requested installation" :value="$workOrder->requested_installation_date ? format_date($workOrder->requested_installation_date) : null" />
                    <x-ui.detail label="Scheduled installation" :value="$workOrder->scheduled_installation_date ? format_date($workOrder->scheduled_installation_date).($workOrder->scheduled_time_window ? ' · '.$workOrder->scheduled_time_window->label() : '') : null" />
                    <x-ui.detail label="Deadline" :value="format_date($workOrder->deadline_date)" />
                    @if ($workOrder->submitted_at)<x-ui.detail label="Submitted" :value="format_datetime($workOrder->submitted_at)" />@endif
                    @if ($workOrder->completion_date)<x-ui.detail label="Completion date" :value="format_date($workOrder->completion_date)" />@endif
                    @if ($workOrder->completion_notes)<x-ui.detail label="Completion notes" :value="$workOrder->completion_notes" />@endif
                </dl>
            </x-ui.card>

            {{-- Handling --}}
            <x-ui.card title="Handling" icon="identification">
                <dl class="space-y-3">
                    <x-ui.detail label="Seller" :value="$workOrder->seller?->fullName()" />
                    <x-ui.detail label="Assigned to" :value="$workOrder->assignedUser?->name ?? 'Unassigned'" />
                    <x-ui.detail label="Created by" :value="$workOrder->creator?->name" />
                    @if (auth()->user()->hasMultipleOrganizations())<x-ui.detail label="Organization" :value="$customer?->organization?->name" />@endif
                    @if ($workOrder->customer_notes)<x-ui.detail label="Customer notes"><span class="whitespace-pre-line">{{ $workOrder->customer_notes }}</span></x-ui.detail>@endif
                </dl>
            </x-ui.card>

            {{-- Status timeline --}}
            <x-ui.card title="Status timeline" icon="arrow-path">
                <ol class="relative space-y-5 border-l border-slate-200 pl-6">
                    @foreach ($workOrder->statusHistories as $history)
                        <li class="relative">
                            <span class="absolute -left-[33px] flex size-5 items-center justify-center rounded-full bg-white ring-2 ring-slate-200">
                                <x-icon :name="$history->to_status->icon()" class="size-3 text-slate-600" />
                            </span>
                            <p class="text-sm font-medium text-slate-900">
                                @if ($history->from_status){{ $history->from_status->label() }} → @endif{{ $history->to_status->label() }}
                            </p>
                            <p class="text-xs text-slate-500">{{ format_datetime($history->created_at) }} · {{ $history->changedBy?->name ?? 'System' }}</p>
                            @if ($history->remarks)<p class="mt-1 text-sm text-slate-600">{{ $history->remarks }}</p>@endif
                        </li>
                    @endforeach
                </ol>
            </x-ui.card>
        </div>
    </div>

    {{-- Status change dialog --}}
    <x-ui.modal wire:model="showStatusModal" :title="$target ? $workOrder->status->actionLabel($target).' work order' : 'Change status'"
        :description="$target ? $workOrder->status->label().' → '.$target->label() : null"
        :icon="$target?->icon() ?? 'arrow-path'" :tone="$target ? $target->tone() : 'brand'">
        @if ($target)
            <form wire:submit="applyTransition" id="status-form" class="space-y-4" novalidate>
                @if ($target === \App\Enums\WorkOrderStatus::Scheduled)
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <x-ui.input label="Installation date" name="scheduled_installation_date" type="date" :required="true" />
                        <x-ui.select label="Arrival window" name="scheduled_time_window" :options="\App\Enums\TimeWindow::options()" placeholder="Not specified" />
                    </div>
                    <x-ui.textarea label="Remarks" name="remarks" rows="2" maxlength="2000" />
                @elseif ($target === \App\Enums\WorkOrderStatus::Completed)
                    <x-ui.input label="Completion date" name="completion_date" type="date" :required="true" :max="\App\Support\BusinessClock::todayString()" hint="Cannot be in the future or before the work order date." />
                    <x-ui.textarea label="Completion notes" name="completion_notes" rows="3" maxlength="5000" />
                @elseif ($target === \App\Enums\WorkOrderStatus::Cancelled)
                    <x-ui.alert tone="warning">Cancelling stops all work on this order. It can only be reopened by users with the recovery permission.</x-ui.alert>
                    <x-ui.textarea label="Cancellation reason" name="cancellation_reason" rows="3" maxlength="2000" :required="true" />
                @elseif ($workOrder->status->isRecoveryTransition($target))
                    <x-ui.alert tone="info">Reopening returns the order to Submitted. This recovery action is recorded in the audit log.</x-ui.alert>
                    <x-ui.textarea label="Reason for reopening" name="remarks" rows="3" maxlength="2000" :required="true" />
                @elseif (in_array($target, [\App\Enums\WorkOrderStatus::OnHold, \App\Enums\WorkOrderStatus::Failed], true))
                    <x-ui.textarea label="Reason" name="remarks" rows="3" maxlength="2000" :required="true" />
                @else
                    <x-ui.textarea label="Remarks (optional)" name="remarks" rows="2" maxlength="2000" />
                @endif
                @error('status')<x-ui.alert tone="danger">{{ $message }}</x-ui.alert>@enderror
                @error('general')<x-ui.alert tone="danger">{{ $message }}</x-ui.alert>@enderror
            </form>
        @endif
        <x-slot:footer>
            <x-ui.button variant="secondary" x-on:click="open = false">Close</x-ui.button>
            <x-ui.button type="submit" form="status-form" :variant="in_array($target, [\App\Enums\WorkOrderStatus::Cancelled, \App\Enums\WorkOrderStatus::Failed], true) ? 'danger' : 'primary'" icon="check" loading="applyTransition">
                {{ $target ? $workOrder->status->actionLabel($target) : 'Confirm' }}
            </x-ui.button>
        </x-slot:footer>
    </x-ui.modal>
</div>