@extends('admin.layouts.app')

@section('title', 'Approval #' . $approval->id . ' — ' . __('admin.brand.name'))
@section('page_title', 'Approval #' . $approval->id)

@push('styles')
<style>
    .apx { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
    @media (max-width: 900px) { .apx { grid-template-columns: 1fr; } }
    .apx .card { padding: 0; }
    .apx .card h3 { margin: 0; padding: 14px 16px; border-bottom: 1px solid #eef2f7; font-size: 14px; }
    .apx .card .body { padding: 14px 16px; }
    .kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 13px; }
    .kv dt { color: #64748b; } .kv dd { margin: 0; }
    .kv code { font-size: 12px; }
    .tl { list-style: none; margin: 0; padding: 0; }
    .tl li { position: relative; padding: 0 0 16px 24px; border-left: 2px solid #e2e8f0; }
    .tl li:last-child { border-left-color: transparent; }
    .tl li .dot { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 999px; background: #cbd5e1; border: 2px solid #fff; }
    .tl li.done .dot { background: #1e7a33; } .tl li.cur .dot { background: #4f46e5; }
    .tl .t { font-weight: 700; font-size: 13px; } .tl .ts { color: #94a3b8; font-size: 12px; }
    .decide { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    .decide button { border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 700; color: #fff; cursor: pointer; }
    .decide .approve { background: #1e7a33; } .decide .reject { background: #c62828; } .decide .cancel { background: #64748b; }
    .pill { display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff; }
</style>
@endpush

@section('content')
@if (session('status'))<div class="alert alert-success">{{ session('status') }}</div>@endif
@if (session('error'))<div class="alert alert-danger">{{ session('error') }}</div>@endif

@php
    $run = $approval->agentRun;
    $statusColors = ['pending'=>'#b76e00','approved'=>'#1e7a33','rejected'=>'#c62828','cancelled'=>'#64748b','expired'=>'#64748b'];
    $steps = [
        ['t' => 'Agent analyzed', 'ts' => optional($run?->completed_at ?? $run?->started_at)->format('Y-m-d H:i'), 'done' => $run !== null],
        ['t' => 'Approval created', 'ts' => optional($approval->created_at)->format('Y-m-d H:i'), 'done' => true],
        ['t' => 'Admin viewed', 'ts' => optional($approval->viewed_at)->format('Y-m-d H:i'), 'done' => $approval->viewed_at !== null],
        ['t' => 'Decision: ' . ucfirst($approval->status), 'ts' => optional($approval->decided_at)->format('Y-m-d H:i'), 'done' => in_array($approval->status, ['approved','rejected','cancelled','expired'], true)],
        ['t' => 'Execution ' . ($run?->execution_status ?? 'not_started'), 'ts' => $run && $run->execution_status !== 'not_started' ? optional($run->completed_at)->format('Y-m-d H:i') : null, 'done' => in_array($run?->execution_status, ['executed','failed','blocked','cancelled'], true)],
    ];
@endphp

<div class="apx">
    <div>
        <div class="card">
            <h3>Request</h3>
            <div class="body">
                <dl class="kv">
                    <dt>Startup</dt><dd><strong>{{ $approval->startup?->name ?? '—' }}</strong></dd>
                    <dt>Agent</dt><dd>{{ $approval->agent?->name ?? $approval->agent_key }}</dd>
                    <dt>Run ID</dt><dd><a href="{{ route('admin.agents.runs.show', $approval->agent_run_id) }}">#{{ $approval->agent_run_id }}</a></dd>
                    <dt>Correlation ID</dt><dd><code>{{ $approval->correlation_id }}</code></dd>
                    <dt>Proposed action</dt><dd><code>{{ $approval->action_key }}</code></dd>
                    <dt>Transition</dt><dd>{{ $approval->current_group ?? '—' }} → <strong>{{ $approval->proposed_group ?? '—' }}</strong> @if($approval->proposed_status) ({{ $approval->proposed_status }}) @endif</dd>
                    <dt>Risk</dt><dd><span class="pill" style="background:{{ $approval->risk_level==='high'?'#c62828':($approval->risk_level==='expected'?'#b76e00':'#64748b') }}">{{ ucfirst($approval->risk_level) }}</span></dd>
                    <dt>Policy version</dt><dd>{{ $approval->policy_version ?? '—' }}</dd>
                    <dt>Status</dt><dd><span class="pill" style="background:{{ $statusColors[$approval->status] ?? '#64748b' }}">{{ ucfirst($approval->status) }}</span></dd>
                    <dt>Execution status</dt><dd>{{ $run?->execution_status ?? 'not_started' }}</dd>
                    <dt>Reason</dt><dd>{{ $approval->reason ?? '—' }}</dd>
                    <dt>Expires</dt><dd>{{ optional($approval->expires_at)->format('Y-m-d H:i') ?? '—' }}</dd>
                    @if ($approval->decided_by)<dt>Decided by</dt><dd>{{ $approval->decidedBy?->name }} · {{ optional($approval->decided_at)->format('Y-m-d H:i') }}</dd>@endif
                    @if ($approval->decision_comment)<dt>Comment</dt><dd>{{ $approval->decision_comment }}</dd>@endif
                </dl>

                @if ($approval->isPending())
                    <form method="POST" action="{{ route('admin.approvals.decide', $approval) }}" class="decide" onsubmit="return confirm('Record this decision?');">
                        @csrf
                        <input type="text" name="comment" placeholder="Optional comment" style="flex:1 1 200px;border:1px solid #e2e8f0;border-radius:8px;padding:8px;">
                        <button class="approve" name="decision" value="approve">Approve</button>
                        <button class="reject" name="decision" value="reject">Reject</button>
                        <button class="cancel" name="decision" value="cancel">Cancel</button>
                    </form>
                    <p class="muted" style="font-size:12px;margin-top:8px;">On approval, Make re-runs expected-state + transition + idempotency validation before executing. Human decisions take precedence over AI.</p>
                @endif
            </div>
        </div>
    </div>

    <div class="card">
        <h3>{{ __('admin.agents.approvals.timeline') }}</h3>
        <div class="body">
            <ul class="tl">
                @foreach ($steps as $i => $s)
                    <li class="{{ $s['done'] ? 'done' : ($i === collect($steps)->search(fn($x)=>!$x['done']) ? 'cur' : '') }}">
                        <span class="dot"></span>
                        <div class="t">{{ $s['t'] }}</div>
                        <div class="ts">{{ $s['ts'] ?? '—' }}</div>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
@endsection