@extends('layouts.super-admin')

@section('title', 'Users')
@section('page-title', 'User Management')
@section('page-description', 'Kelola semua pengguna sistem')

@section('content')
<div class="users-container">
    <!-- Stats Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                </svg>
            </div>
            <div class="stat-number" id="totalUsers">0</div>
            <div class="stat-label">Total Users</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5"/>
                </svg>
            </div>
            <div class="stat-number" id="adminUsers">0</div>
            <div class="stat-label">Administrators</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <circle cx="12" cy="12" r="10"/>
                    <path d="M12 8v4l3 3"/>
                </svg>
            </div>
            <div class="stat-number" id="activeUsers">0</div>
            <div class="stat-label">Active Users</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                    <line x1="16" y1="2" x2="16" y2="6"/>
                    <line x1="8" y1="2" x2="8" y2="6"/>
                </svg>
            </div>
            <div class="stat-number" id="newUsers">0</div>
            <div class="stat-label">New (30 days)</div>
        </div>
    </div>

    <!-- Users Table -->
    <div class="card-section">
        <div class="card-header">
            <h3>All Users</h3>
            <div class="header-actions">
                <div class="search-box">
                    <input type="text" id="searchUser" placeholder="Search users..." class="search-input">
                </div>
                <a href="{{ route('super-admin.users.create') }}" class="btn-primary">+ Add User</a>
            </div>
        </div>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>User</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Devices</th>
                        <th>Joined</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="usersTableBody">
                    <tr><td colspan="8" class="text-center">Loading users...</td></tr>
                </tbody>
            </table>
        </div>
        <div class="pagination" id="pagination"></div>
    </div>
</div>

<script>
let currentPage = 1;
let totalPages = 1;

async function loadUsers(page = 1) {
    try {
        const response = await fetch(`/super-admin/api/users?page=${page}`);
        const data = await response.json();
        
        if (data.success) {
            updateStats(data.stats);
            updateUsersTable(data.users);
            updatePagination(data.pagination);
            currentPage = data.pagination.current_page;
            totalPages = data.pagination.last_page;
        }
    } catch (error) {
        console.error('Error loading users:', error);
        loadMockUsers();
    }
}

function updateStats(stats) {
    document.getElementById('totalUsers').innerText = stats.total || 0;
    document.getElementById('adminUsers').innerText = stats.admin || 0;
    document.getElementById('activeUsers').innerText = stats.active || 0;
    document.getElementById('newUsers').innerText = stats.new_users || 0;
}

function updateUsersTable(users) {
    const tbody = document.getElementById('usersTableBody');
    if (!users || users.length === 0) {
        tbody.innerHTML = '<tr><td colspan="8" class="text-center">No users found</td></tr>';
        return;
    }
    
    tbody.innerHTML = users.map(user => `
        <tr>
            <td>#${user.id}</td>
            <td>
                <div class="user-cell">
                    <div class="user-avatar">${getInitials(user.name)}</div>
                    <strong>${escapeHtml(user.name)}</strong>
                </div>
            </td>
            <td>${escapeHtml(user.email)}</td>
            <td>
                <span class="role-badge ${getRoleClass(user.role)}">
                    ${capitalize(user.role)}
                </span>
            </td>
            <td>${user.devices_count || 0}</td>
            <td>${formatDate(user.created_at)}</td>
            <td>
                <span class="status-badge ${user.is_active ? 'status-active' : 'status-inactive'}">
                    ${user.is_active ? 'Active' : 'Inactive'}
                </span>
            </td>
            <td class="actions">
                <button class="btn-icon" onclick="editUser(${user.id})" title="Edit">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"/>
                        <polygon points="18 2 22 6 12 16 8 16 8 12 18 2"/>
                    </svg>
                </button>
                ${user.id !== parseInt('{{ auth()->id() }}') ? `
                <button class="btn-icon danger" onclick="deleteUser(${user.id})" title="Delete">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <polyline points="3 6 5 6 21 6"/>
                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                    </svg>
                </button>
                ` : ''}
            </td>
        </tr>
    `).join('');
}

function updatePagination(pagination) {
    const container = document.getElementById('pagination');
    if (!pagination || pagination.last_page <= 1) {
        container.innerHTML = '';
        return;
    }
    
    let html = '<div class="pagination-controls">';
    if (pagination.current_page > 1) {
        html += `<button class="page-btn" onclick="loadUsers(${pagination.current_page - 1})">‹ Previous</button>`;
    }
    html += `<span class="page-info">Page ${pagination.current_page} of ${pagination.last_page}</span>`;
    if (pagination.current_page < pagination.last_page) {
        html += `<button class="page-btn" onclick="loadUsers(${pagination.current_page + 1})">Next ›</button>`;
    }
    html += '</div>';
    container.innerHTML = html;
}

function getInitials(name) {
    return name ? name.split(' ').map(n => n[0]).join('').toUpperCase().substring(0, 2) : 'U';
}

function getRoleClass(role) {
    if (role === 'super_admin') return 'role-super';
    if (role === 'admin') return 'role-admin';
    return 'role-user';
}

function capitalize(str) {
    return str ? str.charAt(0).toUpperCase() + str.slice(1) : '';
}

function formatDate(dateStr) {
    if (!dateStr) return '-';
    const date = new Date(dateStr);
    return date.toLocaleDateString('id-ID');
}

function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/[&<>]/g, function(m) {
        if (m === '&') return '&amp;';
        if (m === '<') return '&lt;';
        if (m === '>') return '&gt;';
        return m;
    });
}

function editUser(id) {
    window.location.href = `/super-admin/users/${id}/edit`;
}

function deleteUser(id) {
    if (confirm('Are you sure you want to delete this user?')) {
        fetch(`/super-admin/users/${id}`, {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        }).then(response => {
            if (response.ok) {
                loadUsers(currentPage);
            }
        });
    }
}

function searchUsers() {
    const search = document.getElementById('searchUser')?.value || '';
    // Implement search functionality
    loadUsers(1);
}

document.getElementById('searchUser')?.addEventListener('keyup', searchUsers);

function loadMockUsers() {
    updateStats({ total: 15, admin: 2, active: 14, new_users: 3 });
    updateUsersTable([
        { id: 1, name: 'Super Admin', email: 'superadmin@gmail.com', role: 'super_admin', devices_count: 0, created_at: '2026-05-10', is_active: true },
        { id: 2, name: 'Admin User', email: 'admin@test.com', role: 'admin', devices_count: 2, created_at: '2026-05-09', is_active: true },
        { id: 3, name: 'John Doe', email: 'john@example.com', role: 'user', devices_count: 1, created_at: '2026-05-08', is_active: true },
    ]);
    updatePagination({ current_page: 1, last_page: 2 });
}

// Load users on page load
document.addEventListener('DOMContentLoaded', () => loadUsers());
</script>

<style>
.users-container { max-width: 1400px; margin: 0 auto; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.stat-icon {
    width: 48px;
    height: 48px;
    background: #fef2f2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    color: #dc2626;
}
.stat-number { font-size: 1.875rem; font-weight: 700; color: #1a1a1a; }
.stat-label { font-size: 0.875rem; color: #6b7280; }

.card-section {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.header-actions { display: flex; gap: 1rem; align-items: center; }
.search-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: 200px;
}
.btn-primary {
    background: #dc2626;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
}
.table-responsive { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #f3f4f6; }
.data-table th { background: #f9fafb; font-weight: 600; font-size: 0.75rem; color: #6b7280; }

.user-cell { display: flex; align-items: center; gap: 0.5rem; }
.user-avatar {
    width: 32px;
    height: 32px;
    background: #fef2f2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.7rem;
    color: #dc2626;
}
.role-badge { padding: 0.25rem 0.5rem; border-radius: 20px; font-size: 0.7rem; }
.role-super { background: #fef3c7; color: #92400e; }
.role-admin { background: #fef2f2; color: #dc2626; }
.role-user { background: #e0e7ff; color: #3730a3; }
.status-badge { padding: 0.25rem 0.5rem; border-radius: 20px; font-size: 0.7rem; }
.status-active { background: #d1fae5; color: #065f46; }
.status-inactive { background: #fee2e2; color: #991b1b; }
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: #6b7280;
}
.btn-icon:hover { color: #dc2626; }
.btn-icon.danger:hover { color: #dc2626; }
.pagination {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid #e5e7eb;
}
.pagination-controls { display: flex; justify-content: center; align-items: center; gap: 1rem; }
.page-btn {
    padding: 0.25rem 0.75rem;
    background: #f3f4f6;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.text-center { text-align: center; padding: 2rem; color: #6b7280; }

@media (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .stats-grid { grid-template-columns: 1fr; }
    .card-header { flex-direction: column; align-items: stretch; }
}
</style>
@endsection