<template>
  <div class="fixed inset-0 bg-black/50 flex items-center justify-center">
    <div class="bg-white rounded-lg w-full max-w-md p-6 relative">
      <!-- Header -->
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-lg font-medium">个人设置</h2>
        <button
            @click="onClose"
            class="text-gray-400 hover:text-gray-600 transition-colors"
            aria-label="关闭"
        >
          <X class="w-5 h-5" />
        </button>
      </div>

      <!-- Avatar -->
      <div class="flex justify-center mb-6">
        <div class="w-20 h-20 rounded-full bg-gray-300 overflow-hidden">
          <img
              alt="用户头像"
              class="w-full h-full object-cover"
          />
        </div>
      </div>

      <!-- Form -->
      <form @submit.prevent="onSubmit">
        <div class="space-y-4">
          <!-- Username -->
          <div>
            <label class="block mb-1">
              <span class="text-red-500">*</span>
              用户姓名
            </label>
            <input
                v-model="form.username"
                type="text"
                class="w-full px-3 py-2 border rounded-md"
                placeholder="请输入"
                required
            />
          </div>

          <!-- Password -->
          <div>
            <label class="block mb-1">
              <span class="text-red-500">*</span>
              用户密码
            </label>
            <input
                v-model="form.password"
                type="password"
                class="w-full px-3 py-2 border rounded-md"
                placeholder="请输入"
                required
            />
          </div>

          <!-- Confirm Password -->
          <div>
            <label class="block mb-1">
              <span class="text-red-500">*</span>
              二次确认
            </label>
            <input
                v-model="form.confirmPassword"
                type="password"
                class="w-full px-3 py-2 border rounded-md"
                placeholder="请输入"
                required
            />
          </div>

          <!-- Employee Type -->
          <div>
            <label class="block mb-1">
              <span class="text-red-500">*</span>
              雇员类型
            </label>
            <div class="flex gap-4">
              <label class="flex items-center">
                <input
                    v-model="form.employeeType"
                    type="radio"
                    value="fulltime"
                    class="mr-2"
                />
                全职
              </label>
              <label class="flex items-center">
                <input
                    v-model="form.employeeType"
                    type="radio"
                    value="contract"
                    class="mr-2"
                />
                合同工
              </label>
              <label class="flex items-center">
                <input
                    v-model="form.employeeType"
                    type="radio"
                    value="intern"
                    class="mr-2"
                />
                实习
              </label>
            </div>
          </div>

          <!-- Birth Date -->
          <div>
            <label class="block mb-1">
              <span class="text-red-500">*</span>
              出生日期
            </label>
            <div class="relative">
              <input
                  v-model="form.birthDate"
                  type="date"
                  class="w-full px-3 py-2 border rounded-md"
                  required
              />
              <small class="text-red-500 text-xs">必选项不可为空</small>
            </div>
          </div>

          <!-- Normal Mode Toggle -->
          <div class="flex items-center justify-between">
            <span>普通模式</span>
            <label class="relative inline-flex items-center cursor-pointer">
              <input
                  v-model="form.normalMode"
                  type="checkbox"
                  class="sr-only peer"
              />
              <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer
                         peer-checked:after:translate-x-full peer-checked:after:border-white
                         after:content-[''] after:absolute after:top-[2px] after:left-[2px]
                         after:bg-white after:border-gray-300 after:border after:rounded-full
                         after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500">
              </div>
            </label>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex gap-4 mt-6">
          <button
              type="button"
              @click="onClose"
              class="flex-1 px-4 py-2 border rounded-md hover:bg-gray-50"
          >
            取消
          </button>
          <button
              type="submit"
              class="flex-1 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
          >
            保存
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { X } from 'lucide-vue-next'

const form = ref({
  username: '',
  password: '',
  confirmPassword: '',
  employeeType: 'fulltime',
  birthDate: '',
  normalMode: false
})

const onSubmit = () => {
  // Handle form submission
  console.log('Form submitted:', form.value)
}

const onClose = () => {
  // Emit close event to parent
  emit('close')
}

defineEmits(['close'])
</script>

<style scoped>
/* Add any additional custom styles here */
</style>