@php
    use App\Models\Crm\Proposal;

    $statusColors = \App\Livewire\Crm\Proposals\Show::STATUS_COLORS;
    $control = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
    $tz = config('app.display_timezone');
    $seg = 'inline-flex h-9 items-center gap-1.5 whitespace-nowrap px-3 text-xs font-medium transition';

    $issueTone = ['fix' => ['pill' => 'bg-rose-50 text-rose-700 ring-rose-100', 'dot' => 'bg-rose-500'], 'tip' => ['pill' => 'bg-amber-50 text-amber-700 ring-amber-100', 'dot' => 'bg-amber-400']];
    $score = (int) ($writing['score'] ?? 0);
    $scoreTone = $score >= 85 ? 'text-emerald-600 ring-emerald-200 bg-emerald-50' : ($score >= 60 ? 'text-amber-600 ring-amber-200 bg-amber-50' : 'text-rose-600 ring-rose-200 bg-rose-50');
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <a href="{{ route('crm.proposals.index') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 hover:text-slate-700">
            <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('Proposals') }}
        </a>

        <x-page-header :title="$proposal->title" :subtitle="__('Version :v · written by :who', ['v' => $proposal->version, 'who' => $proposal->author?->name ?? __('Not available')])">
            <x-badge :color="$statusColors[$proposal->status] ?? 'slate'">{{ __(Proposal::STATUSES[$proposal->status] ?? $proposal->status) }}</x-badge>

            {{-- The document itself: on the letterhead, as a preview or a PDF. --}}
            <div class="inline-flex divide-x divide-slate-200 overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200">
                <a href="{{ route('crm.proposals.preview', $proposal) }}" wire:navigate class="{{ $seg }} text-slate-600 hover:bg-slate-50 hover:text-slate-900" title="{{ __('See it on the letterhead') }}">
                    <x-icon name="eye" class="h-3.5 w-3.5" /> {{ __('Preview') }}
                </a>
                <a href="{{ route('crm.proposals.pdf', ['proposal' => $proposal, 'download' => 1]) }}" class="{{ $seg }} text-slate-600 hover:bg-slate-50 hover:text-slate-900">
                    <x-icon name="arrow-down-tray" class="h-3.5 w-3.5" /> {{ __('PDF') }}
                </a>
                @if ($canDuplicate)
                    <a href="{{ route('crm.proposals.index', ['from' => $proposal->id]) }}" wire:navigate class="{{ $seg }} text-slate-600 hover:bg-slate-50 hover:text-slate-900" title="{{ __('Start a new proposal with this text') }}">
                        <x-icon name="document-duplicate" class="h-3.5 w-3.5" /> {{ __('Duplicate') }}
                    </a>
                @endif
            </div>

            @if ($editable && ! $editing)
                <x-secondary-button type="button" wire:click="openEdit">
                    <x-icon name="pencil-square" class="mr-1.5 h-4 w-4" /> {{ __('Write') }}
                </x-secondary-button>
                <x-button type="button" wire:click="openReview">
                    <x-icon name="shield-check" class="mr-1.5 h-4 w-4" /> {{ __('Ask a director to review') }}
                </x-button>
            @endif
            @if ($proposal->status === 'in_review' && $isDirector)
                <x-secondary-button type="button" wire:click="openDecision('changes')">
                    <x-icon name="arrow-uturn-left" class="mr-1.5 h-4 w-4" /> {{ __('Send back') }}
                </x-secondary-button>
                <x-button type="button" wire:click="openDecision('approve')">
                    <x-icon name="check" class="mr-1.5 h-4 w-4" /> {{ __('Approve') }}
                </x-button>
            @endif
            @if ($proposal->status === 'approved' && $canEdit)
                <x-button type="button" wire:click="submit" wire:confirm="{{ __('Record this version as sent to the client or partner? It becomes read-only.') }}" wire:loading.attr="disabled" wire:target="submit">
                    <x-icon name="paper-airplane" class="mr-1.5 h-4 w-4" /> {{ __('Mark as submitted') }}
                </x-button>
            @endif
            @if ($proposal->status === 'submitted' && $canEdit)
                <x-secondary-button type="button" wire:click="answer('declined')" wire:confirm="{{ __('Record that this proposal was declined?') }}">
                    <x-icon name="x-circle" class="mr-1.5 h-4 w-4" /> {{ __('Declined') }}
                </x-secondary-button>
                <x-button type="button" wire:click="answer('accepted')" wire:confirm="{{ __('Record that this proposal was accepted? It does not win the opportunity; that needs the quote and a confirmed job.') }}">
                    <x-icon name="check-circle" class="mr-1.5 h-4 w-4" /> {{ __('Accepted') }}
                </x-button>
            @endif
            @if ($proposal->isLocked() && $canNewVersion)
                <x-secondary-button type="button" wire:click="newVersion" wire:loading.attr="disabled" wire:target="newVersion">
                    <x-icon name="document-duplicate" class="mr-1.5 h-4 w-4" /> {{ __('Start a new version') }}
                </x-secondary-button>
            @endif
        </x-page-header>

        @if ($proposal->isLocked())
            <div class="flex items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                <x-icon name="lock-closed" class="mt-0.5 h-4 w-4 shrink-0" />
                <p>{{ __('This version was submitted on :date and is read-only. Any change is a new version.', ['date' => $proposal->submitted_at?->timezone($tz)->format('j M Y') ?? __('a date not recorded')]) }}</p>
            </div>
        @elseif ($proposal->status === 'in_review')
            <div class="flex items-start gap-3 rounded-2xl border border-indigo-200 bg-indigo-50 px-4 py-3 text-sm text-indigo-800">
                <x-icon name="shield-check" class="mt-0.5 h-4 w-4 shrink-0" />
                <p>{{ __('With :name for review. It cannot change until it is approved or sent back.', ['name' => $proposal->reviewer?->name ?? __('a director')]) }}</p>
            </div>
        @elseif ($proposal->status === 'draft' && $proposal->review_note)
            <div class="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                <x-icon name="arrow-uturn-left" class="mt-0.5 h-4 w-4 shrink-0" />
                <p><span class="font-semibold">{{ __('Sent back by :name:', ['name' => $proposal->reviewer?->name ?? __('a director')]) }}</span> {{ $proposal->review_note }}</p>
            </div>
        @endif

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            {{-- The document --}}
            <x-card class="overflow-hidden lg:col-span-2">
                @if ($editing)
                    {{-- Writing mode: the same editor as Letters, saved as the version's text. --}}
                    <div class="flex flex-col gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-3 sm:flex-row sm:items-center sm:justify-between">
                        <div class="flex items-center gap-2.5">
                            <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-700"><x-icon name="pencil-square" class="h-4 w-4" /></span>
                            <div>
                                <h2 class="text-sm font-bold text-slate-900">{{ __('Writing version :v', ['v' => $proposal->version]) }}</h2>
                                <p class="text-xs text-slate-400">{{ __('Printed on the company letterhead. The price stays on the quote.') }}</p>
                            </div>
                        </div>
                        <div class="flex flex-wrap items-center gap-2">
                            @if (trim(strip_tags($body)) !== '')
                                <x-secondary-button type="button" wire:click="useOutline" wire:confirm="{{ __('Replace what is written with the standard outline?') }}">
                                    <x-icon name="clipboard-document-check" class="mr-1.5 h-4 w-4" /> {{ __('Use the outline') }}
                                </x-secondary-button>
                            @else
                                <x-secondary-button type="button" wire:click="useOutline">
                                    <x-icon name="clipboard-document-check" class="mr-1.5 h-4 w-4" /> {{ __('Use the outline') }}
                                </x-secondary-button>
                            @endif
                            <x-secondary-button type="button" wire:click="checkWriting" wire:loading.attr="disabled" wire:target="checkWriting">
                                <x-icon name="sparkles" class="mr-1.5 h-4 w-4" />
                                <span wire:loading.remove wire:target="checkWriting">{{ __('Check the writing') }}</span>
                                <span wire:loading wire:target="checkWriting">{{ __('Reading…') }}</span>
                            </x-secondary-button>
                        </div>
                    </div>

                    <div class="space-y-4 p-5">
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-12">
                            <div class="sm:col-span-7">
                                <x-label for="title" value="{{ __('Title') }}" />
                                <x-input id="title" type="text" class="mt-1 block w-full" wire:model="title" />
                                <x-input-error for="title" class="mt-2" />
                            </div>
                            <div class="sm:col-span-5">
                                <x-label for="document_url" value="{{ __('Link to a document (optional)') }}" />
                                <x-input id="document_url" type="url" class="mt-1 block w-full" wire:model="document_url" placeholder="https://docs.google.com/…" />
                                <x-input-error for="document_url" class="mt-2" />
                            </div>
                        </div>

                        <x-tiptap-editor model="body" :label="__('Proposal')" :key="'proposal-'.$proposal->id.'-'.$editorKey" min-height="28rem" />

                        {{-- The writing check --}}
                        @if ($writing !== [])
                            @php $issues = $writing['issues'] ?? []; $fixes = collect($issues)->where('kind', 'fix')->count(); @endphp
                            <section class="rounded-2xl border border-slate-200 bg-slate-50/60" wire:key="writing-{{ $editorKey }}-{{ count($issues) }}">
                                <div class="flex flex-col gap-3 border-b border-slate-200/70 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
                                    <div class="flex items-center gap-3">
                                        <span class="flex h-11 w-11 items-center justify-center rounded-full text-sm font-bold tabular-nums ring-2 {{ $scoreTone }}">{{ $score }}</span>
                                        <div>
                                            <h3 class="text-sm font-bold text-slate-900">
                                                @if ($issues === [])
                                                    {{ __('Reads well. Nothing to fix.') }}
                                                @else
                                                    {{ trans_choice(':n point to look at|:n points to look at', count($issues), ['n' => count($issues)]) }}
                                                    @if ($fixes > 0) <span class="font-medium text-rose-600">· {{ trans_choice(':n to fix|:n to fix', $fixes, ['n' => $fixes]) }}</span> @endif
                                                @endif
                                            </h3>
                                            <p class="text-xs text-slate-500">
                                                {{ __(':w words · :s sentences · longest :l words · :h headings', ['w' => $writing['stats']['words'], 's' => $writing['stats']['sentences'], 'l' => $writing['stats']['longest'], 'h' => $writing['stats']['headings']]) }}
                                                @if ($writing['ai']['used'] ?? false) · <span class="text-indigo-600">{{ __('with the deeper AI review') }}</span> @endif
                                            </p>
                                        </div>
                                    </div>
                                    @if (! empty($writing['ai']['polished']))
                                        <x-button type="button" wire:click="usePolished" wire:confirm="{{ __('Replace the text in the editor with the polished version? Your current wording is lost unless you saved it.') }}">
                                            <x-icon name="sparkles" class="mr-1.5 h-4 w-4" /> {{ __('Use the polished version') }}
                                        </x-button>
                                    @endif
                                </div>

                                @if (! empty($writing['ai']['note']))
                                    <p class="border-b border-slate-200/70 px-4 py-2 text-xs text-slate-500">{{ $writing['ai']['note'] }}</p>
                                @endif

                                @if ($issues !== [])
                                    <ul class="divide-y divide-slate-200/70">
                                        @foreach ($issues as $i => $issue)
                                            <li wire:key="issue-{{ $i }}" class="flex items-start gap-3 px-4 py-3 text-sm">
                                                <span class="mt-1.5 h-2 w-2 shrink-0 rounded-full {{ $issueTone[$issue['kind']]['dot'] }}"></span>
                                                <div class="min-w-0 flex-1">
                                                    <div class="flex flex-wrap items-center gap-2">
                                                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold ring-1 {{ $issueTone[$issue['kind']]['pill'] }}">{{ $issue['category'] }}</span>
                                                        @if ($issue['excerpt'] !== '')
                                                            <span class="truncate font-mono text-xs text-slate-500">“{{ $issue['excerpt'] }}”</span>
                                                        @endif
                                                    </div>
                                                    <p class="mt-1 text-slate-700">{{ $issue['message'] }}</p>
                                                    @if (! empty($issue['suggestion']))
                                                        <p class="mt-0.5 text-xs text-emerald-700"><span class="font-semibold">{{ __('Try:') }}</span> {{ $issue['suggestion'] }}</p>
                                                    @endif
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            </section>
                        @elseif (! $aiAvailable)
                            <p class="text-xs text-slate-400">{{ __('Check the writing looks for spelling, grammar, tone and structure. The deeper AI review needs the AI assistant key on this installation.') }}</p>
                        @endif

                        <div class="flex items-center justify-end gap-3 border-t border-slate-100 pt-4">
                            <x-secondary-button type="button" wire:click="cancelEdit" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                            <x-button type="button" wire:click="saveEdit" wire:loading.attr="disabled" wire:target="saveEdit">
                                <span wire:loading.remove wire:target="saveEdit">{{ __('Save draft') }}</span>
                                <span wire:loading wire:target="saveEdit">{{ __('Saving…') }}</span>
                            </x-button>
                        </div>
                    </div>
                @else
                    <div class="flex items-center justify-between gap-3 border-b border-slate-100 px-5 py-4">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Content') }}</h2>
                        @if ($proposal->document_url)
                            <a href="{{ $proposal->document_url }}" target="_blank" rel="noopener" class="inline-flex items-center gap-1.5 text-sm font-semibold text-indigo-600 hover:text-indigo-800">
                                <x-icon name="link" class="h-3.5 w-3.5" /> {{ __('Open the linked document') }}
                            </a>
                        @endif
                    </div>
                    <div class="p-5 sm:p-8">
                        @if ($bodyHtml !== '')
                            <div class="tiptap-content text-sm leading-relaxed text-slate-700">{!! $bodyHtml !!}</div>
                        @else
                            <x-empty-state icon="document-text" :title="__('Nothing written yet')"
                                :message="$editable ? __('Use Write to draft it here, start from the outline, or link its document.') : __('No text recorded for this version.')" class="border-0 bg-transparent py-4" />
                        @endif
                    </div>
                @endif
            </x-card>

            <div class="space-y-6">
                <x-card class="p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('For') }}</h2>
                    <dl class="mt-3 space-y-3 text-sm">
                        @if ($proposal->opportunity)
                            <div>
                                <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Opportunity') }}</dt>
                                <dd class="mt-0.5"><a href="{{ route('crm.opportunities.show', $proposal->opportunity_id) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $proposal->opportunity->title }}</a></dd>
                            </div>
                        @endif
                        @if ($proposal->partnership)
                            <div>
                                <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Partnership') }}</dt>
                                <dd class="mt-0.5"><a href="{{ route('crm.partnerships.show', $proposal->partnership_id) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $proposal->partnership->name }}</a></dd>
                            </div>
                        @endif
                        <div>
                            <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Organisation') }}</dt>
                            <dd class="mt-0.5 text-slate-700">
                                @if ($proposal->customer)
                                    <a href="{{ route('crm.organisations.show', $proposal->customer_id) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $proposal->customer->name }}</a>
                                @else
                                    <span class="text-slate-400">{{ __('Not linked') }}</span>
                                @endif
                            </dd>
                        </div>
                        @if ($proposal->approvedBy)
                            <div>
                                <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Approved by') }}</dt>
                                <dd class="mt-0.5 text-slate-700">{{ $proposal->approvedBy->name }} · {{ $proposal->approved_at?->timezone($tz)->format('j M Y') }}</dd>
                            </div>
                        @endif
                    </dl>
                </x-card>

                <x-card class="p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Price') }}</h2>
                    <p class="mt-1 text-xs text-slate-400">{{ __('A proposal carries no price. It points at the quote that does.') }}</p>
                    @if ($proposal->quote)
                        <div class="mt-3 flex items-center justify-between gap-3 text-sm">
                            <div>
                                <p class="font-medium text-slate-900">{{ $proposal->quote->quote_number }}</p>
                                <p class="text-xs text-slate-400">{{ ucfirst(strtolower((string) $proposal->quote->status)) }}</p>
                            </div>
                            <span class="whitespace-nowrap tabular-nums font-semibold text-slate-900">{{ $proposal->quote->currency_code }} {{ number_format((float) $proposal->quote->total, 2) }}</span>
                        </div>
                        @if ($canViewQuotes)
                            <a href="{{ route('quotes.preview', $proposal->quote_id) }}" target="_blank" class="mt-2 inline-block text-xs font-semibold text-indigo-600 hover:text-indigo-800">{{ __('View the quote') }}</a>
                        @endif
                    @else
                        <p class="mt-3 text-sm text-slate-400">{{ __('No quote linked.') }}</p>
                    @endif

                    @if ($editable)
                        <div class="mt-4">
                            <x-label for="quoteId" value="{{ __('Linked quote') }}" />
                            <select id="quoteId" wire:model="quoteId" class="{{ $control }}">
                                <option value="">{{ __('None') }}</option>
                                @foreach ($quotes as $quote)
                                    <option value="{{ $quote->id }}">{{ $quote->quote_number }} · {{ ucfirst(strtolower((string) $quote->status)) }} · {{ $quote->currency_code }} {{ number_format((float) $quote->total, 2) }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="quoteId" class="mt-2" />
                            @if ($quotes->isEmpty())
                                <p class="mt-1 text-xs text-slate-400">{{ $proposal->opportunity_id ? __('No quote is linked to the opportunity yet. Request one on its Quotes tab.') : __('No quote for this organisation yet.') }}</p>
                            @endif
                            <x-secondary-button type="button" class="mt-3" wire:click="saveQuote" wire:loading.attr="disabled" wire:target="saveQuote">{{ __('Save link') }}</x-secondary-button>
                        </div>
                    @endif
                </x-card>

                <x-card class="overflow-hidden">
                    <div class="border-b border-slate-100 p-4 sm:p-5">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Versions') }}</h2>
                    </div>
                    <ul class="divide-y divide-slate-100">
                        @foreach ($versions as $version)
                            <li wire:key="version-{{ $version->id }}" class="flex items-center justify-between gap-3 px-4 py-3 text-sm sm:px-5 {{ $version->id === $proposal->id ? 'bg-indigo-50/50' : '' }}">
                                <div>
                                    @if ($version->id === $proposal->id)
                                        <span class="font-semibold text-slate-900">{{ __('Version :v', ['v' => $version->version]) }}</span>
                                    @else
                                        <a href="{{ route('crm.proposals.show', $version) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Version :v', ['v' => $version->version]) }}</a>
                                    @endif
                                    <p class="text-xs text-slate-400">
                                        {{ $version->author?->name ?? __('Not available') }}
                                        @if ($version->submitted_at) · {{ __('submitted :date', ['date' => $version->submitted_at->timezone($tz)->format('j M Y')]) }} @endif
                                    </p>
                                </div>
                                <x-badge :color="$statusColors[$version->status] ?? 'slate'">{{ __(Proposal::STATUSES[$version->status] ?? $version->status) }}</x-badge>
                            </li>
                        @endforeach
                    </ul>
                </x-card>
            </div>
        </div>
    </div>

    @if ($editable)
        <x-dialog-modal wire:model.live="showReview" maxWidth="lg">
            <x-slot name="title">{{ __('Ask a director to review') }}</x-slot>
            <x-slot name="content">
                <p class="text-sm text-slate-600">{{ __('Only directors approve proposals. The director you choose gets a review task; the draft is frozen until they approve it or send it back.') }}</p>
                <div class="mt-4">
                    <x-label for="reviewerId" value="{{ __('Director') }}" />
                    <select id="reviewerId" wire:model="reviewerId" class="{{ $control }}">
                        @foreach ($directors as $director)
                            <option value="{{ $director->id }}">{{ $director->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="reviewerId" class="mt-2" />
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showReview', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="requestReview" wire:loading.attr="disabled" wire:target="requestReview">
                    <span wire:loading.remove wire:target="requestReview">{{ __('Send for review') }}</span>
                    <span wire:loading wire:target="requestReview">{{ __('Sending…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif

    @if ($proposal->status === 'in_review' && $isDirector)
        <x-dialog-modal wire:model.live="showDecision" maxWidth="lg">
            <x-slot name="title">{{ $decision === 'changes' ? __('Send back for changes') : __('Approve version :v', ['v' => $proposal->version]) }}</x-slot>
            <x-slot name="content">
                <x-label for="decisionNote" value="{{ $decision === 'changes' ? __('What needs to change') : __('Note (optional)') }}" />
                <textarea id="decisionNote" rows="3" wire:model="decisionNote" class="{{ $control }}"></textarea>
                <x-input-error for="decisionNote" class="mt-2" />
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showDecision', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="decide" wire:loading.attr="disabled" wire:target="decide">
                    <span wire:loading.remove wire:target="decide">{{ $decision === 'changes' ? __('Send back') : __('Approve') }}</span>
                    <span wire:loading wire:target="decide">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>