@extends('layouts.app')

@section('title', 'Roles & Permissions')

@section('content')
<div class="min-h-screen bg-slate-100">
    <div class="mx-auto max-w-6xl p-4 sm:p-6">
        <header class="mb-5">
            <a href="/admin/dashboard" class="text-sm font-semibold text-slate-500">← Admin</a>
            <h1 class="mt-2 text-2xl font-black">Roles & Permissions</h1>
            <p class="mt-1 text-sm text-slate-500">Choose exactly what Manager, Customer Care and Moderator can do.</p>
        </header>

        <div id="role-tabs" class="mb-4 flex flex-wrap gap-2"></div>
        <div id="permission-panel" class="vtu-card">
            <p class="text-sm text-slate-500">Loading...</p>
        </div>
    </div>
</div>

<script>
let state = { roles: [], permissions: {}, activeRole: null };

async function loadRoles() {
    const response = await axios.get('/api/admin/roles');
    state.roles = response.data.roles || [];
    state.permissions = response.data.permissions || {};

    state.activeRole = state.roles.find(r => r.slug !== 'super_admin') || state.roles[0] || null;
    renderRoleTabs();
    renderPermissions();
}

function renderRoleTabs() {
    const box = document.getElementById('role-tabs');
    box.innerHTML = state.roles.map(role => `
        <button
            class="rounded-xl px-4 py-2 text-sm font-semibold ${state.activeRole?.id === role.id ? 'bg-slate-950 text-white' : 'bg-white border'}"
            onclick="selectRole(${role.id})"
        >${role.name}</button>
    `).join('');
}

function selectRole(id) {
    state.activeRole = state.roles.find(r => r.id === id);
    renderRoleTabs();
    renderPermissions();
}

function renderPermissions() {
    const panel = document.getElementById('permission-panel');
    if (!state.activeRole) {
        panel.innerHTML = '<p class="text-sm text-slate-500">No roles found.</p>';
        return;
    }

    const selected = new Set((state.activeRole.permissions || []).map(p => p.id));
    const disabled = state.activeRole.slug === 'super_admin';

    panel.innerHTML = `
        <div class="flex items-center justify-between gap-3">
            <div>
                <h2 class="text-xl font-black">${state.activeRole.name}</h2>
                <p class="text-sm text-slate-500">${disabled ? 'Super Admin always has every permission.' : 'Select the permissions for this role.'}</p>
            </div>
            ${disabled ? '' : '<button id="save-role" class="vtu-btn-primary">Save</button>'}
        </div>

        <div class="mt-6 space-y-6">
            ${Object.entries(state.permissions).map(([group, permissions]) => `
                <section>
                    <h3 class="mb-3 text-sm font-black uppercase tracking-wide text-slate-500">${group}</h3>
                    <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
                        ${permissions.map(permission => `
                            <label class="flex items-center gap-3 rounded-2xl border bg-white p-3">
                                <input
                                    type="checkbox"
                                    data-permission-id="${permission.id}"
                                    ${selected.has(permission.id) || disabled ? 'checked' : ''}
                                    ${disabled ? 'disabled' : ''}
                                >
                                <span class="text-sm font-semibold">${permission.name}</span>
                            </label>
                        `).join('')}
                    </div>
                </section>
            `).join('')}
        </div>
    `;

    if (!disabled) {
        document.getElementById('save-role').addEventListener('click', saveRole);
    }
}

async function saveRole() {
    const permissions = [...document.querySelectorAll('[data-permission-id]:checked')]
        .map(el => Number(el.dataset.permissionId));

    await axios.patch(`/api/admin/roles/${state.activeRole.id}`, { permissions });

    await loadRoles();
    alert('Role permissions updated.');
}

loadRoles();
</script>
@endsection