<template>
  <div class="profile-container">
    <div class="card">
      <div class="card-header">
        <h2>내 프로필</h2>
      </div>
      
      <div class="profile-content">
        <div class="profile-header">
          <div class="profile-avatar">
            <Avatar :image="user.avatar || null" :label="getInitials(user.name)" size="xlarge" shape="circle" class="shadow-2" />
          </div>
          <div class="profile-info">
            <h3>{{ user.name }}</h3>
            <div class="info-item">
              <span>{{ user.username }} <small>(로그인 아이디)</small></span>
            </div>
            <div class="info-item">
              <span>{{ user.email }}</span>
            </div>
            <div class="info-item">
              <Badge :value="user.role === 'admin' ? '관리자' : '일반 사용자'" :severity="user.role === 'admin' ? 'success' : 'info'" />
            </div>
          </div>
        </div>
        
        <Divider>
          <span class="text-sm text-500">프로필 정보 수정</span>
        </Divider>
        
        <div class="profile-form">
          <form @submit.prevent="updateProfile">
            <div class="p-fluid formgrid grid">              
              <div class="field col-12 md:col-6">
                <label for="name" class="font-medium mb-2 block">이름</label>
                <InputText id="name" v-model="form.name" :class="{'p-invalid': v$.name.$invalid && submitted}" class="w-full" />
                <small v-if="v$.name.$invalid && submitted" class="p-error block mt-1">{{ v$.name.$errors[0].$message }}</small>
              </div>
              
              <div class="field col-12 md:col-6">
                <label for="email" class="font-medium mb-2 block">이메일</label>
                <InputText id="email" v-model="form.email" :class="{'p-invalid': v$.email.$invalid && submitted}" class="w-full" />
                <small v-if="v$.email.$invalid && submitted" class="p-error block mt-1">{{ v$.email.$errors[0].$message }}</small>
              </div>
              
              <div class="col-12">
                <Divider>
                  <span class="text-sm text-500">비밀번호 변경</span>
                </Divider>
              </div>
              
              <div class="field col-12 md:col-4">
                <label for="currentPassword" class="font-medium mb-2 block">현재 비밀번호</label>
                <Password id="currentPassword" v-model="form.currentPassword" :feedback="false" toggleMask inputClass="w-full" />
                <small class="text-500 block mt-1">변경 시에만 입력</small>
              </div>
              
              <div class="field col-12 md:col-4">
                <label for="newPassword" class="font-medium mb-2 block">새 비밀번호</label>
                <Password id="newPassword" v-model="form.newPassword" :class="{'p-invalid': v$.newPassword.$invalid && passwordChangeAttempted}" toggleMask inputClass="w-full" />
                <small v-if="v$.newPassword.$invalid && passwordChangeAttempted" class="p-error block mt-1">{{ v$.newPassword.$errors[0].$message }}</small>
                <small v-else class="text-500 block mt-1">변경 시에만 입력</small>
              </div>
              
              <div class="field col-12 md:col-4">
                <label for="confirmPassword" class="font-medium mb-2 block">비밀번호 확인</label>
                <Password id="confirmPassword" v-model="form.confirmPassword" :class="{'p-invalid': v$.confirmPassword.$invalid && passwordChangeAttempted}" :feedback="false" toggleMask inputClass="w-full" />
                <small v-if="v$.confirmPassword.$invalid && passwordChangeAttempted" class="p-error block mt-1">{{ v$.confirmPassword.$errors[0].$message }}</small>
              </div>
            </div>
            
            <div class="button-container">
              <Button type="submit" label="프로필 업데이트" icon="pi pi-save" :loading="loading" class="p-button-raised" />
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <Toast />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useGtag } from 'vue-gtag-next';
import { useToast } from 'primevue/usetoast';
import { useVuelidate } from '@vuelidate/core';
import { required, email, minLength, sameAs, helpers } from '@vuelidate/validators';
import authService from '@/services/authService';
import apiClient from '@/services/api';

const toast = useToast();

// 상태 변수
const loading = ref(false);
const submitted = ref(false);
const passwordChangeAttempted = ref(false);

// 사용자 정보
const user = reactive({
  id: null,
  name: '',
  username: '',
  email: '',
  role: '',
  avatar: null
});

// 폼 데이터
const form = reactive({
  username: '',
  name: '',
  email: '',
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 유효성 검사 규칙
const rules = computed(() => ({
  name: { required: helpers.withMessage('이름을 입력해주세요.', required) },
  email: { 
    required: helpers.withMessage('이메일을 입력해주세요.', required),
    email: helpers.withMessage('유효한 이메일 주소를 입력해주세요.', email)
  },
  newPassword: { 
    minLength: helpers.withMessage('비밀번호는 최소 8자 이상이어야 합니다.', minLength(8))
  },
  confirmPassword: { 
    sameAsPassword: helpers.withMessage('비밀번호가 일치하지 않습니다.', sameAs(form.newPassword))
  }
}));

const v$ = useVuelidate(rules, form);

// 페이지 로드 시 사용자 정보 가져오기
// 페이지 진입 시 Google Analytics 페이지뷰 추적
onMounted(async () => {
  const gtag = useGtag();
  gtag.pageview({
    page_title: '프로필',
    page_path: window.location.pathname,
    page_location: window.location.href
  });
  await fetchUserProfile();
});

// 사용자 프로필 가져오기
const fetchUserProfile = async () => {
  try {
    const response = await authService.getCurrentUser();
    
    // 사용자 정보 설정
    Object.assign(user, response.data);
    
    // 폼 데이터 초기화
    form.username = user.username;
    form.name = user.name;
    form.email = user.email;
  } catch (error) {
    console.error('사용자 프로필을 가져오는 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: '사용자 프로필을 가져오는 중 오류가 발생했습니다.', life: 3000 });
  }
};

// 이니셜 가져오기 (아바타용)
const getInitials = (name) => {
  if (!name) return '';
  return name.split(' ')
    .map(part => part.charAt(0))
    .join('')
    .toUpperCase();
};

// 프로필 업데이트
const updateProfile = async () => {
  submitted.value = true;
  
  const profileResult = await v$.value.$validate();
  if (!profileResult) return;
  
  loading.value = true;
  try {
    const profileData = {
      id: user.id,
      name: form.name,
      email: form.email
    };

    // 비밀번호 변경이 요청된 경우
    if (form.currentPassword && form.newPassword) {
      passwordChangeAttempted.value = true;
      
      if (form.newPassword !== form.confirmPassword) {
        toast.add({ severity: 'error', summary: '오류', detail: '새 비밀번호가 일치하지 않습니다.', life: 3000 });
        return;
      }
      
      profileData.currentPassword = form.currentPassword;
      profileData.password = form.newPassword;
    }
    
    await apiClient.put('/api/auth/profile', profileData);
    
    // 사용자 정보 업데이트
    Object.assign(user, {
      name: profileData.name,
      email: profileData.email
    });
    
    // 비밀번호 필드 초기화
    form.currentPassword = '';
    form.newPassword = '';
    form.confirmPassword = '';
    passwordChangeAttempted.value = false;
    
    toast.add({ severity: 'success', summary: '성공', detail: '프로필이 성공적으로 업데이트되었습니다.', life: 3000 });
  } catch (error) {
    console.error('프로필 업데이트 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: error.response?.data?.message || '프로필 업데이트 중 오류가 발생했습니다.', life: 3000 });
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.profile-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

.card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  overflow: hidden;
}

.card-header {
  background: var(--primary-color, #3B82F6);
  color: white;
  padding: 1.5rem 2rem;
}

.card-header h2 {
  margin: 0;
  font-weight: 500;
}

.profile-content {
  padding: 2rem;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 2rem;
}

.profile-avatar {
  flex-shrink: 0;
}

.profile-info {
  h3 {
    margin: 0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--text-color-secondary, #4b5563);
  }
  
  .info-item {
    margin-bottom: 0.75rem;
    color: var(--text-color-secondary, #6b7280);
    
    small {
      color: var(--text-color-secondary, #9ca3af);
      margin-left: 0.25rem;
    }
  }
}

.profile-form {
  margin-top: 2rem;
  
  .field {
    margin-bottom: 1.5rem;
  }
}

.button-container {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-border, #e5e7eb);
}
</style>
