@extends('layouts.app')
@section('title', 'Roles & Permissions — HIGHRA CRM')
@section('header', 'Roles & Permissions')

@section('content')
<!-- FLASH NOTIFICATIONS -->
@if(session('success'))
    <div class="ok" style="margin-bottom: 16px;">
        ✓ {{ session('success') }}
    </div>
@endif

@if(session('error'))
    <div class="err" style="margin-bottom: 16px;">
        ✕ {{ session('error') }}
    </div>
@endif

<!-- HEADER ACTION ROW -->
<div class="row" style="margin-bottom: 18px; align-items: flex-start;">
    <div>
        <h1 style="margin: 0 0 4px 0;">Roles & Access Permissions</h1>
        <p style="color: #8e9ab4; margin: 0;">Define organizational roles, configure module permission matrices, and manage access scopes.</p>
    </div>
    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
        <a href="{{ route('users') }}" class="btn btn-secondary">
            ← Users Directory
        </a>
        @if(auth()->user()?->hasPermission('roles.create'))
            <a href="{{ route('roles.create') }}" class="btn">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                + Create New Role
            </a>
        @endif
    </div>
</div>

<!-- 4 TOP KPI CARDS -->
<div class="dash-kpi-grid" style="grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px;">
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">Total Roles</div>
        <div class="dash-kpi-number" style="color: #ffffff;">{{ $stats['total_roles'] }}</div>
        <div class="dash-kpi-sub">System & custom roles</div>
    </div>
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">System-Critical Roles</div>
        <div class="dash-kpi-number" style="color: #818cf8;">{{ $stats['system_roles'] }}</div>
        <div class="dash-kpi-sub">Protected core roles</div>
    </div>
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">Custom User Roles</div>
        <div class="dash-kpi-number" style="color: #10b981;">{{ $stats['custom_roles'] }}</div>
        <div class="dash-kpi-sub">Customizable capabilities</div>
    </div>
    <div class="dash-kpi-card">
        <div class="dash-kpi-title">System Permissions</div>
        <div class="dash-kpi-number" style="color: #38bdf8;">{{ $stats['total_permissions'] }}</div>
        <div class="dash-kpi-sub">Granular module gates</div>
    </div>
</div>

<!-- ROLES LIST PANEL -->
<div class="panel" style="margin-top: 0;">
    <div style="margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center;">
        <h2 style="font-size: 14px; margin: 0;">Configured System Roles</h2>
    </div>

    <div style="overflow-x: auto;">
        <table style="width: 100%;">
            <thead>
                <tr>
                    <th>Role Name</th>
                    <th>Slug Identifier</th>
                    <th>Assigned Users</th>
                    <th>Permissions Granted</th>
                    <th>Status</th>
                    <th>Type</th>
                    <th style="text-align: right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($roles as $r)
                    <tr>
                        <td>
                            <strong style="color: #ffffff; font-size: 13px; display: block;">{{ $r->name }}</strong>
                            <span style="color: #8e9ab4; font-size: 11.5px;">{{ Str::limit($r->description, 55) }}</span>
                        </td>
                        <td>
                            <code style="background: #141e3a; color: #93c5fd; padding: 2px 6px; border-radius: 4px; font-size: 11px;">{{ $r->slug }}</code>
                        </td>
                        <td>
                            <a href="{{ route('users', ['role' => $r->slug]) }}" style="color: #818cf8; text-decoration: none; font-weight: 600; font-size: 12.5px;">
                                👥 {{ $r->users_count }} {{ Str::plural('user', $r->users_count) }}
                            </a>
                        </td>
                        <td>
                            @if($r->slug === 'super-admin' || $r->slug === 'admin')
                                <span class="badge badge-admin">Full System Access ({{ $stats['total_permissions'] }})</span>
                            @else
                                <span class="badge" style="background: #162544; color: #cbd5e1; border: 1px solid #283a64;">
                                    {{ $r->role_permissions_count }} of {{ $stats['total_permissions'] }} permissions
                                </span>
                            @endif
                        </td>
                        <td>
                            @if($r->status === 'active')
                                <span class="badge badge-active">Active</span>
                            @else
                                <span class="badge badge-inactive">Inactive</span>
                            @endif
                        </td>
                        <td>
                            @if($r->is_system)
                                <span class="badge" style="background: #2e1065; color: #d8b4fe; border: 1px solid #581c87;" title="System-critical role">
                                    🔒 System Core
                                </span>
                            @else
                                <span class="badge" style="background: #142e2b; color: #6ee7b7; border: 1px solid #1a534c;">
                                    Custom
                                </span>
                            @endif
                        </td>
                        <td style="text-align: right;">
                            <div style="display: inline-flex; gap: 6px;">
                                @if(auth()->user()?->hasPermission('roles.manage_permissions'))
                                    <!-- Manage Permissions -->
                                    <a href="{{ route('roles.permissions', $r) }}" class="btn btn-sm" title="Configure Permission Matrix">
                                        🛡️ Permissions
                                    </a>
                                @endif

                                @if(auth()->user()?->hasPermission('roles.edit'))
                                    <!-- Edit Role Info -->
                                    <a href="{{ route('roles.edit', $r) }}" class="btn btn-secondary btn-sm" title="Edit Role Details">
                                        Edit
                                    </a>
                                @endif

                                @if(auth()->user()?->hasPermission('roles.create'))
                                    <!-- Duplicate Role -->
                                    <form method="POST" action="{{ route('roles.duplicate', $r) }}" style="display: inline;">
                                        @csrf
                                        <button type="submit" class="btn btn-secondary btn-sm" title="Clone Role & Permissions">
                                            Duplicate
                                        </button>
                                    </form>
                                @endif

                                <!-- Toggle Status & Delete -->
                                @if(!$r->is_system)
                                    @if(auth()->user()?->hasPermission('roles.edit'))
                                        <form method="POST" action="{{ route('roles.toggle', $r) }}" style="display: inline;">
                                            @csrf
                                            @method('PATCH')
                                            <button type="submit" class="btn btn-secondary btn-sm" title="Toggle active status">
                                                {{ $r->status === 'active' ? 'Deactivate' : 'Activate' }}
                                            </button>
                                        </form>
                                    @endif

                                    @if(auth()->user()?->hasPermission('roles.delete'))
                                        <form method="POST" action="{{ route('roles.destroy', $r) }}" style="display: inline;" onsubmit="return confirm('Are you sure you want to permanently delete custom role {{ $r->name }}?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm" style="padding: 4px 7px;" title="Delete Role">
                                                ✕
                                            </button>
                                        </form>
                                    @endif
                                @endif
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection
