@extends('admin.layouts.app')

@section('title', $agent->name . ' — ' . __('admin.nav.ai_agents'))
@section('page_title', $agent->name)

@push('styles')
<style>
    .agx { display: grid; gap: 16px; }
    .agx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 900px) { .agx-grid { grid-template-columns: 1fr; } }
    .agx .card { padding: 0; } .agx .card h3 { margin:0;padding:13px 16px;border-bottom:1px solid #eef2f7;font-size:14px; }
    .agx .card .body { padding: 14px 16px; }
    .kv { display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:13px; } .kv dt{color:#64748b;} .kv dd{margin:0;}
    .stat-row { display:flex;gap:18px;flex-wrap:wrap; } .stat { text-align:center; } .stat .n{font-size:22px;font-weight:800;} .stat .l{color:#64748b;font-size:12px;}
    .agx button { border:0;border-radius:8px;padding:8px 15px;font-weight:700;color:#fff;cursor:pointer; }
    .pol-allow{--badge-color:#1e7a33;} .pol-needs_approval{--badge-color:#b76e00;} .pol-blocked{--badge-color:#c62828;}
    /* Assigned Actions manager */
    .aa-count { font-size:11px;font-weight:800;color:#4338ca;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:2px 10px; }
    .aa-add { display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:12px;background:#fbfcfe;border:1px dashed #e2e8f0;border-radius:12px; }
    .aa-input { border:1px solid #e2e8f0;border-radius:8px;padding:8px 10px;font-size:13px;flex:1;min-width:160px;background:#fff; }
    .aa-input--pol { flex:0 0 150px;min-width:140px;font-weight:700; }
    .aa-btn-add { border:0;background:#4f46e5;color:#fff;border-radius:8px;padding:8px 16px;font-weight:700;cursor:pointer;flex:0 0 auto; }
    .aa-btn-add:disabled { opacity:.5;cursor:not-allowed; }
    .aa-table td { vertical-align:middle; } .aa-key { color:#94a3b8;font-size:11px;margin-inline-start:6px; }
    .aa-pol { border:1px solid #e2e8f0;border-radius:8px;padding:6px 10px;font-size:12.5px;font-weight:700;cursor:pointer;background:#fff;width:100%; }
    .aa-pol--always_allow { color:#047857;border-color:#a7f3d0;background:#ecfdf5; }
    .aa-pol--needs_approval { color:#b45309;border-color:#fed7aa;background:#fff7ed; }
    .aa-pol--blocked { color:#b91c1c;border-color:#fecaca;background:#fef2f2; }
    .aa-remove { border:1px solid #e2e8f0;background:#fff;color:#94a3b8;border-radius:8px;width:30px;height:30px;cursor:pointer;font-weight:700; }
    .aa-remove:hover { border-color:#fecaca;color:#dc2626;background:#fef2f2; }
    .aa-toast { position:fixed;bottom:20px;inset-inline-end:20px;background:#0f172a;color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;z-index:60;opacity:0;transform:translateY(8px);transition:.2s; }
    .aa-toast.show { opacity:1;transform:translateY(0); }
</style>
@endpush

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

<div class="agx">
    <div class="agx-grid">
        {{-- Overview --}}
        <div class="card">
            <h3>Overview</h3>
            <div class="body"><dl class="kv">
                <dt>Key</dt><dd><code>{{ $agent->agent_key }}</code></dd>
                <dt>Description</dt><dd>{{ $agent->description ?? '—' }}</dd>
                <dt>Environment</dt><dd>{{ $agent->environment }}</dd>
                <dt>Version</dt><dd>{{ $agent->agent_version ?? '—' }}</dd>
                <dt>Core skill</dt><dd>{{ $agent->core_skill_version ?? '—' }}</dd>
                <dt>Stage skill</dt><dd>{{ $agent->stage_skill_version ?? '—' }}</dd>
            </dl></div>
        </div>

        {{-- Runtime Controls --}}
        <div class="card">
            <h3>Runtime Controls</h3>
            <div class="body">
                <p>Effective: <span class="badge" style="--badge-color:{{ $effective['status']==='paused'?'#c62828':'#1e7a33' }}">{{ ucfirst($effective['status']) }}</span>
                   @if ($effective['source']==='global') <small class="muted">(forced by global pause)</small> @endif</p>
                <dl class="kv">
                    <dt>Pause mode</dt><dd>{{ $config?->pause_mode ?? 'pause_new_only' }}</dd>
                    <dt>Version</dt><dd>{{ $config?->version ?? '—' }}</dd>
                    <dt>Reason</dt><dd>{{ $config?->reason ?? '—' }}</dd>
                    <dt>Expires</dt><dd>{{ optional($config?->expires_at)->format('Y-m-d H:i') ?? '—' }}</dd>
                </dl>
                <div style="margin-top:10px;display:flex;gap:8px;">
                    @if ($effective['status']==='paused')
                        <form method="POST" action="{{ route('admin.agents.enable', $agent) }}">@csrf<input type="hidden" name="reason" value="manual"><button style="background:#1e7a33">Enable</button></form>
                    @else
                        <form method="POST" action="{{ route('admin.agents.pause', $agent) }}">@csrf
                            <select name="mode" style="border:1px solid #e2e8f0;border-radius:7px;padding:6px;">
                                <option value="pause_new_only">pause_new_only (enforced)</option>
                                <option value="cancel_queued">cancel_queued (future)</option>
                                <option value="cancel_running_if_safe">cancel_running_if_safe (future)</option>
                            </select>
                            <button style="background:#c62828">Pause</button>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Knowledge Cache (read-only) — per-environment active pointer + refresh + immutable history/rollback --}}
    <div class="card">
        <h3>Knowledge</h3>
        <div class="body">
            {{-- Active pointer per environment --}}
            <table style="width:100%;border-collapse:collapse;font-size:13px;">
                <thead><tr style="text-align:left;color:#64748b;">
                    <th style="padding:6px 8px;">Environment</th><th style="padding:6px 8px;">Active version</th>
                    <th style="padding:6px 8px;">Package</th><th style="padding:6px 8px;">Files</th>
                    <th style="padding:6px 8px;">Checksum</th><th style="padding:6px 8px;">Loaded</th>
                </tr></thead>
                <tbody>
                @foreach ($knowledgeEnvironments as $e)
                    @php $a = $knowledgeActive[$e] ?? null; @endphp
                    <tr style="border-top:1px solid #eef2f7;">
                        <td style="padding:6px 8px;">{{ $e }}</td>
                        <td style="padding:6px 8px;">@if ($a)<span class="badge" style="--badge-color:#1e7a33">{{ $a->version }}</span>@else<span class="muted">not loaded</span>@endif</td>
                        <td style="padding:6px 8px;">{{ $a?->package_version ?? '—' }}@if ($a && $a->registry_version)<span class="muted" style="font-size:11px;"> · reg {{ $a->registry_version }}</span>@endif</td>
                        <td style="padding:6px 8px;">{{ $a?->file_count ?? '—' }}</td>
                        <td style="padding:6px 8px;">@if ($a)<code style="font-size:11px">{{ \Illuminate\Support\Str::limit((string) $a->checksum, 12) }}</code>@endif</td>
                        <td style="padding:6px 8px;">{{ $a ? (optional($a->loaded_at)->format('Y-m-d H:i') ?? '—') : '—' }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>

            {{-- Refresh (environment-scoped) --}}
            <form method="POST" action="{{ route('admin.agents.knowledge.refresh', $agent) }}" style="margin-top:12px;display:flex;gap:8px;align-items:center;">@csrf
                <select name="environment" style="border:1px solid #e2e8f0;border-radius:7px;padding:6px;">
                    @foreach ($knowledgeEnvironments as $e)
                        <option value="{{ $e }}" @selected($e === $defaultEnvironment)>{{ $e }}</option>
                    @endforeach
                </select>
                <button style="background:#3D1A5B">Refresh Knowledge</button>
            </form>

            @if ($knowledgeHistory->isNotEmpty())
                <p class="muted" style="margin:14px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;">Version history (immutable)</p>
                <table style="width:100%;border-collapse:collapse;font-size:13px;">
                    <thead><tr style="text-align:left;color:#64748b;">
                        <th style="padding:6px 8px;">Env</th><th style="padding:6px 8px;">Version</th><th style="padding:6px 8px;">Package</th>
                        <th style="padding:6px 8px;">Files</th><th style="padding:6px 8px;">Status</th>
                        <th style="padding:6px 8px;">Checksum</th><th style="padding:6px 8px;">Loaded</th><th></th>
                    </tr></thead>
                    <tbody>
                    @foreach ($knowledgeHistory as $v)
                        <tr style="border-top:1px solid #eef2f7;">
                            <td style="padding:6px 8px;">{{ $v->environment }}</td>
                            <td style="padding:6px 8px;">{{ $v->version }}
                                @if ($v->is_active)<span class="badge" style="--badge-color:#1e7a33">active</span>@endif</td>
                            <td style="padding:6px 8px;">{{ $v->package_version ?? '—' }}</td>
                            <td style="padding:6px 8px;">{{ $v->file_count ?? '—' }}</td>
                            <td style="padding:6px 8px;">{{ $v->status }}</td>
                            <td style="padding:6px 8px;"><code style="font-size:11px">{{ \Illuminate\Support\Str::limit((string) $v->checksum, 12) }}</code></td>
                            <td style="padding:6px 8px;">{{ optional($v->loaded_at)->format('Y-m-d H:i') ?? '—' }}</td>
                            <td style="padding:6px 8px;text-align:right;">
                                @unless ($v->is_active)
                                    <form method="POST" action="{{ route('admin.agents.knowledge.rollback', [$agent, $v->environment, $v->version]) }}"
                                          onsubmit="return confirm('Activate {{ $v->environment }} {{ $v->version }} for {{ $agent->name }}?');">@csrf
                                        <button style="background:#6b7280">Activate</button>
                                    </form>
                                @endunless
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>

    {{-- Statistics --}}
    <div class="card">
        <h3>Statistics</h3>
        <div class="body stat-row">
            <div class="stat"><div class="n">{{ $stats['total_runs'] }}</div><div class="l">Total runs</div></div>
            <div class="stat"><div class="n">{{ number_format($stats['success_rate']*100,1) }}%</div><div class="l">Success rate</div></div>
            <div class="stat"><div class="n">{{ $stats['executed_runs'] }}</div><div class="l">Executed</div></div>
            <div class="stat"><div class="n">{{ $stats['failed_runs'] }}</div><div class="l">Failed</div></div>
            <div class="stat"><div class="n">{{ $stats['blocked'] }}</div><div class="l">Blocked</div></div>
            <div class="stat"><div class="n">{{ $stats['approvals'] }}</div><div class="l">Approvals</div></div>
        </div>
    </div>

    {{-- Assigned Actions — the source of truth for agent↔action assignment --}}
    <div class="card" x-data="assignedActions(
        @js($assignedActions),
        @js($availableActions),
        '{{ $agent->agent_key }}',
        '{{ $env }}',
        '{{ csrf_token() }}',
        '{{ route('admin.actions.policy') }}'
    )">
        <h3 style="display:flex;align-items:center;justify-content:space-between;gap:10px;">
            <span>{{ __('admin.agents.assigned_actions.title') }}</span>
            <span class="aa-count" x-text="assigned.length + ' / ' + (assigned.length + available.length)"></span>
        </h3>
        <div class="body">
            {{-- add-action row --}}
            <div class="aa-add" x-show="available.length">
                <select x-model="newAction" class="aa-input">
                    <option value="">{{ __('admin.agents.assigned_actions.pick_action') }}</option>
                    <template x-for="a in available" :key="a.action_key">
                        <option :value="a.action_key" x-text="a.name + '  ·  ' + a.action_key"></option>
                    </template>
                </select>
                <select x-model="newPolicy" class="aa-input aa-input--pol">
                    <option value="needs_approval">{{ __('admin.action_details.policy_approval') }}</option>
                    <option value="always_allow">{{ __('admin.action_details.policy_always') }}</option>
                    <option value="blocked">{{ __('admin.action_details.policy_blocked') }}</option>
                </select>
                <button type="button" class="aa-btn-add" :disabled="!newAction || busy" @click="add()">＋ {{ __('admin.agents.assigned_actions.add') }}</button>
            </div>

            <table class="data-table aa-table">
                <thead><tr>
                    <th>{{ __('admin.action_details.action_name') }}</th>
                    <th style="width:180px;">{{ __('admin.agents.assigned_actions.policy') }}</th>
                    <th style="width:90px;text-align:center;">{{ __('admin.agents.assigned_actions.enabled') }}</th>
                    <th style="width:60px;"></th>
                </tr></thead>
                <tbody>
                    <template x-for="row in assigned" :key="row.action_key">
                        <tr>
                            <td><strong x-text="row.name"></strong> <code class="aa-key" x-text="row.action_key"></code></td>
                            <td>
                                <select class="aa-pol" :class="'aa-pol--' + row.policy" x-model="row.policy" @change="change(row)">
                                    <option value="always_allow">{{ __('admin.action_details.policy_always') }}</option>
                                    <option value="needs_approval">{{ __('admin.action_details.policy_approval') }}</option>
                                    <option value="blocked">{{ __('admin.action_details.policy_blocked') }}</option>
                                </select>
                            </td>
                            <td style="text-align:center;">
                                <span class="badge" :style="row.enabled ? '--badge-color:#1e7a33' : '--badge-color:#94a3b8'" x-text="row.enabled ? '{{ __('admin.agents.assigned_actions.yes') }}' : '{{ __('admin.agents.assigned_actions.no') }}'"></span>
                            </td>
                            <td><button type="button" class="aa-remove" title="Remove" @click="remove(row)">✕</button></td>
                        </tr>
                    </template>
                    <tr x-show="assigned.length === 0">
                        <td colspan="4" class="muted" style="text-align:center;padding:22px;">{{ __('admin.agents.assigned_actions.empty') }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="aa-toast" :class="{ show: toast }" x-text="toast"></div>
    </div>

    {{-- Recent Runs --}}
    <div class="card">
        <h3>Recent Runs</h3>
        <div class="body" style="padding:0;">
            <table class="data-table">
                <thead><tr><th>Run</th><th>Startup</th><th>Trigger</th><th>Analysis</th><th>Execution</th><th>Started</th></tr></thead>
                <tbody>
                    @forelse ($recentRuns as $r)
                        <tr class="row-clickable" data-href="{{ route('admin.agents.runs.show', $r) }}">
                            <td>#{{ $r->id }}</td><td>{{ $r->startup_id }}</td><td>{{ $r->trigger_type }}</td>
                            <td>{{ $r->analysis_status }}</td><td>{{ $r->execution_status }}</td>
                            <td class="muted">{{ optional($r->started_at)->format('Y-m-d H:i') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="muted" style="text-align:center;padding:18px;">No runs yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
function assignedActions(assigned, available, agentKey, env, csrf, url) {
    return {
        assigned, available, agentKey, env, csrf, url,
        newAction: '', newPolicy: 'needs_approval', busy: false, toast: '', _t: null,
        flash(m) { this.toast = m; clearTimeout(this._t); this._t = setTimeout(() => this.toast = '', 1800); },
        async post(actionKey, policy) {
            const res = await fetch(this.url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': this.csrf, 'Accept': 'application/json' },
                body: JSON.stringify({ agent_key: this.agentKey, action_key: actionKey, environment: this.env, policy }),
            });
            return res.ok;
        },
        async add() {
            if (!this.newAction || this.busy) return;
            this.busy = true;
            const opt = this.available.find(a => a.action_key === this.newAction);
            const ok = await this.post(this.newAction, this.newPolicy);
            if (ok && opt) {
                this.assigned.push({ action_key: opt.action_key, name: opt.name, policy: this.newPolicy, enabled: true });
                this.available = this.available.filter(a => a.action_key !== opt.action_key);
                this.newAction = '';
                this.flash('Action assigned');
            } else { this.flash('Failed'); }
            this.busy = false;
        },
        async change(row) {
            const ok = await this.post(row.action_key, row.policy);
            this.flash(ok ? 'Policy updated' : 'Failed');
        },
        async remove(row) {
            if (!confirm('Remove "' + row.name + '" from this agent?')) return;
            const ok = await this.post(row.action_key, 'none');
            if (ok) {
                this.assigned = this.assigned.filter(r => r.action_key !== row.action_key);
                this.available.push({ action_key: row.action_key, name: row.name });
                this.available.sort((a, b) => a.name.localeCompare(b.name));
                this.flash('Action removed');
            } else { this.flash('Failed'); }
        },
    };
}
</script>
@endpush
@endsection