@php
    $ws = $approvalWorkspace ?? [];
    $terms = $ws['terms'] ?? ['requested' => [], 'recommended' => [], 'approved' => []];
    $req = $terms['requested'] ?? [];
    $rec = $terms['recommended'] ?? [];
    $apr = $terms['approved'] ?? [];
    $fmt = static fn ($n) => number_format((float) ($n ?? 0), 2);
    $termLabel = static function (array $row): string {
        $v = (int) ($row['term_value'] ?? 0);
        $u = (string) ($row['term_unit'] ?? 'monthly');

        return $v > 0 ? $v.' '.$u : '—';
    };
    // tabs = legacy pill nav; steps = parent Alpine workspaceStep drives visibility
    $lafMode = $approvalLafMode ?? 'steps';
    $stepMode = $lafMode === 'steps';
@endphp

<div
    class="loan-approval-laf09 {{ $stepMode ? 'loan-approval-laf09--steps' : 'mb-4 space-y-3' }}"
    @unless ($stepMode)
        x-data="{ section: 'terms' }"
    @endunless
>
    <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
        <div class="min-w-0">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Credit Approval Decision</p>
            <p class="text-sm font-semibold text-slate-900">{{ $ws['rail_label'] ?? 'Approval' }}</p>
            @if (! empty($ws['credit_approved']))
            <p class="text-xs text-slate-600">
                Credit approved
                @if (! empty($ws['ready_for_payout']))
                    · Ready for payout
                @else
                    · Not ready for payout
                @endif
            </p>
            @endif
        </div>
        @if (! empty($ws['frozen']))
            <span class="rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-900">Decision frozen</span>
        @endif
    </div>

    @unless ($stepMode)
        <nav class="flex flex-wrap gap-1" aria-label="Approval decision sections">
            @foreach ([
                'terms' => 'Terms',
                'context' => 'Context',
                'readiness' => 'Readiness',
                'exceptions' => 'Exceptions',
                'history' => 'History',
            ] as $key => $label)
                <button
                    type="button"
                    @click="section = '{{ $key }}'"
                    :class="section === '{{ $key }}' ? 'bg-slate-900 text-white' : 'bg-white text-slate-700'"
                    class="rounded-md border border-slate-200 px-2.5 py-1 text-xs font-medium"
                >{{ $label }}</button>
            @endforeach
        </nav>
    @endunless

    {{-- STEP 1 / Terms --}}
    <div
        @if ($stepMode)
            x-show="workspaceStep === 1"
            x-cloak
            class="space-y-3"
        @else
            x-show="section === 'terms'"
        @endif
    >
        <div class="overflow-x-auto rounded-lg border border-slate-200">
            <table class="min-w-full text-left text-xs">
                <thead class="bg-slate-50 text-slate-600">
                    <tr>
                        <th class="px-3 py-2 font-semibold">Field</th>
                        <th class="px-3 py-2 font-semibold">Requested</th>
                        <th class="px-3 py-2 font-semibold">Recommended</th>
                        <th class="px-3 py-2 font-semibold">Approved</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 bg-white text-slate-800">
                    <tr>
                        <td class="px-3 py-2 font-medium">Principal</td>
                        <td class="px-3 py-2">{{ $fmt($req['principal'] ?? 0) }}</td>
                        <td class="px-3 py-2">{{ $fmt($rec['principal'] ?? 0) }}</td>
                        <td class="px-3 py-2 font-semibold">{{ $fmt($apr['principal'] ?? 0) }}</td>
                    </tr>
                    <tr>
                        <td class="px-3 py-2 font-medium">Term</td>
                        <td class="px-3 py-2">{{ $termLabel($req) }}</td>
                        <td class="px-3 py-2">{{ $termLabel($rec) }}</td>
                        <td class="px-3 py-2 font-semibold">{{ $termLabel($apr) }}</td>
                    </tr>
                    <tr>
                        <td class="px-3 py-2 font-medium">Frequency</td>
                        <td class="px-3 py-2">{{ $req['repayment_frequency'] ?? '—' }}</td>
                        <td class="px-3 py-2">{{ $rec['repayment_frequency'] ?? '—' }}</td>
                        <td class="px-3 py-2 font-semibold">{{ $apr['repayment_frequency'] ?? '—' }}</td>
                    </tr>
                </tbody>
            </table>
            @if (! empty($rec['decision']))
                <p class="border-t border-slate-100 bg-white px-3 py-2 text-xs text-slate-600">
                    Appraisal recommendation:
                    <span class="font-medium text-slate-900">{{ str($rec['decision'])->replace('_', ' ')->headline() }}</span>
                </p>
            @endif
            <p class="border-t border-slate-100 bg-slate-50 px-3 py-2 text-xs text-slate-600">
                Approved principal is set when you record the approval decision. You can change it from the requested amount there.
            </p>
        </div>

        @if ($stepMode)
            <div class="grid gap-2 sm:grid-cols-2">
                <div class="rounded-lg border border-slate-200 bg-white p-3 text-xs">
                    <p class="font-semibold text-slate-800">Client</p>
                    <p class="mt-1 text-slate-700">{{ $ws['client_summary']['client_name'] ?? '—' }}</p>
                    <p class="text-slate-500">{{ $ws['client_summary']['client_number'] ?? '' }} · {{ $ws['client_summary']['branch'] ?? '' }}</p>
                    <p class="mt-1 text-slate-500">Product: {{ $ws['product'] ?? '—' }}</p>
                </div>
                <div class="rounded-lg border border-slate-200 bg-white p-3 text-xs">
                    <p class="font-semibold text-slate-800">Capacity & security</p>
                    @if (! empty($ws['affordability']['available']))
                        <p class="mt-1 text-slate-600">Affordability: {{ $ws['affordability']['result'] ?? '—' }} ({{ $ws['affordability']['installment_ratio'] ?? '—' }}%)</p>
                    @else
                        <p class="mt-1 text-slate-500">Affordability analysis unavailable</p>
                    @endif
                    <p class="mt-1 text-slate-600">Guarantors: {{ $ws['guarantors']['count'] ?? 0 }} · Collateral: {{ $ws['collateral'] ?? '—' }}</p>
                </div>
            </div>
        @endif
    </div>

    @unless ($stepMode)
        <div x-show="section === 'context'" x-cloak class="grid gap-2 sm:grid-cols-2">
            <div class="rounded-lg border border-slate-200 bg-white p-3 text-xs">
                <p class="font-semibold text-slate-800">Client</p>
                <p class="mt-1 text-slate-700">{{ $ws['client_summary']['client_name'] ?? '—' }}</p>
                <p class="text-slate-500">{{ $ws['client_summary']['client_number'] ?? '' }} · {{ $ws['client_summary']['branch'] ?? '' }}</p>
                <p class="mt-1 text-slate-500">Product: {{ $ws['product'] ?? '—' }}</p>
            </div>
            <div class="rounded-lg border border-slate-200 bg-white p-3 text-xs">
                <p class="font-semibold text-slate-800">Capacity & security</p>
                @if (! empty($ws['affordability']['available']))
                    <p class="mt-1 text-slate-600">Affordability: {{ $ws['affordability']['result'] ?? '—' }} ({{ $ws['affordability']['installment_ratio'] ?? '—' }}%)</p>
                @else
                    <p class="mt-1 text-slate-500">Affordability analysis unavailable</p>
                @endif
                <p class="mt-1 text-slate-600">Guarantors: {{ $ws['guarantors']['count'] ?? 0 }} · Collateral: {{ $ws['collateral'] ?? '—' }}</p>
            </div>
        </div>
    @endunless

    {{-- STEP 2 / Readiness + Exceptions --}}
    <div
        @if ($stepMode)
            x-show="workspaceStep === 2"
            x-cloak
            class="space-y-2 text-xs"
        @else
            x-show="section === 'readiness'"
            x-cloak
            class="space-y-2 text-xs"
        @endif
    >
        @php $appraisalReady = $ws['appraisal_summary']['readiness'] ?? []; @endphp
        <div class="rounded-lg border border-slate-200 bg-white p-3">
            <p class="font-semibold text-slate-800">Appraisal readiness</p>
            <p class="mt-1 text-slate-600">{{ str(($appraisalReady['status'] ?? 'unknown'))->replace('_', ' ')->headline() }} · {{ $appraisalReady['completion_percentage'] ?? 0 }}%</p>
        </div>
        <div class="rounded-lg border border-slate-200 bg-white p-3">
            <p class="font-semibold text-slate-800">Evidence before approval</p>
            @forelse (($ws['evidence']['before_approval_blockers'] ?? []) as $blocker)
                <p class="mt-1 text-rose-700">
                    {{ $blocker['label'] ?? 'Evidence required' }}
                    @if (! empty($blocker['action_url']))
                        <a href="{{ $blocker['action_url'] }}" class="ml-1 font-semibold underline">Open</a>
                    @endif
                </p>
            @empty
                <p class="mt-1 text-emerald-700">No evidence blocking approval.</p>
            @endforelse
        </div>
        @if (! empty($ws['pre_treasury_blockers']))
            <div class="rounded-lg border border-amber-200 bg-amber-50 p-3">
                <p class="font-semibold text-amber-900">Open items before payout</p>
                @foreach ($ws['pre_treasury_blockers'] as $blocker)
                    <p class="mt-1 text-amber-800">{{ $blocker['label'] ?? '' }}</p>
                @endforeach
            </div>
        @endif

        @if ($stepMode)
            @forelse (($ws['exceptions'] ?? []) as $ex)
                <div class="rounded-lg border border-amber-200 bg-white p-3">
                    <p class="font-semibold text-slate-800">{{ $ex['description'] ?? ($ex['type'] ?? 'Exception') }}</p>
                    <p class="mt-1 text-slate-600">Policy {{ $ex['policy_value'] ?? '—' }} → Actual {{ $ex['actual_value'] ?? '—' }}</p>
                    @if (! empty($ex['reason']))
                        <p class="mt-1 text-slate-700">{{ $ex['reason'] }}</p>
                    @endif
                </div>
            @empty
                <p class="rounded-lg border border-slate-200 bg-white p-3 text-slate-600">No exceptions recorded.</p>
            @endforelse
            @if (! empty($ws['conditions']))
                <div class="rounded-lg border border-slate-200 bg-white p-3">
                    <p class="font-semibold text-slate-800">Approval conditions</p>
                    <ul class="mt-1 list-disc space-y-1 pl-4 text-slate-700">
                        @foreach ($ws['conditions'] as $cond)
                            <li>
                                {{ $cond['description'] ?? '' }}
                                <span class="text-slate-500">({{ $cond['due_stage'] ?? 'before_treasury' }} · {{ $cond['status'] ?? 'open' }})</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @if (! empty($ws['graduation']))
                <div class="rounded-lg border border-slate-200 bg-white p-3">
                    <p class="font-semibold text-slate-800">Graduation context</p>
                    <p class="mt-1 text-slate-600">
                        Suggested {{ $fmt($ws['graduation']['suggested_limit'] ?? 0) }}
                        · Approved {{ $fmt($ws['graduation']['approved_amount'] ?? ($ws['graduation']['requested_amount'] ?? 0)) }}
                        @if (isset($ws['graduation']['graduation_percent']))
                            · {{ $ws['graduation']['graduation_percent'] }}%
                        @endif
                    </p>
                </div>
            @endif
        @endif
    </div>

    @unless ($stepMode)
        <div x-show="section === 'exceptions'" x-cloak class="space-y-2 text-xs">
            @forelse (($ws['exceptions'] ?? []) as $ex)
                <div class="rounded-lg border border-amber-200 bg-white p-3">
                    <p class="font-semibold text-slate-800">{{ $ex['description'] ?? ($ex['type'] ?? 'Exception') }}</p>
                    <p class="mt-1 text-slate-600">Policy {{ $ex['policy_value'] ?? '—' }} → Actual {{ $ex['actual_value'] ?? '—' }}</p>
                    @if (! empty($ex['reason']))
                        <p class="mt-1 text-slate-700">{{ $ex['reason'] }}</p>
                    @endif
                </div>
            @empty
                <p class="rounded-lg border border-slate-200 bg-white p-3 text-slate-600">No exceptions recorded.</p>
            @endforelse
            @if (! empty($ws['conditions']))
                <div class="rounded-lg border border-slate-200 bg-white p-3">
                    <p class="font-semibold text-slate-800">Approval conditions</p>
                    <ul class="mt-1 list-disc space-y-1 pl-4 text-slate-700">
                        @foreach ($ws['conditions'] as $cond)
                            <li>
                                {{ $cond['description'] ?? '' }}
                                <span class="text-slate-500">({{ $cond['due_stage'] ?? 'before_treasury' }} · {{ $cond['status'] ?? 'open' }})</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @if (! empty($ws['graduation']))
                <div class="rounded-lg border border-slate-200 bg-white p-3">
                    <p class="font-semibold text-slate-800">Graduation context</p>
                    <p class="mt-1 text-slate-600">
                        Suggested {{ $fmt($ws['graduation']['suggested_limit'] ?? 0) }}
                        · Approved {{ $fmt($ws['graduation']['approved_amount'] ?? ($ws['graduation']['requested_amount'] ?? 0)) }}
                        @if (isset($ws['graduation']['graduation_percent']))
                            · {{ $ws['graduation']['graduation_percent'] }}%
                        @endif
                    </p>
                </div>
            @endif
        </div>
    @endunless

    {{-- History: step 3 in steps mode, or History tab --}}
    <div
        @if ($stepMode)
            x-show="workspaceStep === 3"
            x-cloak
            class="rounded-lg border border-slate-200 bg-white p-3 text-xs"
        @else
            x-show="section === 'history'"
            x-cloak
            class="rounded-lg border border-slate-200 bg-white p-3 text-xs"
        @endif
    >
        <p class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Decision history</p>
        @if (! empty($ws['legacy_decision']))
            <p class="mb-2 text-slate-500">Earlier approval record.</p>
        @endif
        @forelse (($ws['timeline'] ?? []) as $entry)
            <div class="border-b border-slate-100 py-2 last:border-0">
                <p class="font-medium text-slate-800">{{ $entry['decision'] ?? '—' }} · {{ $entry['actor'] ?? '—' }}</p>
                <p class="text-slate-500">{{ optional($entry['timestamp'] ?? null)->diffForHumans() ?? '' }}</p>
                <p class="mt-0.5 text-slate-700">{{ $entry['comment'] ?? '' }}</p>
            </div>
        @empty
            <p class="text-slate-600">No decision timeline entries yet.</p>
        @endforelse
    </div>
</div>