@extends('admin.layouts.app')

@section('title', 'Users')
@section('page-title', 'User Management')

@section('content')
<!-- Search & Filter -->
<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-body" style="padding: 1rem 1.5rem;">
        <form action="{{ route('admin.users.index') }}" method="GET" style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
            <input type="text" name="search" placeholder="Search by name or email..." value="{{ request('search') }}" 
                style="flex: 1; min-width: 200px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; background: var(--bg-surface); color: var(--text);">
            <select name="filter" style="padding: 10px 16px; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; background: var(--bg-surface); color: var(--text); cursor: pointer;">
                <option value="all" {{ request('filter') === 'all' ? 'selected' : '' }}>All Users</option>
                <option value="admin" {{ request('filter') === 'admin' ? 'selected' : '' }}>Admins Only</option>
                <option value="user" {{ request('filter') === 'user' ? 'selected' : '' }}>Users Only</option>
            </select>
            <button type="submit" class="btn btn-primary">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                Search
            </button>
            @if(request('search') || request('filter'))
                <a href="{{ route('admin.users.index') }}" class="btn" style="background: var(--border); color: var(--text);">Clear</a>
            @endif
        </form>
    </div>
</div>

<style>
    .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 4px;
        border: 1px solid transparent;
        background: transparent;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0;
    }
    
    .btn-icon-info {
        color: #0ea5e9; /* Sky blue */
        border-color: rgba(14, 165, 233, 0.3);
    }
    .btn-icon-info:hover {
        background: rgba(14, 165, 233, 0.1);
        box-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
    }

    .btn-icon-primary {
        color: var(--primary);
        border-color: rgba(0, 255, 65, 0.3); /* Hacker Green */
    }
    .btn-icon-primary:hover {
        background: rgba(0, 255, 65, 0.1);
        box-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
    }

    .btn-icon-warning {
        color: #f59e0b;
        border-color: rgba(245, 158, 11, 0.3);
    }
    .btn-icon-warning:hover {
        background: rgba(245, 158, 11, 0.1);
        box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
    }

    .btn-icon-danger {
        color: #ef4444;
        border-color: rgba(239, 68, 68, 0.3);
    }
    .btn-icon-danger:hover {
        background: rgba(239, 68, 68, 0.1);
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    }
</style>

<!-- Success/Error Messages -->
@if(session('success'))
    <div class="alert-auto-dismiss" style="background: rgba(0, 255, 65, 0.1); border: 1px solid var(--primary); border-radius: 4px; padding: 12px 16px; margin-bottom: 1.5rem; color: var(--primary);">
        {{ session('success') }}
    </div>
@endif
@if(session('error'))
    <div class="alert-auto-dismiss" style="background: rgba(255, 0, 64, 0.1); border: 1px solid var(--danger); border-radius: 4px; padding: 12px 16px; margin-bottom: 1.5rem; color: var(--danger);">
        {{ session('error') }}
    </div>
@endif

<!-- Users Table -->
<div class="card">
    <div class="card-header">
        <h3>All Users ({{ $users->total() }})</h3>
        <a href="{{ route('admin.users.create') }}" class="btn btn-primary btn-sm">
            + Create User
        </a>
    </div>
    <div class="card-body" style="padding: 0;">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Joined</th>
                    <th>Last Login</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr>
                    <td>#{{ $user->id }}</td>
                    <td>
                        <div style="display: flex; align-items: center; gap: 10px;">
                        @if($user->profile_picture)
                            <img src="{{ asset('uploads/profiles/' . $user->profile_picture) }}" alt="" style="width: 32px; height: 32px; min-width: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;">
                        @else
                            <div style="width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); display: flex; align-items: center; justify-content: center; color: black; font-weight: 600; font-size: 0.8rem; flex-shrink: 0;">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                        @endif
                        @php
                            $firstName = explode(' ', $user->name)[0];
                            $shortName = strlen($firstName) > 10 ? substr($firstName, 0, 10) . '...' : $firstName . '...';
                        @endphp
                        <span title="{{ $user->name }}">{{ $shortName }}</span>
                        </div>
                    </td>
                    <td>{{ $user->email }}</td>
                    <td>
                        @if($user->is_admin)
                            @if($user->id === 1)
                                <span style="color: #ff0040; text-transform: uppercase; font-weight: 600; letter-spacing: 1px;">Super Admin</span>
                            @else
                                <span style="color: var(--danger); text-transform: uppercase; font-weight: 600; letter-spacing: 1px;">Admin</span>
                            @endif
                        @else
                            <span style="color: var(--primary); text-transform: uppercase; font-weight: 600; letter-spacing: 1px;">User</span>
                        @endif
                    </td>
                    <td>{{ $user->created_at->format('d M Y') }}</td>
                    <td>
                        @if($user->last_login_at)
                            <span title="{{ $user->last_login_at->format('d M Y, H:i') }}">{{ $user->last_login_at->diffForHumans() }}</span>
                        @else
                            <span style="color: var(--text-muted); font-style: italic;">Never</span>
                        @endif
                    </td>
                    <td>
                        <div style="display: flex; gap: 8px; align-items: center;">
                            @if($user->id === 1 && auth()->id() !== 1)
                                {{-- Super admin (Rei) - No actions for other admins --}}
                                <span class="protected-evil" style="color: var(--primary); font-size: 0.85rem; font-style: italic; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 10px var(--primary-glow);">Protected by Devils</span>
                                <span class="protected-angel" style="display: none; color: var(--primary); font-size: 0.85rem; font-style: italic; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 10px var(--primary-glow);">Protected by God</span>
                            @elseif($user->is_admin && $user->id !== auth()->id() && auth()->id() !== 1)
                                {{-- Other admin - Only super admin can manage --}}
                                <button onclick="openViewModal({{ $user->id }})" class="btn btn-sm btn-info">
                                    View
                                </button>
                                <span style="color: var(--primary); font-size: 0.8rem; font-style: italic; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 10px var(--primary-glow);">Super Admin Authorities</span>
                            @else
                                <button onclick="openViewModal({{ $user->id }})" class="btn btn-sm btn-info">
                                    View
                                </button>
                                
                                <a href="{{ route('admin.users.edit', $user) }}" class="btn btn-sm btn-primary">
                                    Edit
                                </a>

                                @if($user->id !== auth()->id())
                                <form action="{{ route('admin.users.destroy', $user) }}" method="POST" style="display: inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn btn-sm btn-danger" 
                                        data-delete="Delete user {{ $user->name }}? This action cannot be undone and will remove all their data.">
                                        Delete
                                    </button>
                                </form>
                                @endif

                                @if($user->id !== auth()->id() && auth()->id() === 1)
                                <form action="{{ route('admin.users.toggle-admin', $user) }}" method="POST" style="display: inline;">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="btn-icon btn-icon-warning" title="{{ $user->is_admin ? 'Demote to User' : 'Promote to Admin' }}"
                                        data-confirm="{{ $user->is_admin ? 'Remove admin access from ' . $user->name . '?' : 'Grant admin access to ' . $user->name . '?' }}">
                                        @if($user->is_admin)
                                            <!-- Demote Icon (Shield Minus/Down) -->
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
                                        @else
                                            <!-- Promote Icon (Shield Plus/Up) -->
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
                                        @endif
                                    </button>
                                </form>
                                @endif
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" style="text-align: center; padding: 3rem; color: var(--text-muted);">
                        No users found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Pagination -->
@if($users->hasPages())
<div style="margin-top: 1.5rem; display: flex; justify-content: center; align-items: center; gap: 1rem;">
    @if($users->onFirstPage())
        <span class="btn btn-disabled">Previous</span>
    @else
        <a href="{{ $users->appends(request()->query())->previousPageUrl() }}" class="btn btn-primary">Previous</a>
    @endif
    
    <span style="color: var(--text-muted);">Page {{ $users->currentPage() }} of {{ $users->lastPage() }}</span>
    
    @if($users->hasMorePages())
        <a href="{{ $users->appends(request()->query())->nextPageUrl() }}" class="btn btn-primary">Next</a>
    @else
        <span class="btn btn-disabled">Next</span>
    @endif
</div>
@endif

<!-- View User Modal -->
<div id="viewUserModal" class="modal-overlay">
    <div class="modal-dialog" style="max-width: 600px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--primary);">
            <h3 style="color: var(--primary); font-family: var(--font-title); text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px var(--primary);">USER PROFILE</h3>
            <button onclick="closeViewModal()" class="btn btn-sm btn-danger">✕ CLOSE</button>
        </div>
        
        <div id="modalContent">
            <!-- Content will be loaded here -->
            <div style="text-align: center; padding: 2rem; color: var(--text-muted);">
                <div style="font-size: 2rem; margin-bottom: 1rem;">⏳</div>
                Loading...
            </div>
        </div>
    </div>
</div>

<script>
const usersData = {
    @foreach($users as $user)
    {{ $user->id }}: {
        id: {{ $user->id }},
        name: "{{ addslashes($user->name) }}",
        email: "{{ addslashes($user->email) }}",
        profile_picture: {!! $user->profile_picture ? '"' . $user->profile_picture . '"' : 'null' !!},
        is_admin: {{ $user->is_admin ? 'true' : 'false' }},
        created_at: "{{ $user->created_at->format('d M Y, H:i') }}",
        enrolled_courses: [
            @foreach($user->enrolledCourses as $enrollment)
            {
                title: "{{ addslashes($enrollment->course->title ?? 'Unknown Course') }}",
                language: "{{ addslashes($enrollment->course->language ?? 'N/A') }}",
                enrolled_at: "{{ $enrollment->created_at->format('d M Y') }}"
            },
            @endforeach
        ]
    },
    @endforeach
};

function openViewModal(userId) {
    const modal = document.getElementById('viewUserModal');
    const content = document.getElementById('modalContent');
    const user = usersData[userId];
    
    if (!user) {
        content.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--danger);">User not found</div>';
        modal.classList.add('active');
        return;
    }
    
    // Build profile picture HTML
    let profilePicHtml = '';
    if (user.profile_picture) {
        profilePicHtml = `<img src="{{ asset('uploads/profiles/') }}/${user.profile_picture}" alt="${user.name}" 
            style="width: 120px; height: 120px; border-radius: 12px; object-fit: cover; border: 3px solid var(--primary); box-shadow: 0 0 20px var(--primary-glow);">`;
    } else {
        const initial = user.name.charAt(0).toUpperCase();
        profilePicHtml = `<div style="width: 120px; height: 120px; border-radius: 12px; background: rgba(0, 20, 0, 0.8); display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 800; font-size: 3rem; font-family: var(--font-title); border: 3px solid var(--primary); box-shadow: 0 0 20px var(--primary-glow); text-shadow: 0 0 10px var(--primary);">${initial}</div>`;
    }
    
    // Build enrolled courses HTML
    let coursesHtml = '';
    if (user.enrolled_courses && user.enrolled_courses.length > 0) {
        coursesHtml = user.enrolled_courses.map(course => `
            <div style="background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px; margin-bottom: 8px;">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <div style="font-weight: 600; color: var(--primary); margin-bottom: 4px;">${course.title}</div>
                        <div style="font-size: 0.85rem; color: var(--text-muted);">Language: ${course.language}</div>
                    </div>
                    <div style="font-size: 0.75rem; color: var(--text-light);">${course.enrolled_at}</div>
                </div>
            </div>
        `).join('');
    } else {
        coursesHtml = '<div style="text-align: center; padding: 1.5rem; color: var(--text-muted); font-style: italic;">No courses enrolled yet</div>';
    }
    
    // Build role badge
    let roleBadge = '';
    if (user.id === 1) {
        roleBadge = `
            <span class="badge-super-admin" style="margin: 0;">
                <svg class="icon-evil" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="display: inline-block;">
                    <path d="M12 2L15 8.5L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L9 8.5L12 2Z"/>
                </svg>
                <svg class="icon-angel" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="display: none;">
                    <path d="M12 2L15 8.5L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L9 8.5L12 2Z"/>
                </svg>
                SUPER ADMIN
            </span>`;
    } else if (user.is_admin) {
        roleBadge = `
            <span class="badge-admin" style="margin: 0;">
                <svg class="icon-evil" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block;">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                </svg>
                <svg class="icon-angel" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                </svg>
                ADMIN
            </span>`;
    } else {
        roleBadge = '<span class="badge badge-success">USER</span>';
    }
    
    content.innerHTML = `
        <div style="display: flex; justify-content: center; margin-bottom: 2rem;">
            ${profilePicHtml}
        </div>
        
        <div style="background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px; padding: 1.5rem; margin-bottom: 1.5rem;">
            <div style="display: grid; gap: 1rem;">
                <div style="display: flex; justify-content: space-between; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);">
                    <span style="color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px;">User ID</span>
                    <span style="font-weight: 600; color: var(--primary);">#${user.id}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);">
                    <span style="color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px;">Name</span>
                    <span style="font-weight: 600;">${user.name}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);">
                    <span style="color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px;">Email</span>
                    <span style="font-weight: 600;">${user.email}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);">
                    <span style="color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px;">Role</span>
                    ${roleBadge}
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: var(--text-muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px;">Joined</span>
                    <span style="font-weight: 600;">${user.created_at}</span>
                </div>
            </div>
        </div>
        
        <div>
            <h4 style="color: var(--primary); font-family: var(--font-title); text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; margin-bottom: 1rem; text-shadow: 0 0 10px var(--primary);">
                ENROLLED COURSES (${user.enrolled_courses ? user.enrolled_courses.length : 0})
            </h4>
            <div style="max-height: 300px; overflow-y: auto;">
                ${coursesHtml}
            </div>
        </div>
    `;
    
    modal.classList.add('active');
}

function closeViewModal() {
    document.getElementById('viewUserModal').classList.remove('active');
}

// Close modal when clicking outside
document.getElementById('viewUserModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeViewModal();
    }
});
</script>
@endsection