<template>
  <div class="login-container">
    <div class="login-card">
      <div class="text-center mb-4">
        <i class="bi bi-clipboard-check display-1 text-primary"></i>
        <h2 class="mt-3">주간업무보고</h2>
        <p class="text-muted">로그인하여 시작하세요</p>
      </div>

      <!-- 새 사용자 로그인 폼 -->
      <div class="card mb-4">
        <div class="card-header">
          <i class="bi bi-person-plus me-2"></i>이메일로 로그인
        </div>
        <div class="card-body">
          <form @submit.prevent="handleLogin">
            <div class="mb-3">
              <label class="form-label">Gmail 주소</label>
              <input 
                type="email" 
                class="form-control" 
                v-model="email" 
                placeholder="example@gmail.com"
                required
              />
            </div>
            <div class="mb-3">
              <label class="form-label">이름</label>
              <input 
                type="text" 
                class="form-control" 
                v-model="name" 
                placeholder="홍길동"
                required
              />
            </div>
            <button type="submit" class="btn btn-primary w-100" :disabled="isSubmitting">
              <span v-if="isSubmitting">
                <span class="spinner-border spinner-border-sm me-2"></span>로그인 중...
              </span>
              <span v-else>
                <i class="bi bi-box-arrow-in-right me-2"></i>로그인
              </span>
            </button>
          </form>
        </div>
      </div>

      <!-- 기존 사용자 선택 -->
      <div class="card" v-if="recentUsers.length > 0">
        <div class="card-header">
          <i class="bi bi-clock-history me-2"></i>최근 로그인 사용자
        </div>
        <div class="list-group list-group-flush">
          <button
            v-for="user in recentUsers"
            :key="user.employeeId"
            class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
            @click="handleSelectUser(user.employeeId)"
            :disabled="isSubmitting"
          >
            <div>
              <i class="bi bi-person-circle me-2 text-primary"></i>
              <strong>{{ user.employeeName }}</strong>
              <small class="text-muted ms-2">{{ user.employeeEmail }}</small>
            </div>
            <i class="bi bi-chevron-right"></i>
          </button>
        </div>
      </div>

      <!-- 에러 메시지 -->
      <div class="alert alert-danger mt-3" v-if="errorMessage">
        <i class="bi bi-exclamation-triangle me-2"></i>{{ errorMessage }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: false
})

const { login, selectUser, getRecentUsers } = useAuth()
const router = useRouter()

const email = ref('')
const name = ref('')
const isSubmitting = ref(false)
const errorMessage = ref('')
const recentUsers = ref<any[]>([])

// 최근 로그인 사용자 불러오기
onMounted(async () => {
  try {
    recentUsers.value = await getRecentUsers()
  } catch (e) {
    // 무시
  }
})

// 이메일+이름 로그인
async function handleLogin() {
  if (!email.value || !name.value) return
  
  isSubmitting.value = true
  errorMessage.value = ''
  
  try {
    await login(email.value, name.value)
    router.push('/')
  } catch (e: any) {
    errorMessage.value = e.message || '로그인에 실패했습니다.'
  } finally {
    isSubmitting.value = false
  }
}

// 기존 사용자 선택
async function handleSelectUser(employeeId: number) {
  isSubmitting.value = true
  errorMessage.value = ''
  
  try {
    await selectUser(employeeId)
    router.push('/')
  } catch (e: any) {
    errorMessage.value = e.message || '로그인에 실패했습니다.'
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}

.login-card {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.list-group-item-action:hover {
  background-color: #f8f9fa;
}
</style>
