@php
    $primary = $setting?->primary_color ?: '#124a61';
    $accent = $setting?->accent_color ?: '#2e86ab';
    $companyName = $setting?->company_name ?: $job->team?->name;
    $logoUrl = $setting?->logoSrc();

    $dims = [
        'rating_quality' => __('Quality'),
        'rating_turnaround' => __('Turnaround'),
        'rating_service' => __('Service'),
    ];

    $awaiting = $proofs->filter->awaitsClientDecision();

    // Livewire exposes public properties to the view; pull the three ratings into
    // one map so the star loop can read them by key without variable-variables.
    $current = [
        'rating_quality' => $rating_quality,
        'rating_turnaround' => $rating_turnaround,
        'rating_service' => $rating_service,
    ];
@endphp

<div style="--brand: {{ $primary }}; --accent: {{ $accent }};" class="mx-auto max-w-2xl px-4 py-8 sm:py-12">
    <style>
        .brand-gradient { background-image: linear-gradient(135deg, var(--brand), var(--accent)); }
        .brand-text { color: var(--brand); }
        .brand-ring:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
    </style>

    <div class="overflow-hidden rounded-2xl bg-white shadow-xl ring-1 ring-slate-900/5">

        {{-- Branded header --}}
        <div class="brand-gradient px-6 py-8 text-white sm:px-10">
            <div class="flex items-center gap-4">
                @if ($logoUrl)
                    <img src="{{ $logoUrl }}" alt="{{ $companyName }}" class="h-14 w-auto max-w-[160px] rounded bg-white/10 object-contain p-1">
                @endif
                <div>
                    <p class="text-lg font-bold leading-tight">{{ $companyName }}</p>
                    <p class="text-sm text-white/80">{{ __('Your order') }}</p>
                </div>
            </div>
            <div class="mt-6">
                <p class="text-xs font-semibold uppercase tracking-widest text-white/70">{{ $job->job_number }}</p>
                <h1 class="mt-1 text-2xl font-bold">{{ $job->title }}</h1>
                @if ($qualityAssured)
                    <span class="mt-3 inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1 text-xs font-semibold">
                        <x-icon name="check-circle" class="h-4 w-4" />
                        {{ __('Quality Assured') }}
                    </span>
                @endif
            </div>
        </div>

        <div class="px-6 py-8 sm:px-10">

            @if ($banner)
                <div class="mb-6 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
                    {{ $banner }}
                </div>
            @endif

            {{-- ===================== PROOFS AWAITING SIGN-OFF ===================== --}}
            @if ($awaiting->isNotEmpty())
                <div class="mb-8 rounded-2xl border-2 border-amber-300 bg-amber-50 p-5">
                    <h2 class="flex items-center gap-2 text-base font-bold text-amber-900">
                        <x-icon name="eye" class="h-5 w-5" />
                        {{ trans_choice('{1}Please check this proof|[2,*]Please check these proofs', $awaiting->count()) }}
                    </h2>
                    <p class="mt-1 text-sm text-amber-800">{{ __('We will not go to print until you are happy.') }}</p>

                    <div class="mt-4 space-y-3">
                        @foreach ($awaiting as $proof)
                            <div class="rounded-xl bg-white p-4 ring-1 ring-amber-200">
                                <a href="{{ route('portal.job.file', [$job->public_token, $proof]) }}" target="_blank" rel="noopener"
                                   class="flex items-center gap-3">
                                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-xs font-bold text-slate-500">
                                        {{ $proof->extension_label }}
                                    </span>
                                    <span class="min-w-0 flex-1">
                                        <span class="block truncate text-sm font-semibold text-slate-800">{{ $proof->original_name }}</span>
                                        <span class="block text-xs text-slate-400">{{ __('Tap to open') }} · {{ $proof->human_size }}</span>
                                    </span>
                                    <x-icon name="arrow-up-right" class="h-4 w-4 shrink-0 text-slate-300" />
                                </a>

                                @if ($changesFor === $proof->id)
                                    <div class="mt-4 border-t border-slate-100 pt-4">
                                        <label class="text-sm font-medium text-slate-700">{{ __('What needs changing?') }}</label>
                                        <textarea wire:model="changesComment" rows="3"
                                                  placeholder="{{ __('e.g. the phone number is wrong, please make the logo bigger…') }}"
                                                  class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0"></textarea>
                                        @error('changesComment') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                                        <div class="mt-3 flex gap-2">
                                            <button type="button" wire:click="requestChanges"
                                                    class="flex-1 rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-800">
                                                {{ __('Send this to the team') }}
                                            </button>
                                            <button type="button" wire:click="cancelChanges"
                                                    class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-600 transition hover:bg-slate-50">
                                                {{ __('Cancel') }}
                                            </button>
                                        </div>
                                    </div>
                                @else
                                    <div class="mt-4 grid grid-cols-2 gap-2 border-t border-slate-100 pt-4">
                                        <button type="button" wire:click="approveProof({{ $proof->id }})"
                                                class="flex items-center justify-center gap-2 rounded-xl bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-700">
                                            <x-icon name="check" class="h-4 w-4" />
                                            {{ __('Looks good') }}
                                        </button>
                                        <button type="button" wire:click="startChanges({{ $proof->id }})"
                                                class="flex items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
                                            <x-icon name="arrow-path" class="h-4 w-4" />
                                            {{ __('Needs changes') }}
                                        </button>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- ============================== PROGRESS ============================== --}}
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">{{ __('Progress') }}</h2>
            <ol class="mt-4 space-y-5">
                @foreach ($journey as $step)
                    <li class="flex gap-4">
                        <div class="flex flex-col items-center">
                            <span class="flex h-7 w-7 items-center justify-center rounded-full text-white
                                {{ $step['state'] === 'done' ? 'bg-emerald-500' : ($step['state'] === 'current' ? 'brand-gradient' : 'bg-slate-200 text-slate-400') }}">
                                @if ($step['state'] === 'done')
                                    <x-icon name="check" class="h-4 w-4" />
                                @else
                                    <span class="h-2 w-2 rounded-full bg-current"></span>
                                @endif
                            </span>
                            @unless ($loop->last)
                                <span class="mt-1 h-full w-px flex-1 {{ $step['state'] === 'done' ? 'bg-emerald-300' : 'bg-slate-200' }}"></span>
                            @endunless
                        </div>
                        <div class="pb-1">
                            <p class="text-sm font-semibold {{ $step['state'] === 'upcoming' ? 'text-slate-400' : 'text-slate-800' }}">{{ $step['label'] }}</p>
                            <p class="text-xs text-slate-400">{{ $step['date'] ? $step['date']->format('M j, Y') : ($step['state'] === 'current' ? __('In progress') : __('Pending')) }}</p>
                        </div>
                    </li>
                @endforeach
            </ol>

            {{-- ============================ YOUR ORDER ============================ --}}
            @if ($job->lineItems->isNotEmpty())
                <div class="mt-8">
                    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">{{ __('Your order') }}</h2>
                    <ul class="mt-3 divide-y divide-slate-100 rounded-xl border border-slate-100">
                        @foreach ($job->lineItems as $line)
                            <li class="flex items-center justify-between gap-3 px-4 py-2.5 text-sm">
                                <span class="font-medium text-slate-700">{{ $line->product?->name ?? $line->name }}</span>
                                <span class="text-slate-400">{{ rtrim(rtrim(number_format((float) $line->qty, 2), '0'), '.') }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- ============================== ARTWORK ============================== --}}
            <div class="mt-8 border-t border-slate-100 pt-6">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Your artwork') }}</h2>
                <p class="mt-1 text-sm text-slate-500">
                    {{ $canUpload
                        ? __('Send us the files for this order. You can add more at any time while we are working.')
                        : __('These are the files you sent us for this order.') }}
                </p>

                @if ($canUpload)
                    <div class="mt-4 grid gap-2 sm:grid-cols-2">
                        <label class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 px-4 py-6 text-center transition hover:border-slate-400 hover:bg-slate-100"
                               wire:loading.class="opacity-50" wire:target="incoming">
                            <x-icon name="arrow-up-tray" class="h-7 w-7 text-slate-400" />
                            <span class="text-sm font-semibold text-slate-700">{{ __('Choose files') }}</span>
                            <span class="text-xs text-slate-400">{{ __('PDF, images, Word · 12 MB each') }}</span>
                            <input type="file" wire:model="incoming" multiple class="hidden"
                                   accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.ai,.eps,.svg,image/*,application/pdf">
                        </label>

                        {{-- Straight to the camera on a phone, for a site photo or a sign to match. --}}
                        <label class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 px-4 py-6 text-center transition hover:border-slate-400 hover:bg-slate-100 sm:hidden"
                               wire:loading.class="opacity-50" wire:target="incoming">
                            <x-icon name="photo" class="h-7 w-7 text-slate-400" />
                            <span class="text-sm font-semibold text-slate-700">{{ __('Take a photo') }}</span>
                            <span class="text-xs text-slate-400">{{ __('A site photo or a sign to match') }}</span>
                            <input type="file" wire:model="incoming" accept="image/*" capture="environment" class="hidden">
                        </label>
                    </div>

                    <x-upload-progress target="incoming" class="mt-3" />
                @endif

                @if ($myFiles->isNotEmpty())
                    <ul class="mt-4 space-y-2">
                        @foreach ($myFiles as $file)
                            <li class="flex items-center gap-3 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2.5">
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white text-[10px] font-bold text-slate-400 ring-1 ring-slate-900/5">
                                    {{ $file->extension_label }}
                                </span>
                                <a href="{{ route('portal.job.file', [$job->public_token, $file]) }}" target="_blank" rel="noopener" class="min-w-0 flex-1">
                                    <span class="block truncate text-sm font-medium text-slate-700">{{ $file->original_name }}</span>
                                    <span class="block text-xs text-slate-400">{{ $file->human_size }} · {{ $file->created_at->format('M j') }}</span>
                                </a>
                                @if ($canWithdraw)
                                    <button type="button" wire:click="withdraw({{ $file->id }})"
                                            wire:confirm="{{ __('Remove this file?') }}"
                                            class="shrink-0 rounded-lg p-1.5 text-slate-400 transition hover:bg-rose-50 hover:text-rose-500">
                                        <x-icon name="x-mark" class="h-5 w-5" />
                                    </button>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                @elseif (! $canUpload)
                    <p class="mt-3 rounded-xl bg-slate-50 px-4 py-3 text-sm text-slate-500">{{ __('No files were sent through this page.') }}</p>
                @endif
            </div>

            {{-- ====================== PROOFS ALREADY ANSWERED ====================== --}}
            @php $answered = $proofs->reject->awaitsClientDecision(); @endphp
            @if ($answered->isNotEmpty())
                <div class="mt-8 border-t border-slate-100 pt-6">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Proofs') }}</h2>
                    <ul class="mt-3 space-y-2">
                        @foreach ($answered as $proof)
                            <li class="rounded-xl border border-slate-100 bg-slate-50 px-3 py-2.5">
                                <div class="flex items-center gap-3">
                                    <a href="{{ route('portal.job.file', [$job->public_token, $proof]) }}" target="_blank" rel="noopener" class="min-w-0 flex-1">
                                        <span class="block truncate text-sm font-medium text-slate-700">{{ $proof->original_name }}</span>
                                    </a>
                                    @if ($proof->proof_status === \App\Models\JobAttachment::PROOF_APPROVED)
                                        <span class="shrink-0 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700">{{ __('You approved this') }}</span>
                                    @else
                                        <span class="shrink-0 rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-700">{{ __('Changes requested') }}</span>
                                    @endif
                                </div>
                                @if ($proof->proof_comment)
                                    <p class="mt-2 border-l-2 border-slate-200 pl-3 text-xs italic text-slate-500">{{ $proof->proof_comment }}</p>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- ============================ CERTIFICATE ============================ --}}
            @if ($qualityAssured)
                <div class="mt-6">
                    <a href="{{ route('portal.job.certificate', $job->public_token) }}" target="_blank" rel="noopener"
                       class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-white px-5 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
                        <x-icon name="arrow-down-tray" class="h-4 w-4" />
                        {{ __('Download Quality Certificate') }}
                    </a>
                </div>
            @endif

            {{-- ============================== FEEDBACK ============================== --}}
            @if ($canRate)
                <div class="mt-8 border-t border-slate-100 pt-6">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('How did we do?') }}</h2>

                    @if ($feedback?->submitted_at)
                        <p class="mt-1 text-sm text-slate-500">{{ __('Thank you, you rated this order on :date.', ['date' => $feedback->submitted_at->format('M j, Y')]) }}</p>
                        <dl class="mt-4 space-y-2">
                            @foreach ($dims as $key => $label)
                                <div class="flex items-center justify-between gap-4">
                                    <dt class="text-sm text-slate-500">{{ $label }}</dt>
                                    <dd class="text-sm font-semibold text-amber-500">
                                        {{ $feedback->{$key} ? str_repeat('★', (int) $feedback->{$key}).str_repeat('☆', 5 - (int) $feedback->{$key}) : '—' }}
                                    </dd>
                                </div>
                            @endforeach
                        </dl>
                        @if ($feedback->comment)
                            <blockquote class="mt-4 border-l-2 border-slate-200 pl-4 text-sm italic text-slate-600">{{ $feedback->comment }}</blockquote>
                        @endif
                        @if ($reviewOffer)
                            <div class="mt-5 rounded-xl border border-slate-200 bg-slate-50 p-4">
                                <p class="text-sm text-slate-600">{{ __('If you have a moment, a Google review helps other people find us.') }}</p>
                                <button type="button" wire:click="openGoogleReview" wire:loading.attr="disabled" wire:target="openGoogleReview"
                                        class="brand-gradient mt-3 inline-flex w-full items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:opacity-90 disabled:opacity-50">
                                    <x-icon name="star" class="h-4 w-4" />
                                    {{ __('Leave a Google review') }}
                                </button>
                            </div>
                        @elseif ($reviewWithheld)
                            <p class="mt-4 text-sm text-slate-600">{{ __('We are sorry this was not what you hoped for. Someone from the team will follow up.') }}</p>
                        @endif
                    @else
                        <p class="mt-1 text-sm text-slate-500">{{ __('Your rating goes straight to our management team. It takes a minute.') }}</p>

                        <div class="mt-4 space-y-4">
                            @foreach ($dims as $key => $label)
                                <div>
                                    <label class="text-sm font-medium text-slate-700">{{ $label }}</label>
                                    <div class="mt-1 flex gap-1">
                                        @foreach (range(1, 5) as $n)
                                            <button type="button" wire:click="$set('{{ $key }}', {{ $n }})"
                                                    class="text-2xl leading-none transition {{ (int) ($current[$key] ?? 0) >= $n ? 'text-amber-400' : 'text-slate-300 hover:text-amber-200' }}">★</button>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach

                            <div>
                                <label class="text-sm font-medium text-slate-700">{{ __('Anything you would like to add? (optional)') }}</label>
                                <textarea wire:model="comment" rows="3"
                                          class="brand-ring mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:ring-0"></textarea>
                                @error('comment') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                            </div>

                            <label class="flex cursor-pointer items-start gap-3">
                                <input type="checkbox" wire:model="allow_testimonial" class="mt-0.5 h-5 w-5 rounded border-slate-300 text-slate-800 focus:ring-0">
                                <span class="text-sm text-slate-600">{{ __('You may use my comment as a testimonial.') }}</span>
                            </label>

                            <button type="button" wire:click="submitFeedback" wire:loading.attr="disabled" wire:target="submitFeedback"
                                    class="brand-gradient w-full rounded-xl px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:opacity-90 disabled:opacity-50">
                                {{ __('Send feedback') }}
                            </button>
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </div>

    <p class="mt-6 text-center text-xs text-slate-400">
        {{ __('This page is private to you. Keep the link to check back at any time.') }}
    </p>
</div>