@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 style="max-width: 400px;">
                    <select name="department_id"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">선택하세요</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept->id }}" {{ ($profile?->department_id ?? '') == $dept->id ? 'selected' : '' }}>
                                {{ $dept->name }}
                            </option>
                        @endforeach
                    </select>
                    <p class="text-xs text-gray-500 mt-1">결재선, 인사 관리 등에서 사용되는 소속 부서입니다.</p>
                </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="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
                            직급
                            <span style="position:relative; display:inline-flex;"
                                  onmouseenter="this.querySelector('.pos-tip').style.display='block'"
                                  onmouseleave="this.querySelector('.pos-tip').style.display='none'">
                                <svg class="w-4 h-4 text-gray-400 cursor-help" style="transition:color .15s" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <span class="pos-tip text-xs font-normal text-white bg-gray-800 rounded-lg shadow-lg" style="display:none; position:absolute; z-index:10; left:50%; transform:translateX(-50%); top:1.5rem; width:14rem; padding:0.5rem 0.75rem; white-space:normal; line-height:1.5;">
                                    <b>직급</b>은 조직 내 서열을 나타냅니다.<br>예: 사원, 대리, 과장, 차장, 부장
                                </span>
                            </span>
                        </label>
                        <div class="flex gap-2">
                            <select name="position_key" id="position_key"
                                    class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="">선택하세요</option>
                                @foreach($ranks as $rank)
                                    <option value="{{ $rank->key }}" {{ ($profile?->position_key ?? '') === $rank->key ? 'selected' : '' }}>
                                        {{ $rank->name }}
                                    </option>
                                @endforeach
                            </select>
                            <button type="button" onclick="openPositionModal('rank')"
                                    class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg transition text-sm font-bold"
                                    title="직급 추가">+</button>
                        </div>
                    </div>
                    <div>
                        <label class="flex items-center gap-1 text-sm font-medium text-gray-700 mb-1">
                            직책
                            <span style="position:relative; display:inline-flex;"
                                  onmouseenter="this.querySelector('.pos-tip').style.display='block'"
                                  onmouseleave="this.querySelector('.pos-tip').style.display='none'">
                                <svg class="w-4 h-4 text-gray-400 cursor-help" style="transition:color .15s" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <span class="pos-tip text-xs font-normal text-white bg-gray-800 rounded-lg shadow-lg" style="display:none; position:absolute; z-index:10; left:50%; transform:translateX(-50%); top:1.5rem; width:14rem; padding:0.5rem 0.75rem; white-space:normal; line-height:1.5;">
                                    <b>직책</b>은 맡은 역할/책임을 나타냅니다.<br>예: 팀장, 실장, 본부장, 대표이사
                                </span>
                            </span>
                        </label>
                        <div class="flex gap-2">
                            <select name="job_title_key" id="job_title_key"
                                    class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="">선택하세요</option>
                                @foreach($titles as $title)
                                    <option value="{{ $title->key }}" {{ ($profile?->job_title_key ?? '') === $title->key ? 'selected' : '' }}>
                                        {{ $title->name }}
                                    </option>
                                @endforeach
                            </select>
                            <button type="button" onclick="openPositionModal('title')"
                                    class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg transition text-sm font-bold"
                                    title="직책 추가">+</button>
                        </div>
                    </div>
                </div>
            </div>

            @include('hr.employees.partials.position-add-modal')

            <!-- 재직상태 -->
            <div class="mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b">재직상태</h2>
                <div style="max-width: 300px;">
                    <select name="employee_status"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        @php $empStatus = $profile?->employee_status ?? 'active'; @endphp
                        <option value="active" {{ $empStatus === 'active' ? 'selected' : '' }}>재직</option>
                        <option value="leave" {{ $empStatus === 'leave' ? 'selected' : '' }}>휴직</option>
                        <option value="resigned" {{ $empStatus === 'resigned' ? 'selected' : '' }}>퇴직</option>
                    </select>
                </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">
                        {{-- 체크박스 해제 시에도 값이 전송되도록 hidden 필드 추가 --}}
                        <input type="hidden" name="is_active" value="0">
                        <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">
                        {{-- 체크박스 해제 시에도 값이 전송되도록 hidden 필드 추가 --}}
                        <input type="hidden" name="is_super_admin" value="0">
                        <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) {
                showToast(response.message, 'success');
                window.location.href = response.redirect;
            } else {
                showToast(response.message || '사용자 수정에 실패했습니다.', 'error');
            }
        }
    });

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

    // 비밀번호 초기화 버튼 처리
    document.getElementById('resetPasswordBtn').addEventListener('click', function() {
        showConfirm('비밀번호를 초기화하시겠습니까?<br><br>임시 비밀번호가 생성되어 사용자 이메일({{ $user->email }})로 발송됩니다.', () => {
            const btn = document.getElementById('resetPasswordBtn');
            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) {
                    showToast(data.message, 'success');
                } else {
                    showToast(data.message || '비밀번호 초기화에 실패했습니다.', 'error');
                }
            })
            .catch(error => {
                showToast('서버 오류가 발생했습니다.', 'error');
                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> 비밀번호 초기화';
            });
        }, { title: '비밀번호 초기화', icon: 'warning' });
    });
</script>
@endpush