@extends('layouts.app')
@section('title', $user->name . ' — User Profile & Permissions')
@section('header', 'User Profile')

@section('content')
<div style="font-size: 12px; color: #8e9ab4; margin-bottom: 12px;">
    <a href="{{ route('users') }}" style="color: #6d59ff; text-decoration: none;">← Back to Users Directory</a>
</div>

<!-- 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

<!-- USER PROFILE HEADER BANNER -->
<div class="panel" style="margin-top: 0; margin-bottom: 18px; padding: 20px; background: linear-gradient(135deg, #101935 0%, #0d1428 100%);">
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
        <!-- Left: Avatar & Identity -->
        <div style="display: flex; align-items: center; gap: 16px;">
            <div style="width: 56px; height: 56px; border-radius: 50%; background: #1c2b54; color: #818cf8; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; border: 2px solid #3b4e85; flex-shrink: 0;">
                {{ strtoupper(substr($user->name, 0, 1)) }}
            </div>
            <div>
                <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                    <h1 style="margin: 0; font-size: 20px; color: #ffffff;">{{ $user->name }}</h1>
                    
                    @php
                        $roleSlug = strtolower($user->role);
                        $badgeClass = match($roleSlug) {
                            'super-admin', 'admin' => 'badge-admin',
                            'manager' => 'badge-manager',
                            'sales' => 'badge-sales',
                            'telecaller' => 'badge-telecaller',
                            'support' => 'badge-support',
                            'finance' => 'badge-finance',
                            'marketing' => 'badge-marketing',
                            default => 'badge-custom'
                        };
                    @endphp
                    <span class="badge {{ $badgeClass }}">{{ $user->roleModel?->name ?? ucfirst($user->role) }}</span>

                    @if($user->is_locked)
                        <span class="badge" style="background: #450a0a; color: #fca5a5; border: 1px solid #7f1d1d;">🔒 Locked</span>
                    @elseif($user->active)
                        <span class="badge badge-active">✓ Active</span>
                    @else
                        <span class="badge badge-inactive">⊘ Inactive</span>
                    @endif
                </div>

                <p style="color: #8e9ab4; margin: 4px 0 0; font-size: 12.5px;">
                    <strong>{{ $user->designation ?: 'Staff' }}</strong> · 🏢 {{ $user->department ?: 'Operations' }} · 📍 {{ $user->branch_location ?: 'HQ' }} · 🆔 <span style="font-family: monospace;">{{ $user->employee_id ?? 'EMP-#'.$user->id }}</span>
                </p>
            </div>
        </div>

        <!-- Right: Header Actions -->
        <div style="display: flex; gap: 8px; align-items: center;">
            <a href="{{ route('users.edit', $user) }}" class="btn btn-secondary btn-sm">
                ✏️ Edit User
            </a>

            <button type="button" class="btn btn-secondary btn-sm" onclick="openModal('resetPasswordModal')">
                🔑 Reset Password
            </button>

            <form method="POST" action="{{ route('users.lock', $user) }}" style="display: inline;">
                @csrf
                @method('PATCH')
                <button type="submit" class="btn btn-secondary btn-sm">
                    {{ $user->is_locked ? '🔓 Unlock' : '🔒 Lock' }}
                </button>
            </form>

            <form method="POST" action="{{ route('users.toggle', $user) }}" style="display: inline;">
                @csrf
                @method('PATCH')
                <button type="submit" class="btn btn-secondary btn-sm">
                    {{ $user->active ? '⊘ Deactivate' : '✓ Activate' }}
                </button>
            </form>
        </div>
    </div>
</div>

<!-- 5-TAB NAVIGATION -->
<div class="tabs" style="margin-bottom: 18px;">
    <button class="tab-btn active" onclick="switchProfileTab('tab-overview', this)">
        👤 Overview & Details
    </button>
    <button class="tab-btn" onclick="switchProfileTab('tab-permissions', this)">
        🛡️ Permissions & Overrides
    </button>
    <button class="tab-btn" onclick="switchProfileTab('tab-activity', this)">
        📜 Activity History ({{ count($activities) }})
    </button>
    <button class="tab-btn" onclick="switchProfileTab('tab-logins', this)">
        💻 Login History ({{ count($loginHistories) }})
    </button>
    <button class="tab-btn" onclick="switchProfileTab('tab-audit', this)">
        🔒 Security Audit Trail ({{ count($auditLogs) }})
    </button>
</div>

<!-- TAB 1: OVERVIEW & PROFILE DETAILS -->
<div id="tab-overview" class="profile-tab-content">
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 18px;">
        
        <!-- Left: Organizational Details -->
        <div class="panel" style="margin-top: 0;">
            <h3 style="margin: 0 0 14px 0; font-size: 14px; color: #ffffff; border-bottom: 1px solid #1c2742; padding-bottom: 10px;">
                Organizational Hierarchy
            </h3>
            
            <div style="display: flex; flex-direction: column; gap: 12px; font-size: 12.5px;">
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #141f38; padding-bottom: 8px;">
                    <span style="color: #8e9ab4;">Department</span>
                    <strong style="color: #ffffff;">{{ $user->department ?: 'Operations' }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #141f38; padding-bottom: 8px;">
                    <span style="color: #8e9ab4;">Designation</span>
                    <strong style="color: #ffffff;">{{ $user->designation ?: 'Staff' }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #141f38; padding-bottom: 8px;">
                    <span style="color: #8e9ab4;">Reporting Manager</span>
                    @if($user->manager)
                        <a href="{{ route('users.show', $user->manager) }}" style="color: #818cf8; text-decoration: none; font-weight: 600;">
                            {{ $user->manager->name }} ({{ $user->manager->designation }})
                        </a>
                    @else
                        <span style="color: #64748b;">Top Level / Self-Managed</span>
                    @endif
                </div>
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #141f38; padding-bottom: 8px;">
                    <span style="color: #8e9ab4;">Branch / Location</span>
                    <strong style="color: #ffffff;">{{ $user->branch_location ?: 'HQ' }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #141f38; padding-bottom: 8px;">
                    <span style="color: #8e9ab4;">Date of Joining</span>
                    <strong style="color: #ffffff;">{{ optional($user->joining_date)->format('M d, Y') ?? '—' }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: #8e9ab4;">Direct Team Reports</span>
                    <strong style="color: #34d399;">{{ $user->directReports->count() }} team members</strong>
                </div>
            </div>
        </div>

        <!-- Right: Contact & Security Profile -->
        <div class="panel" style="margin-top: 0;">
            <h3 style="margin: 0 0 14px 0; font-size: 14px; color: #ffffff; border-bottom: 1px solid #1c2742; padding-bottom: 10px;">
                Contact & Account Security
            </h3>

            <div style="display: flex; flex-direction: column; gap: 12px; font-size: 12.5px;">
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #141f38; padding-bottom: 8px;">
                    <span style="color: #8e9ab4;">Email Address</span>
                    <a href="mailto:{{ $user->email }}" style="color: #ffffff; text-decoration: none;">{{ $user->email }}</a>
                </div>
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #141f38; padding-bottom: 8px;">
                    <span style="color: #8e9ab4;">Mobile Number</span>
                    <strong style="color: #ffffff;">{{ $user->mobile ?: 'Not provided' }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #141f38; padding-bottom: 8px;">
                    <span style="color: #8e9ab4;">Data Access Scope</span>
                    <strong style="color: #38bdf8; text-transform: uppercase;">{{ $user->access_scope ?? 'all' }} records</strong>
                </div>
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #141f38; padding-bottom: 8px;">
                    <span style="color: #8e9ab4;">Two-Factor Authentication</span>
                    @if($user->two_factor_enabled)
                        <span style="color: #34d399; font-weight: 600;">🛡️ Enabled (2FA Active)</span>
                    @else
                        <span style="color: #64748b;">Disabled</span>
                    @endif
                </div>
                <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #141f38; padding-bottom: 8px;">
                    <span style="color: #8e9ab4;">Last Login</span>
                    <span style="color: #cbd5e1;">{{ optional($user->last_login_at)->format('M d, Y h:i A') ?? 'Never' }}</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: #8e9ab4;">Last Login IP</span>
                    <span style="color: #8e9ab4; font-family: monospace;">{{ $user->last_login_ip ?? '—' }}</span>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- TAB 2: PERMISSIONS MATRIX & USER-SPECIFIC OVERRIDES -->
<div id="tab-permissions" class="profile-tab-content" style="display: none;">
    <div class="panel" style="margin-top: 0;">
        <div style="margin-bottom: 16px; border-bottom: 1px solid #1c2742; padding-bottom: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
            <div>
                <h3 style="margin: 0; font-size: 14px; color: #ffffff;">User Permissions & Specific Overrides</h3>
                <p style="margin: 2px 0 0 0; font-size: 11.5px; color: #8e9ab4;">
                    Base role: <strong>{{ $user->roleModel?->name ?? ucfirst($user->role) }}</strong>. You can explicitly <strong>Grant</strong> or <strong>Revoke</strong> individual capabilities for this user.
                </p>
            </div>
            <div style="display: flex; gap: 8px;">
                <span class="badge" style="background: #141f38; color: #93c5fd; border: 1px solid #28375c;">
                    Role Inherited
                </span>
                <span class="badge" style="background: #064e3b; color: #6ee7b7; border: 1px solid #047857;">
                    User Override (Grant)
                </span>
                <span class="badge" style="background: #450a0a; color: #fca5a5; border: 1px solid #7f1d1d;">
                    User Override (Revoke)
                </span>
            </div>
        </div>

        <form method="POST" action="{{ route('users.permission_overrides', $user) }}">
            @csrf

            @foreach($modules as $moduleName => $permissions)
                <div style="margin-bottom: 18px; background: #0c1428; border: 1px solid #1a2645; border-radius: 8px; overflow: hidden;">
                    <div style="background: #111a33; padding: 8px 14px; font-weight: 700; font-size: 12px; color: #818cf8; text-transform: uppercase; letter-spacing: 0.5px; display: flex; justify-content: space-between; align-items: center;">
                        <span>{{ $moduleName }}</span>
                        <span style="font-size: 11px; color: #8e9ab4; text-transform: none; font-weight: 500;">{{ count($permissions) }} permissions</span>
                    </div>

                    <div style="padding: 10px 14px; overflow-x: auto;">
                        <table style="width: 100%;">
                            <thead>
                                <tr>
                                    <th style="width: 250px;">Permission</th>
                                    <th>Description</th>
                                    <th>Base Role Status</th>
                                    <th>User Override</th>
                                    <th>Effective Status</th>
                                    <th>Access Scope</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($permissions as $p)
                                    @php
                                        $roleHas = $rolePermissions->has($p->slug);
                                        $override = $userOverrides->get($p->slug);
                                        
                                        $isGranted = false;
                                        $sourceText = 'Role Default';

                                        if ($user->isAdmin() || $user->isSuperAdmin()) {
                                            $isGranted = true;
                                            $sourceText = 'Admin Superpass';
                                        } elseif ($override !== null) {
                                            $isGranted = (bool)$override->granted;
                                            $sourceText = $isGranted ? 'User Grant' : 'User Revoke';
                                        } else {
                                            $isGranted = $roleHas;
                                            $sourceText = 'Role Default';
                                        }
                                    @endphp
                                    <tr>
                                        <td>
                                            <strong style="color: #ffffff; font-size: 12.5px;">{{ $p->name }}</strong>
                                            <small style="display: block; color: #8e9ab4; font-family: monospace;">{{ $p->slug }}</small>
                                        </td>
                                        <td style="color: #94a3b8; font-size: 11.5px;">
                                            {{ $p->description }}
                                        </td>
                                        <td>
                                            @if($roleHas)
                                                <span style="color: #34d399; font-size: 11.5px; font-weight: 600;">✓ Allowed</span>
                                            @else
                                                <span style="color: #64748b; font-size: 11.5px;">✕ Denied</span>
                                            @endif
                                        </td>
                                        <td>
                                            <select name="overrides[{{ $p->slug }}]" style="margin: 0; padding: 3px 6px; font-size: 11.5px; width: auto;">
                                                <option value="inherit" {{ $override === null ? 'selected' : '' }}>Inherit from Role</option>
                                                <option value="grant" {{ ($override && $override->granted) ? 'selected' : '' }}>✓ Force Grant</option>
                                                <option value="revoke" {{ ($override && !$override->granted) ? 'selected' : '' }}>✕ Force Revoke</option>
                                            </select>
                                        </td>
                                        <td>
                                            @if($isGranted)
                                                <span class="badge badge-active" style="font-size: 10.5px;">
                                                    ✓ Active ({{ $sourceText }})
                                                </span>
                                            @else
                                                <span class="badge badge-inactive" style="font-size: 10.5px;">
                                                    ✕ Disabled
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            <select name="scopes[{{ $p->slug }}]" style="margin: 0; padding: 3px 6px; font-size: 11.5px; width: auto;">
                                                <option value="all" {{ ($override?->access_scope ?? $user->access_scope) === 'all' ? 'selected' : '' }}>All Records</option>
                                                <option value="own" {{ ($override?->access_scope ?? $user->access_scope) === 'own' ? 'selected' : '' }}>Own Records</option>
                                                <option value="team" {{ ($override?->access_scope ?? $user->access_scope) === 'team' ? 'selected' : '' }}>Team Records</option>
                                                <option value="department" {{ ($override?->access_scope ?? $user->access_scope) === 'department' ? 'selected' : '' }}>Department</option>
                                            </select>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endforeach

            <div style="display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid #1c2742;">
                <button type="submit" class="btn">
                    Save Permission Overrides
                </button>
            </div>
        </form>
    </div>
</div>

<!-- TAB 3: ACTIVITY HISTORY -->
<div id="tab-activity" class="profile-tab-content" style="display: none;">
    <div class="panel" style="margin-top: 0;">
        <h3 style="margin: 0 0 14px 0; font-size: 14px; color: #ffffff; border-bottom: 1px solid #1c2742; padding-bottom: 10px;">
            Recent User Activity Log
        </h3>

        @if($activities->isEmpty())
            <div style="padding: 40px; text-align: center; color: #64748b;">
                No CRM activities recorded for this user yet.
            </div>
        @else
            <div style="display: flex; flex-direction: column; gap: 10px;">
                @foreach($activities as $act)
                    <div style="background: #0c1428; border: 1px solid #1c2742; border-radius: 8px; padding: 12px; display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <strong style="color: #ffffff; font-size: 12.5px;">{{ $act->description }}</strong>
                            <div style="color: #8e9ab4; font-size: 11px; margin-top: 2px;">
                                Type: <span style="color: #a5b4fc;">{{ $act->type }}</span>
                                @if($act->lead_id) · Lead #{{ $act->lead_id }} @endif
                            </div>
                        </div>
                        <span style="color: #64748b; font-size: 11px;">
                            {{ $act->created_at->diffForHumans() }}
                        </span>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>

<!-- TAB 4: LOGIN HISTORY -->
<div id="tab-logins" class="profile-tab-content" style="display: none;">
    <div class="panel" style="margin-top: 0;">
        <h3 style="margin: 0 0 14px 0; font-size: 14px; color: #ffffff; border-bottom: 1px solid #1c2742; padding-bottom: 10px;">
            User Login Sessions & Access Logs
        </h3>

        @if($loginHistories->isEmpty())
            <div style="padding: 40px; text-align: center; color: #64748b;">
                No historical login records found for this account.
            </div>
        @else
            <table style="width: 100%;">
                <thead>
                    <tr>
                        <th>Date & Time</th>
                        <th>IP Address</th>
                        <th>Browser / Device</th>
                        <th>Login Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($loginHistories as $lh)
                        <tr>
                            <td style="color: #ffffff; font-weight: 500;">
                                {{ $lh->logged_at->format('M d, Y h:i:s A') }}
                            </td>
                            <td style="font-family: monospace; color: #93c5fd;">
                                {{ $lh->ip_address }}
                            </td>
                            <td style="color: #8e9ab4; font-size: 11.5px;">
                                {{ Str::limit($lh->user_agent, 60) }}
                            </td>
                            <td>
                                @if($lh->status === 'success')
                                    <span class="badge badge-active">✓ Success</span>
                                @else
                                    <span class="badge badge-inactive">✕ Failed</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
</div>

<!-- TAB 5: AUDIT LOG -->
<div id="tab-audit" class="profile-tab-content" style="display: none;">
    <div class="panel" style="margin-top: 0;">
        <h3 style="margin: 0 0 14px 0; font-size: 14px; color: #ffffff; border-bottom: 1px solid #1c2742; padding-bottom: 10px;">
            Security Audit Trail on this Account
        </h3>

        @if($auditLogs->isEmpty())
            <div style="padding: 40px; text-align: center; color: #64748b;">
                No audit events recorded for this user.
            </div>
        @else
            <table style="width: 100%;">
                <thead>
                    <tr>
                        <th>Date & Time</th>
                        <th>Action</th>
                        <th>Module</th>
                        <th>Description</th>
                        <th>IP Address</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($auditLogs as $al)
                        <tr>
                            <td style="color: #cbd5e1; font-size: 11.5px;">
                                {{ $al->created_at->format('M d, Y h:i A') }}
                            </td>
                            <td>
                                <span class="badge" style="background: #1e293b; color: #cbd5e1; border: 1px solid #334155;">
                                    {{ $al->action }}
                                </span>
                            </td>
                            <td style="color: #818cf8; font-weight: 600; font-size: 11.5px;">
                                {{ $al->module }}
                            </td>
                            <td style="color: #ffffff; font-size: 12px;">
                                {{ $al->description }}
                            </td>
                            <td style="font-family: monospace; color: #8e9ab4; font-size: 11px;">
                                {{ $al->ip_address }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
</div>

<!-- RESET PASSWORD MODAL -->
<div id="resetPasswordModal" class="modal-backdrop">
    <div class="modal" style="max-width: 420px;">
        <div class="modal-header">
            <h3>Reset User Password</h3>
            <button class="modal-close" onclick="closeModal('resetPasswordModal')">&times;</button>
        </div>
        <form method="POST" action="{{ route('users.reset_password', $user) }}">
            @csrf
            <p style="font-size: 12px; color: #8e9ab4; margin: 0 0 12px 0;">
                Set a new password for {{ $user->name }} ({{ $user->email }}).
            </p>
            <label>New Password * (Min 6 characters)</label>
            <input type="password" name="new_password" required placeholder="Enter new password" minlength="6">

            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" onclick="closeModal('resetPasswordModal')">Cancel</button>
                <button type="submit" class="btn">Update Password</button>
            </div>
        </form>
    </div>
</div>

<script>
function openModal(id) {
    document.getElementById(id).classList.add('show');
}
function closeModal(id) {
    document.getElementById(id).classList.remove('show');
}

function switchProfileTab(tabId, btn) {
    document.querySelectorAll('.profile-tab-content').forEach(el => el.style.display = 'none');
    document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));

    document.getElementById(tabId).style.display = 'block';
    btn.classList.add('active');
}

window.addEventListener('click', function(e) {
    if (e.target.classList.contains('modal-backdrop')) {
        e.target.classList.remove('show');
    }
});
</script>
@endsection