@props(['mode', 'user' => null])

@php
    $isCreate = $mode === 'create';
    $isEdit = $mode === 'edit';
    $isDelete = $mode === 'delete';
    $isSelf = $mode === 'self';
    
    $actionUrl = match($mode) {
        'create' => route('admin.users.store'),
        'edit' => route('admin.users.update', $user?->msnv),
        'delete' => route('admin.users.destroy', $user?->msnv),
        'self' => route('user.update_profile'),
        default => null,
    };
    
    $method = match($mode) {
        'edit' => 'PUT',
        'delete' => 'DELETE',
        default => 'POST',
    };
@endphp

<div class="bg-white rounded-[24px] shadow-[0_10px_30px_rgba(15,23,42,0.05)] border border-white overflow-hidden flex flex-col justify-between">
    @if($mode !== 'edit')
        <div class="bg-gradient-to-r from-blue-50/70 via-indigo-50/50 to-purple-50/30 px-6 py-6 sm:px-8 border-b border-gray-100">
            <h3 class="text-[17px] font-extrabold text-[#1a2b49] leading-tight flex items-center gap-2">
                <span>{{ match($mode) {
                    'create' => '👥 Thêm User Mới',
                    'delete' => '⚠️ Xác nhận nghỉ việc: ' . ($user?->msnv),
                    'self' => '👤 Thông tin cá nhân: ' . ($user?->msnv),
                } }}</span>
            </h3>
        </div>
    @endif

    @if(!$isCreate && $user && !$isEdit && !$isSelf)
        <div class="p-6 sm:p-8 pb-0">
            <div class="mb-2 p-5 rounded-2xl bg-gradient-to-br from-slate-50 to-gray-50 border border-gray-100 flex items-center gap-4 shadow-sm">
                <div class="w-12 h-12 rounded-full bg-blue-50 text-[#3462f7] flex items-center justify-center font-extrabold text-lg shadow-inner flex-shrink-0">
                    {{ strtoupper(substr($user->name ?? $user->msnv, 0, 2)) }}
                </div>
                <div class="flex-1 min-w-0">
                    <h4 class="font-extrabold text-[#1a2b49] text-base truncate">{{ $user->name }}</h4>
                    <p class="text-xs text-gray-500 font-medium truncate mb-1">{{ $user->mail }}</p>
                    <div class="flex items-center gap-2">
                        <span class="px-2 py-0.5 text-[10px] font-bold rounded-full bg-blue-50 text-blue-700 border border-blue-100">
                            {{ $user->role == config('constants.ROLE_ADMIN') ? 'Admin' : 'Member' }}
                        </span>
                        <span class="text-xs text-gray-300 font-semibold">•</span>
                        <span class="text-xs font-bold text-gray-600">Thẻ: <span class="text-orange-500 font-extrabold text-sm">{{ $user->card }}</span></span>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if($actionUrl)
        <form action="{{ $actionUrl }}" method="POST" enctype="multipart/form-data" class="flex flex-col flex-1 justify-between">
            @csrf
            @if($method !== 'POST')
                @method($method)
            @endif
    @endif

        <div class="p-6 sm:p-8 {{ !$isCreate && !$isEdit && !$isSelf ? 'pt-0' : '' }} space-y-5">
            @if($isDelete && $user)
                <p class="text-sm text-red-600 leading-relaxed font-semibold">
                    Bạn có chắc chắn muốn cho nhân viên {{ $user->msnv }} nghỉ việc không? Tài khoản này sẽ không thể đăng nhập hoặc thực hiện các giao dịch thẻ sau khi xác nhận.
                </p>
            @else
                <!-- 1. User Avatar Section -->
                @if($isSelf || $isEdit)
                    <x-user-avatar-section :mode="$mode" :user="$user" />
                @endif

                <!-- 2. User Basic Information Section -->
                <x-user-basic-info :mode="$mode" :user="$user" />

                <!-- 3. User Security Section -->
                <x-user-security-section :mode="$mode" :user="$user" />

                <!-- 4. User Administration Fields Section -->
                <x-user-admin-section :mode="$mode" :user="$user" />
            @endif
        </div>

        <x-action-panel :mode="$mode" :user="$user" />

    @if($actionUrl)
        </form>
    @endif
</div>

@if($isCreate || $isEdit)
    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (document.getElementById('departments') && typeof TomSelect === 'function') {
                new TomSelect("#departments", {
                    create: false,
                    sortField: {
                        field: "text",
                        direction: "asc"
                    },
                    placeholder: "Tìm phòng ban...",
                    render: {
                        item: function(data, escape) {
                            return '<div class="item" title="' + escape(data.text) + '">' + escape(data.text) + '</div>';
                        },
                        no_results: function(data, escape) {
                            return '<div class="no-results p-3 text-gray-500">Không tìm thấy phòng ban nào</div>';
                        }
                    }
                });
            }
        });
    </script>
    @endpush
@endif