<template>
  <div class="login-container">
    <div class="login-card">
      <h2>볼링 클럽 매니저 로그인</h2>
      <form @submit.prevent="handleLogin" v-if="!showRegisterForm">
        <div class="form-group">
          <label for="username">사용자명</label>
          <InputText id="username" v-model="username" class="w-full" />

        </div>
        <div class="form-group">
          <label for="password">비밀번호</label>
          <InputText id="password" v-model="password" type="password" class="w-full" />

        </div>
        <div class="form-options">
          <div class="remember-me">
            <Checkbox v-model="rememberMe" :binary="true" inputId="rememberMe" />
            <label for="rememberMe" class="ml-2">로그인 상태 유지</label>
          </div>
          <a href="#" class="forgot-password">비밀번호 찾기</a>
        </div>
        <Button type="submit" label="로그인" class="w-full" :loading="loading" />
        <div class="register-link">
          <p>계정이 없으신가요? <a href="#" @click.prevent="showRegisterForm = true; gtag.event('show_register_form', { 'event_category': '인증', 'event_label': '회원가입 폼 표시' });">회원가입</a></p>
        </div>
      </form>

      <!-- 회원가입 폼 -->
      <form @submit.prevent="handleRegister" v-if="showRegisterForm">
        <h3>회원가입</h3>
        
        <div class="form-group">
          <label for="registerUsername">사용자명(로그인 아이디)</label>
          <InputText id="registerUsername" v-model="registerUsername" class="w-full" />

        </div>
        <div class="form-group">
          <label for="registerName">이름</label>
          <InputText id="registerName" v-model="registerName" class="w-full" />

        </div>
        <div class="form-group">
          <label for="registerEmail">이메일</label>
          <InputText id="registerEmail" v-model="registerEmail" class="w-full" />

        </div>
        <div class="form-group">
          <label for="registerPassword">비밀번호</label>
          <Password id="registerPassword" v-model="registerPassword" :feedback="true" toggleMask 
                   :promptLabel="'비밀번호 강도'"
                   :weakLabel="'약함'"
                   :mediumLabel="'중간'"
                   :strongLabel="'강함'"
                   class="w-full" />

        </div>
        <div class="form-group">
          <label for="registerPasswordConfirm">비밀번호 확인</label>
          <Password id="registerPasswordConfirm" v-model="registerPasswordConfirm" toggleMask 
                   :feedback="false"
                   class="w-full" />

        </div>

        <Button type="submit" label="회원가입" class="w-full" :loading="loading" />
        <div class="login-link">
          <p>이미 계정이 있으신가요? <a href="#" @click.prevent="showRegisterForm = false; gtag.event('show_login_form', { 'event_category': '인증', 'event_label': '로그인 폼 표시' });">로그인</a></p>
        </div>
      </form>
    </div>
    <Toast />
  </div>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import { useGtag } from 'vue-gtag-next';
import authService from '@/services/authService';

const user = inject('user');
const router = useRouter();
const toast = useToast();
const gtag = useGtag();

const username = ref('');
const password = ref('');
const rememberMe = ref(false);
const loading = ref(false);

// 회원가입 폼 상태
const showRegisterForm = ref(false);
const registerName = ref('');
const registerUsername = ref('');
const registerEmail = ref('');
const registerPassword = ref('');
const registerPasswordConfirm = ref('');

// 비밀번호 강도 검사
const passwordHasMinLength = computed(() => registerPassword.value.length >= 8);
const passwordHasUppercase = computed(() => /[A-Z]/.test(registerPassword.value));
const passwordHasLowercase = computed(() => /[a-z]/.test(registerPassword.value));
const passwordHasNumber = computed(() => /[0-9]/.test(registerPassword.value));
const passwordHasSpecial = computed(() => /[!@#$%^&*(),.?":{}|<>]/.test(registerPassword.value));

// 폼 유효성 검사
const validateForm = () => {
  let isValid = true;
  
  // 사용자명 검증
  if (!username.value) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '사용자명을 입력해주세요.', life: 3000 });
    isValid = false;
  }
  
  // 비밀번호 유효성 검사
  if (!password.value) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호를 입력해주세요.', life: 3000 });
    isValid = false;
  }
  
  return isValid;
};

// 회원가입 폼 유효성 검사
const validateRegisterForm = () => {
  // 이름 검증
  if (!registerName.value) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '이름을 입력해주세요.', life: 3000 });
    return false;
  }
  
  // 사용자명 검증
  if (!registerUsername.value) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '사용자명을 입력해주세요.', life: 3000 });
    return false;
  } else if (registerUsername.value.length < 4) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '사용자명은 최소 4자 이상이어야 합니다.', life: 3000 });
    return false;
  }
  
  // 이메일 검증
  if (!registerEmail.value) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '이메일을 입력해주세요.', life: 3000 });
    return false;
  } else if (!/^\S+@\S+\.\S+$/.test(registerEmail.value)) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '유효한 이메일 주소를 입력해주세요.', life: 3000 });
    return false;
  }
  
  // 비밀번호 유효성 검사
  if (!registerPassword.value) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호를 입력해주세요.', life: 3000 });
    return false;
  } else if (registerPassword.value.length < 8) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호는 최소 8자 이상이어야 합니다.', life: 3000 });
    return false;
  } else if (!passwordHasUppercase.value || !passwordHasLowercase.value || 
             !passwordHasNumber.value || !passwordHasSpecial.value) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호는 대문자, 소문자, 숫자, 특수문자를 모두 포함해야 합니다.', life: 3000 });
    return false;
  }
  
  // 비밀번호 확인 유효성 검사
  if (!registerPasswordConfirm.value) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호 확인을 입력해주세요.', life: 3000 });
    return false;
  } else if (registerPassword.value !== registerPasswordConfirm.value) {
    toast.add({ severity: 'error', summary: '입력 오류', detail: '비밀번호가 일치하지 않습니다.', life: 3000 });
    return false;
  }
  
  return true;
};

// 로그인 처리 함수
const handleLogin = async () => {
  if (!validateForm()) return;
  
  // Google Analytics 이벤트 추적 - 로그인 시도
  gtag.event('login_attempt', {
    'event_category': '인증',
    'event_label': '로그인 시도',
    'value': 1
  });
  
  loading.value = true;
  
  try {
    const response = await authService.login({
      username: username.value,
      password: password.value
    });
    
    // 토큰 저장
    const { token, user: userData } = response.data;
    localStorage.setItem('token', token);
    localStorage.setItem('userRole', userData.role);
    localStorage.setItem('clubId', userData.clubId);
    localStorage.setItem('userClubRole', userData.memberType || '');
    
    // 사용자 정보 저장
    user.value = userData;
    
    // 로그인 성공 메시지
    toast.add({ severity: 'success', summary: '성공', detail: '로그인에 성공했습니다.', life: 3000 });
    
    // Google Analytics 이벤트 추적 - 로그인 성공
    gtag.event('login', {
      'method': 'id_password',
      'user_role': userData.role
    });
    
    // 사용자 정보 및 메뉴 아이템 로드 이벤트 발생
    window.dispatchEvent(new CustomEvent('user-logged-in'));
    
    // 사용자 역할에 따라 리디렉션
    if (userData.role === 'admin' || userData.role === 'superadmin') {
      router.push('/admin');
    } else {
      router.push('/club');
    }
  } catch (error) {
    console.error('로그인 오류:', error);
    
    // Google Analytics 이벤트 추적 - 로그인 실패
    gtag.event('login_failed', {
      'event_category': '인증',
      'event_label': error.response?.data?.message || '인증 실패',
      'value': 1
    });
    
    // 오류 메시지 처리
    const errorMessage = error.response?.data?.message || '로그인에 실패했습니다. 이메일과 비밀번호를 확인해주세요.';
    toast.add({ severity: 'error', summary: '오류', detail: errorMessage, life: 3000 });
  } finally {
    loading.value = false;
  }
};

// 회원가입 처리 함수
const handleRegister = async () => {
  if (!validateRegisterForm()) return;
  
  // Google Analytics 이벤트 추적 - 회원가입 시도
  gtag.event('sign_up_attempt', {
    'event_category': '인증',
    'event_label': '회원가입 시도',
    'value': 1
  });
  
  loading.value = true;
  
  try {
    await authService.register({
      name: registerName.value,
      username: registerUsername.value,
      email: registerEmail.value,
      password: registerPassword.value
    });
    
    // 회원가입 성공 메시지
    toast.add({ severity: 'success', summary: '성공', detail: '회원가입에 성공했습니다. 로그인해주세요.', life: 3000 });
    
    // Google Analytics 이벤트 추적 - 회원가입 성공
    gtag.event('sign_up', {
      'method': 'form'
    });
    
    // 로그인 폼으로 전환
    showRegisterForm.value = false;
    
    // 입력한 사용자명을 로그인 폼에 자동 입력
    username.value = registerUsername.value;
    password.value = '';
    
    // 회원가입 폼 초기화
    registerName.value = '';
    registerUsername.value = '';
    registerEmail.value = '';
    registerPassword.value = '';
    registerPasswordConfirm.value = '';
  } catch (error) {
    console.error('회원가입 오류:', error);
    
    // Google Analytics 이벤트 추적 - 회원가입 실패
    gtag.event('sign_up_failed', {
      'event_category': '인증',
      'event_label': error.response?.data?.message || '회원가입 실패',
      'value': 1
    });
    
    // 오류 메시지 처리
    const errorMessage = error.response?.data?.message || '회원가입에 실패했습니다. 다시 시도해주세요.';
    toast.add({ severity: 'error', summary: '오류', detail: errorMessage, life: 3000 });
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.remember-me {
  display: flex;
  align-items: center;
}

.forgot-password {
  color: #2196F3;
  text-decoration: none;
  font-size: 0.875rem;
}

.forgot-password:hover {
  text-decoration: underline;
}

.register-link, .login-link {
  text-align: center;
  margin-top: 1.5rem;
}

.register-link a, .login-link a {
  color: #2196F3;
  text-decoration: none;
  font-weight: 500;
}

.register-link a:hover, .login-link a:hover {
  text-decoration: underline;
}

.ml-2 {
  margin-left: 0.5rem;
}

.w-full {
  width: 100%;
}

:deep(.p-password-input) {
  width: 100%;
}
</style>
