@extends('layouts.app')

@section('title', '사용자 수정')

@section('content')
<div class="container mx-auto max-w-4xl">
    <!-- 페이지 헤더 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">👥 사용자 수정</h1>
        <a href="{{ route('users.index') }}" class="text-gray-600 hover:text-gray-800">
            ← 목록으로
        </a>
    </div>

    <!-- 폼 영역 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
        <form id="userForm"
              hx-post="/api/admin/users/{{ $user->id }}"
              hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
              hx-swap="none">
            <input type="hidden" name="_method" value="PUT">

            <!-- 기본 정보 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">기본 정보</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            사용자 ID
                        </label>
                        <input type="text" name="user_id" maxlength="50"
                               value="{{ old('user_id', $user->user_id) }}"
                               placeholder="선택사항"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            이름 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="name" required maxlength="100"
                               value="{{ old('name', $user->name) }}"
                               placeholder="홍길동"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
            </div>

            <!-- 계정 정보 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">계정 정보</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            이메일 <span class="text-red-500">*</span>
                        </label>
                        <input type="email" name="email" required maxlength="255"
                               value="{{ old('email', $user->email) }}"
                               placeholder="user@example.com"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            연락처
                        </label>
                        <input type="text" name="phone" maxlength="20"
                               value="{{ old('phone', $user->phone) }}"
                               placeholder="010-1234-5678"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
            </div>

            <!-- 비밀번호 초기화 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">비밀번호</h2>
                <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm text-gray-700 font-medium">비밀번호 초기화</p>
                            <p class="text-sm text-gray-500 mt-1">임시 비밀번호가 생성되어 사용자 이메일로 발송됩니다.</p>
                        </div>
                        <button type="button" id="resetPasswordBtn"
                                class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-lg transition flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                            비밀번호 초기화
                        </button>
                    </div>
                </div>
            </div>

            <!-- 역할 설정 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">역할 설정</h2>
                @if($roles->isNotEmpty())
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        @foreach($roles as $role)
                            <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="role_ids[]" value="{{ $role->id }}"
                                       {{ in_array($role->id, old('role_ids', $userRoleIds)) ? 'checked' : '' }}
                                       class="h-4 w-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500">
                                <span class="ml-2 text-sm text-gray-700">{{ $role->name }}</span>
                                <span class="ml-1 px-1.5 py-0.5 text-xs rounded {{ $role->guard_name === 'web' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600' }}">{{ $role->guard_name }}</span>
                            </label>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-gray-500">선택 가능한 역할이 없습니다.</p>
                @endif
            </div>

            <!-- 부서 설정 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">부서 설정</h2>
                @if($departments->isNotEmpty())
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        @foreach($departments as $department)
                            <label class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" name="department_ids[]" value="{{ $department->id }}"
                                       {{ in_array($department->id, old('department_ids', $userDepartmentIds)) ? 'checked' : '' }}
                                       class="h-4 w-4 text-green-600 rounded focus:ring-2 focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-700">{{ $department->name }}</span>
                            </label>
                        @endforeach
                    </div>
                    <p class="text-xs text-gray-500 mt-2">첫 번째로 선택한 부서가 주 부서로 설정됩니다.</p>
                @else
                    <p class="text-sm text-gray-500">선택 가능한 부서가 없습니다.</p>
                @endif
            </div>

            <!-- 계정 상태 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">계정 상태</h2>
                <div class="flex items-center gap-6">
                    <label class="flex items-center">
                        <input type="checkbox" name="is_active" value="1"
                               {{ old('is_active', $user->is_active) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500">
                        <span class="ml-2 text-sm text-gray-700">활성 상태</span>
                    </label>
                    @if(auth()->user()?->is_super_admin)
                    <label class="flex items-center">
                        <input type="checkbox" name="is_super_admin" value="1"
                               {{ old('is_super_admin', $user->is_super_admin) ? 'checked' : '' }}
                               class="h-4 w-4 text-red-600 rounded focus:ring-2 focus:ring-red-500">
                        <span class="ml-2 text-sm text-gray-700">슈퍼 관리자</span>
                    </label>
                    @endif
                </div>
            </div>

            <!-- 사용자 정보 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">사용자 정보</h2>
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-gray-600">생성일:</span>
                        <span class="font-medium">{{ $user->created_at?->format('Y-m-d H:i') ?? '-' }}</span>
                    </div>
                    <div>
                        <span class="text-gray-600">수정일:</span>
                        <span class="font-medium">{{ $user->updated_at?->format('Y-m-d H:i') ?? '-' }}</span>
                    </div>
                    <div>
                        <span class="text-gray-600">마지막 로그인:</span>
                        <span class="font-medium">{{ $user->last_login_at?->format('Y-m-d H:i') ?? '없음' }}</span>
                    </div>
                    <div>
                        <span class="text-gray-600">사용자 ID:</span>
                        <span class="font-medium">#{{ $user->id }}</span>
                    </div>
                </div>
            </div>

            <!-- 버튼 영역 -->
            <div class="flex justify-end gap-3">
                <a href="{{ route('users.index') }}"
                   class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
                    취소
                </a>
                <button type="submit"
                        class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                    수정
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<script>
    // HTMX 응답 처리
    document.body.addEventListener('htmx:afterRequest', function(event) {
        if (event.detail.target.id === 'userForm') {
            const response = JSON.parse(event.detail.xhr.response);
            if (response.success) {
                alert(response.message);
                window.location.href = response.redirect;
            } else {
                alert('오류: ' + (response.message || '사용자 수정에 실패했습니다.'));
            }
        }
    });

    // 에러 처리
    document.body.addEventListener('htmx:responseError', function(event) {
        if (event.detail.xhr.status === 422) {
            const errors = JSON.parse(event.detail.xhr.response).errors;
            let errorMsg = '입력 오류:\n';
            for (let field in errors) {
                errorMsg += '- ' + errors[field].join('\n') + '\n';
            }
            alert(errorMsg);
        } else {
            alert('서버 오류가 발생했습니다.');
        }
    });

    // 비밀번호 초기화 버튼 처리
    document.getElementById('resetPasswordBtn').addEventListener('click', function() {
        if (!confirm('비밀번호를 초기화하시겠습니까?\n\n임시 비밀번호가 생성되어 사용자 이메일({{ $user->email }})로 발송됩니다.')) {
            return;
        }

        const btn = this;
        btn.disabled = true;
        btn.innerHTML = '<svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg> 처리중...';

        fetch('/api/admin/users/{{ $user->id }}/reset-password', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
            } else {
                alert('오류: ' + (data.message || '비밀번호 초기화에 실패했습니다.'));
            }
        })
        .catch(error => {
            alert('서버 오류가 발생했습니다.');
            console.error(error);
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg> 비밀번호 초기화';
        });
    });
</script>
@endpush