<template>
  <div>
    <!-- Header -->
    <div class="mb-6">
      <h1 class="text-3xl font-bold text-gray-900">โปรไฟล์ของฉัน</h1>
      <p class="text-gray-600 mt-2">จัดการข้อมูลส่วนตัวของคุณ</p>
    </div>

    <!-- Profile Card -->
    <div class="mb-10 ">
      <div class="flex flex-col md:flex-row gap-8">
        <!-- Avatar Section -->
        <div class="flex flex-col items-center">
          <div class="w-32 h-32 rounded-full flex items-center justify-center text-6xl mb-4 overflow-hidden bg-primary-100">
            <img
              v-if="profile.avatarUrl"
              :key="profile.avatarUrl"
              :src="profile.avatarUrl"
              alt=""
              class="w-full h-full object-cover"
              @error="onAvatarError"
            />
            <span v-else>{{ profile.avatar }}</span>
          </div>
          <q-btn
            outline
            color="primary"
            label="เปลี่ยนรูป"
            icon="photo_camera"
            :loading="uploadingAvatar"
            @click="triggerAvatarUpload"
          />
          <p class="text-xs text-gray-400 mt-2">ขนาดไม่เกิน 5MB</p>
          <input
            ref="avatarInputRef"
            type="file"
            accept="image/*"
            class="hidden"
            @change="handleAvatarUpload"
          />
        </div>

        <!-- Profile Info -->
        <div class="flex-1">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <div class="text-sm text-gray-600 mb-1">ชื่อ-นามสกุล</div>
              <div class="text-lg text-gray-900">{{ profile.fullName }}</div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-1">อีเมล</div>
              <div class="text-lg text-gray-900 flex items-center gap-2">
                {{ profile.email }}
                <q-badge v-if="profile.emailVerified" color="positive" label="ยืนยันแล้ว" />
                <q-badge v-else color="warning" label="ยังไม่ยืนยัน" />
              </div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-1">Username</div>
              <div class="text-lg text-gray-900">{{ profile.username }}</div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-1">เบอร์โทร</div>
              <div class="text-lg text-gray-900">{{ profile.phone || '-' }}</div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-1">ตำแหน่ง</div>
              <div class="text-lg text-gray-900">{{ profile.roleName || getRoleLabel(profile.role) }}</div>
            </div>
            
            <div>
              <div class="text-sm text-gray-600 mb-1">วันที่สมัคร</div>
              <div class="text-lg text-gray-900">{{ formatDate(profile.createdAt) }}</div>
            </div>
          </div>

          <!-- Action Buttons -->
          <div class="flex flex-wrap gap-3 mt-6">
            <q-btn
              color="primary"
              label="แก้ไขโปรไฟล์"
              icon="edit"
              @click="showEditModal = true"
            />
            <q-btn
              outline
              color="grey-7"
              label="เปลี่ยนรหัสผ่าน"
              icon="lock"
              @click="showPasswordModal = true"
            />
            <q-btn
              v-if="!profile.emailVerified"
              outline
              color="orange"
              label="ขอยืนยันอีเมล"
              icon="mark_email_unread"
              :loading="sendingVerification"
              @click="handleSendVerificationEmail"
            />
          </div>
        </div>
      </div>
    </div>
    
    <!-- Stats Cards
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
      <AppCard>
        <div class="text-center py-4">
          <div class="text-4xl font-bold text-primary-600 mb-2">{{ stats.totalCourses }}</div>
          <div class="text-gray-600">หลักสูตรที่สร้าง</div>
        </div>
      </AppCard>

      <AppCard>
        <div class="text-center py-4">
          <div class="text-4xl font-bold text-secondary-600 mb-2">{{ stats.totalStudents }}</div>
          <div class="text-gray-600">ผู้เรียนทั้งหมด</div>
        </div>
      </AppCard>
    </div> -->

    <!-- Edit Profile Modal -->
    <q-dialog v-model="showEditModal" persistent>
      <q-card style="min-width: 500px">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">แก้ไขโปรไฟล์</div>
          <q-space />
          <q-btn icon="close" flat round dense @click="showEditModal = false" />
        </q-card-section>

        <q-card-section>
          <q-form @submit="handleUpdateProfile">
            <q-input
              v-model="editForm.firstName"
              label="ชื่อ"
              outlined
              class="mb-4"
              :rules="[val => !!val || 'กรุณากรอกชื่อ']"
              lazy-rules="ondemand"
              hide-bottom-space
            >
              <template v-slot:prepend>
                <q-icon name="person" />
              </template>
            </q-input>

            <q-input
              v-model="editForm.lastName"
              label="นามสกุล"
              outlined
              class="mb-4"
              :rules="[val => !!val || 'กรุณากรอกนามสกุล']"
              lazy-rules="ondemand"
              hide-bottom-space
            >
              <template v-slot:prepend>
                <q-icon name="person" />
              </template>
            </q-input>

            <q-input
              v-model="editForm.phone"
              label="เบอร์โทร"
              outlined
              class="mb-4"
              lazy-rules="ondemand"
              hide-bottom-space
            >
              <template v-slot:prepend>
                <q-icon name="phone" />
              </template>
            </q-input>

            <div class="flex justify-end gap-2 mt-4">
              <q-btn
                flat
                label="ยกเลิก"
                color="grey-7"
                @click="showEditModal = false"
              />
              <q-btn
                type="submit"
                label="บันทึก"
                color="primary"
                :loading="saving"
              />
            </div>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>

    <!-- Change Password Modal -->
    <q-dialog v-model="showPasswordModal" persistent>
      <q-card style="min-width: 500px">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">เปลี่ยนรหัสผ่าน</div>
          <q-space />
          <q-btn icon="close" flat round dense @click="showPasswordModal = false" />
        </q-card-section>

        <q-card-section>
          <q-form @submit="handleChangePassword">
            <q-input
              v-model="passwordForm.currentPassword"
              label="รหัสผ่านปัจจุบัน"
              :type="showCurrentPassword ? 'text' : 'password'"
              outlined
              class="mb-4"
              :rules="[val => !!val || 'กรุณากรอกรหัสผ่านปัจจุบัน']"
              lazy-rules="ondemand"
              hide-bottom-space
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="showCurrentPassword ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="showCurrentPassword = !showCurrentPassword"
                />
              </template>
            </q-input>

            <q-input
              v-model="passwordForm.newPassword"
              label="รหัสผ่านใหม่"
              :type="showNewPassword ? 'text' : 'password'"
              outlined
              class="mb-4"
              :rules="[
                val => !!val || 'กรุณากรอกรหัสผ่านใหม่',
                val => val.length >= 6 || 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร'
              ]"
              lazy-rules="ondemand"
              hide-bottom-space
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="showNewPassword ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="showNewPassword = !showNewPassword"
                />
              </template>
            </q-input>

            <q-input
              v-model="passwordForm.confirmPassword"
              label="ยืนยันรหัสผ่านใหม่"
              :type="showConfirmPassword ? 'text' : 'password'"
              outlined
              class="mb-4"
              :rules="[
                val => !!val || 'กรุณายืนยันรหัสผ่าน',
                val => val === passwordForm.newPassword || 'รหัสผ่านไม่ตรงกัน'
              ]"
              lazy-rules="ondemand"
              hide-bottom-space
            >
              <template v-slot:prepend>
                <q-icon name="lock" />
              </template>
              <template v-slot:append>
                <q-icon
                  :name="showConfirmPassword ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="showConfirmPassword = !showConfirmPassword"
                />
              </template>
            </q-input>

            <div class="flex justify-end gap-2 mt-4">
              <q-btn
                flat
                label="ยกเลิก"
                color="grey-7"
                @click="showPasswordModal = false"
              />
              <q-btn
                type="submit"
                label="เปลี่ยนรหัสผ่าน"
                color="primary"
                :loading="changingPassword"
              />
            </div>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';
import { userService, type UserProfileResponse } from '~/services/user.service';
import { authService } from '~/services/auth.service';

definePageMeta({
  layout: 'instructor',
  middleware: 'auth'
});

const $q = useQuasar();
const authStore = useAuthStore();

// Loading state
const loading = ref(true);

// Profile data
const profile = ref({
  fullName: '',
  email: '',
  emailVerified: false,
  username: '',
  phone: '',
  role: '',
  roleName: '',
  avatar: '',
  avatarUrl: '' as string | null,
  createdAt: ''
});

const stats = ref({
  totalCourses: 5,
  totalStudents: 125
});

// Edit form
const showEditModal = ref(false);
const saving = ref(false);
const editForm = ref({
  firstName: '',
  lastName: '',
  phone: ''
});

// Password form
const showPasswordModal = ref(false);
const changingPassword = ref(false);
const showCurrentPassword = ref(false);
const showNewPassword = ref(false);
const showConfirmPassword = ref(false);
const passwordForm = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// Email verification
const sendingVerification = ref(false);

// Methods
const getRoleLabel = (role: string) => {
  const labels: Record<string, string> = {
    INSTRUCTOR: 'ผู้สอน',
    ADMIN: 'ผู้ดูแลระบบ',
    STUDENT: 'ผู้เรียน'
  };
  return labels[role] || role;
};

const formatDate = (date: string, includeTime = true) => {
  const options: Intl.DateTimeFormatOptions = {
    day: 'numeric',
    month: 'short',
    year: '2-digit'
  };

  if (includeTime) {
    options.hour = '2-digit';
    options.minute = '2-digit';
  }

  return new Date(date).toLocaleDateString('th-TH', options);
};

// Avatar upload
const avatarInputRef = ref<HTMLInputElement | null>(null);
const uploadingAvatar = ref(false);

const triggerAvatarUpload = () => {
  avatarInputRef.value?.click();
};

const onAvatarError = () => {
  // Fallback to emoji if image fails
  profile.value.avatarUrl = null;
};

const handleAvatarUpload = async (event: Event) => {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  if (!file) return;

  // Validate file type
  if (!file.type.startsWith('image/')) {
    $q.notify({
      type: 'warning',
      message: 'กรุณาเลือกไฟล์รูปภาพเท่านั้น',
      position: 'top'
    });
    return;
  }

  // Validate file size (max 5MB)
  if (file.size > 5 * 1024 * 1024) {
    $q.notify({
      type: 'warning',
      message: 'ไฟล์มีขนาดใหญ่เกิน 5MB',
      position: 'top'
    });
    return;
  }

  uploadingAvatar.value = true;
  try {
    const response = await userService.uploadAvatar(file);
    
    // Re-fetch profile to get presigned URL from backend
    await fetchProfile();
    
    $q.notify({
      type: 'positive',
      message: response.message || 'อัพโหลดรูปโปรไฟล์สำเร็จ',
      position: 'top'
    });
  } catch (error: any) {
    console.error('Failed to upload avatar:', error);
    $q.notify({
      type: 'negative',
      message: error.data?.message || 'เกิดข้อผิดพลาดในการอัพโหลดรูป',
      position: 'top'
    });
  } finally {
    uploadingAvatar.value = false;
    input.value = '';
  }
};

const handleUpdateProfile = async () => {
  saving.value = true;
  
  try {
    // Call real API to update profile
    const response = await userService.updateProfile({
      first_name: editForm.value.firstName,
      last_name: editForm.value.lastName,
      phone: editForm.value.phone || null
    });
    
    // Refresh profile data from API
    await fetchProfile();
    
    $q.notify({
      type: 'positive',
      message: response.message || 'อัพเดทโปรไฟล์สำเร็จ',
      position: 'top'
    });
    
    showEditModal.value = false;
  } catch (error: any) {
    $q.notify({
      type: 'negative',
      message: error.data?.message || 'เกิดข้อผิดพลาด กรุณาลองใหม่อีกครั้ง',
      position: 'top'
    });
  } finally {
    saving.value = false;
  }
};

const handleChangePassword = async () => {
  changingPassword.value = true;
  
  try {
    // Call real API to change password
    const response = await userService.changePassword(
      passwordForm.value.currentPassword,
      passwordForm.value.newPassword
    );
    
    $q.notify({
      type: 'positive',
      message: response.message || 'เปลี่ยนรหัสผ่านสำเร็จ',
      position: 'top'
    });
    
    showPasswordModal.value = false;
    passwordForm.value = {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    };
  } catch (error: any) {
    $q.notify({
      type: 'negative',
      message: error.data?.message || (error.response?.status === 401 
        ? 'รหัสผ่านปัจจุบันไม่ถูกต้อง' 
        : 'เกิดข้อผิดพลาดในการเปลี่ยนรหัสผ่าน'),
      position: 'top'
    });
  } finally {
    changingPassword.value = false;
  }
};

const handleSendVerificationEmail = async () => {
  sendingVerification.value = true;
  try {
    const response = await authService.sendVerifyEmail();
    $q.notify({
      type: 'positive',
      message: response.message || 'ส่งอีเมลยืนยันไปยังอีเมลของคุณแล้ว',
      position: 'top'
    });
  } catch (error: any) {
    $q.notify({
      type: 'negative',
      message: error.data?.message || 'เกิดข้อผิดพลาดในการส่งอีเมลยืนยัน',
      position: 'top'
    });
  } finally {
    sendingVerification.value = false;
  }
};

// Watch edit modal
watch(showEditModal, (newVal) => {
  if (newVal) {
    // Split fullName into firstName and lastName for editing
    const nameParts = profile.value.fullName.split(' ');
    editForm.value = {
      firstName: nameParts[0] || '',
      lastName: nameParts.slice(1).join(' ') || '',
      phone: profile.value.phone
    };
  }
});

// Fetch profile from API
const fetchProfile = async () => {
  loading.value = true;
  try {
    const data = await userService.getProfile();
    
    // Map API response to profile
    profile.value = {
      fullName: `${data.profile.first_name} ${data.profile.last_name}`,
      email: data.email,
      emailVerified: !!data.email_verified_at,
      username: data.username,
      phone: data.profile.phone || '',
      role: data.role.code,
      roleName: data.role.name.th,
      avatar: '',
      avatarUrl: data.profile.avatar_url,
      createdAt: data.created_at
    };
  } catch (error) {
    $q.notify({
      type: 'negative',
      message: 'ไม่สามารถโหลดข้อมูลโปรไฟล์ได้',
      position: 'top'
    });
  } finally {
    loading.value = false;
  }
};

// Load profile on mount
onMounted(() => {
  fetchProfile();
});
</script>
