@extends('admin.layouts.app')

@php $actionName = app()->getLocale() === 'ar' ? ($action->name_ar ?: $action->name_en) : $action->name_en; @endphp

@section('title', __('admin.actions_matrix.title') . ' — ' . $actionName)
@section('page_title', __('admin.actions_matrix.title'))

@push('styles')
<style>
    .pa-bar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 16px; }
    .pa-back { font-size:13px;font-weight:700;color:#4f46e5;text-decoration:none; }
    .pa-card { background:#fff;border:1px solid #e8edf3;border-radius:16px;overflow:hidden;max-width:680px; }
    .pa-head { padding:18px 22px;border-bottom:1px solid #eef2f7;display:flex;align-items:center;justify-content:space-between;gap:12px; }
    .pa-head__main { display:flex;align-items:center;gap:12px; }
    .pa-head__icon { width:42px;height:42px;border-radius:12px;background:#eef2ff;color:#4f46e5;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; }
    .pa-title { font-size:17px;font-weight:800;color:#0f172a;margin:0;line-height:1.2; }
    .pa-title small { display:block;font-size:12px;font-weight:600;color:#94a3b8;margin-top:2px; }
    .pa-title code { font-size:11px;color:#94a3b8;background:#f1f5f9;padding:1px 6px;border-radius:5px; }
    .pa-count { font-size:11px;font-weight:800;color:#4338ca;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:3px 11px; }
    .pa-list { padding:8px; }
    .pa-row { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:12px; }
    .pa-row:hover { background:#fbfcff; }
    .pa-row + .pa-row { border-top:1px solid #f4f6fa; }
    .pa-agent { display:flex;align-items:center;gap:11px;min-width:0; }
    .pa-dot { width:10px;height:10px;border-radius:50%;background:#4f46e5;flex:0 0 auto; }
    .pa-name { font-weight:700;color:#0f172a;font-size:14px; } .pa-key { color:#94a3b8;font-size:11px;display:block;margin-top:1px; }
    .pa-sel { border:1px solid #e2e8f0;border-radius:9px;padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer;background:#fff;min-width:160px; }
    .pa-sel--always_allow { color:#047857;border-color:#a7f3d0;background:#ecfdf5; }
    .pa-sel--needs_approval { color:#b45309;border-color:#fed7aa;background:#fff7ed; }
    .pa-sel--blocked { color:#b91c1c;border-color:#fecaca;background:#fef2f2; }
    .pa-empty { padding:44px 22px;text-align:center;color:#94a3b8;font-size:13.5px; }
    .pa-empty a { color:#4f46e5;font-weight:700;text-decoration:none; }
    .pa-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; }
    .pa-toast.show { opacity:1;transform:translateY(0); }
</style>
@endpush

@section('content')
<div x-data="actionPolicyAgents('{{ csrf_token() }}', '{{ route('admin.actions.policy') }}', '{{ $actionKey }}', '{{ $env }}')">
    <div class="pa-bar">
        <a href="{{ route('admin.actions.index', ['tab' => $tab]) }}" class="pa-back">← {{ __('admin.nav.actions') }}</a>
    </div>

    <div class="pa-card">
        <div class="pa-head">
            <div class="pa-head__main">
                <span class="pa-head__icon">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2M20 14h2M15 13v2M9 13v2"/></svg>
                </span>
                <div>
                    <h2 class="pa-title">{{ $actionName }}<small><code>{{ $actionKey }}</code></small></h2>
                </div>
            </div>
            @if ($assigned->isNotEmpty())
                <span class="pa-count">{{ trans_choice(':n agent|:n agents', $assigned->count(), ['n' => $assigned->count()]) }}</span>
            @endif
        </div>

        @if ($assigned->isEmpty())
            <div class="pa-empty">
                {{ __('admin.actions_matrix.no_assigned') }}
                <a href="{{ route('admin.agents.index', ['tab' => $tab]) }}">{{ __('admin.user_menu.ai_agents') }}</a>
            </div>
        @else
            <div class="pa-list">
                @foreach ($assigned as $row)
                    <div class="pa-row" x-data="{ p: '{{ $row['policy'] }}' }">
                        <div class="pa-agent">
                            <span class="pa-dot"></span>
                            <span><span class="pa-name">{{ $row['name'] }}</span><code class="pa-key">{{ $row['agent_key'] }}</code></span>
                        </div>
                        <select class="pa-sel" :class="'pa-sel--' + p" x-model="p" @change="save('{{ $row['agent_key'] }}', p)">
                            <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>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    <div class="pa-toast" :class="{ show: toast }" x-text="toast"></div>
</div>
@endsection

@push('scripts')
<script>
function actionPolicyAgents(csrf, url, actionKey, env) {
    return {
        toast: '', _t: null,
        flash(m) { this.toast = m; clearTimeout(this._t); this._t = setTimeout(() => this.toast = '', 1600); },
        async save(agentKey, policy) {
            const res = await fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                body: JSON.stringify({ agent_key: agentKey, action_key: actionKey, environment: env, policy }),
            });
            this.flash(res.ok ? 'Saved' : 'Failed');
        },
    };
}
</script>
@endpush