<script setup lang="ts">
/**
 * @file discovery.vue
 * @description Course Discovery / Catalog Page.
 * Allows users to browse, filter, and view details of available courses.
 * Includes a toggleable detailed view for course previews.
 */

definePageMeta({
  layout: "default",
  middleware: "auth",
});

useHead({
  title: "รายการคอร์ส - e-Learning",
});

// ==========================================
// 1. State Management
const showDetail = ref(false);
const searchQuery = ref("");
const selectedCategoryIds = ref<number[]>([]);
const categories = ref<any[]>([]);
const courses = ref<any[]>([]);
const selectedCourse = ref<any>(null);

const isLoading = ref(false);
const isLoadingDetail = ref(false);
const isEnrolling = ref(false);

// Pagination State
const currentPage = ref(1);
const totalPages = ref(1);
const itemsPerPage = 12;


const { t } = useI18n();
const { currentUser } = useAuth();
const { fetchCategories } = useCategory();
const { fetchCourses, fetchCourseById, enrollCourse, getLocalizedText } = useCourse();


// 2. Computed Properties
const sortOption = ref(computed(() => t('discovery.sortRecent')));
const sortOptions = computed(() => [t('discovery.sortRecent')]);

const filteredCourses = computed(() => {
  let result = courses.value;
  
  // If more than 1 category is selected, we still do client-side filtering 
  // because the API currently only supports one category_id at a time.
  if (selectedCategoryIds.value.length > 1) {
    result = result.filter(c => selectedCategoryIds.value.includes(c.category_id));
  }
  
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    result = result.filter(c => {
      const title = getLocalizedText(c.title).toLowerCase();
      const desc = getLocalizedText(c.description).toLowerCase();
      return title.includes(query) || (desc && desc.includes(query));
    });
  }
  return result;
});

// 3. Helper Functions


// 4. API Actions
const loadCategories = async () => {
  const res = await fetchCategories();
  if (res.success) categories.value = res.data || [];
};

const loadCourses = async (page = 1) => {
  isLoading.value = true;
  
  // Use server-side filtering if exactly one category is selected
  const categoryId = selectedCategoryIds.value.length === 1 ? selectedCategoryIds.value[0] : undefined;
  
  const res = await fetchCourses({
    category_id: categoryId,
    page: page,
    limit: itemsPerPage,
    forceRefresh: true
  });
  
  if (res.success) {
    courses.value = res.data || [];
    totalPages.value = res.totalPages || 1;
    currentPage.value = res.page || 1;
  }
  isLoading.value = false;
};

const selectCourse = async (id: number) => {
  isLoadingDetail.value = true;
  selectedCourse.value = null;
  showDetail.value = true;
  const res = await fetchCourseById(id);
  if (res.success) selectedCourse.value = res.data;
  isLoadingDetail.value = false;
};

const handleEnroll = async (id: number) => {
  if (isEnrolling.value) return;
  isEnrolling.value = true;
  const res = await enrollCourse(id);
  if (res.success) {
    return navigateTo('/dashboard/my-courses?enrolled=true');
  } else {
    alert(res.error || 'Failed to enroll');
  }
  isEnrolling.value = false;
};

// Watch for category selection changes to reload courses
watch(selectedCategoryIds, () => {
  currentPage.value = 1;
  loadCourses(1);
}, { deep: true });

onMounted(() => {
  loadCategories();
  loadCourses();
});
</script>

<template>
  <div class="page-container">

    <!-- CATALOG VIEW: Browse courses -->
    <div v-if="!showDetail">

      <!-- Top Header Area -->
      <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
        <!-- Title -->
        <h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
          <span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
          {{ $t('discovery.title') }}
        </h1>

        <!-- Right Side: Search & Sort -->
        <div class="flex items-center gap-3 w-full md:w-auto">
          <!-- Search Input -->
          <q-input
            v-model="searchQuery"
            dense
            outlined
            rounded
            :placeholder="$t('discovery.searchPlaceholder')"
            class="w-full md:w-72 search-input"
            bg-color="transparent"
          >
            <template v-slot:prepend>
              <q-icon name="search" class="text-slate-400" />
            </template>
          </q-input>
        </div>
      </div>

      <!-- Main Layout: Sidebar + Grid -->
      <div class="flex flex-col lg:flex-row gap-8">
          
          <!-- LEFT SIDEBAR: Category Filter -->
          <div class="w-full lg:w-64 flex-shrink-0 lg:sticky lg:top-24 z-10">
             <CategorySidebar
                :categories="categories"
                v-model="selectedCategoryIds"
             />
          </div>

          <!-- RIGHT CONTENT: Course Grid -->
          <div class="flex-1 w-full">
              <div v-if="filteredCourses.length > 0" class="flex flex-col gap-12">
                  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                      <CourseCard
                        v-for="course in filteredCourses"
                        :key="course.id"
                        v-bind="{ ...course, image: course.thumbnail_url }"
                        show-view-details
                        @view-details="selectCourse(course.id)"
                      />
                  </div>

                  <!-- Pagination Controls -->
                  <div v-if="totalPages > 1" class="flex justify-center pb-10">
                    <q-pagination
                      v-model="currentPage"
                      :max="totalPages"
                      :max-pages="6"
                      boundary-numbers
                      direction-links
                      color="primary"
                      flat
                      active-design="unelevated"
                      active-color="primary"
                      @update:model-value="loadCourses"
                    />
                  </div>
              </div>

              <!-- Empty State -->
              <div
                v-else
                class="flex flex-col items-center justify-center py-20 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700"
              >
                <q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
                <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('discovery.emptyTitle') }}</h3>
                <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">
                  {{ $t('discovery.emptyDesc') }}
                </p>
                <button class="mt-6 font-bold text-blue-600 hover:text-blue-700 dark:hover:text-blue-400 transition-colors" @click="searchQuery = ''; selectedCategoryIds = []">
                  {{ $t('discovery.showAll') }}
                </button>
              </div>
          </div>

      </div>

    </div>

    <!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
    <div v-else>
      <button 
        @click="showDetail = false" 
        class="inline-flex items-center gap-2 text-slate-600 dark:text-white hover:text-blue-600 dark:hover:text-blue-300 mb-6 transition-all font-black text-lg md:text-xl group"
      >
        <q-icon name="arrow_back" size="24px" class="transition-transform group-hover:-translate-x-1" />
        {{ $t('discovery.backToCatalog') }}
      </button>

      <div v-if="isLoadingDetail" class="flex justify-center py-20">
         <q-spinner size="3rem" color="primary" />
      </div>

      <CourseDetailView
        v-else-if="selectedCourse"
        :course="selectedCourse"
        :user="currentUser"
        @back="showDetail = false"
        @enroll="handleEnroll"
      />
    </div>
  </div>
</template>

<style scoped>
/* Standard overrides for Quasar inputs to match Tailwind theme */
.search-input :deep(.q-field__control) {
  border-radius: 9999px; /* Full rounded pill */
  background-color: white !important;
  transition: all 0.3s ease;
}

.dark .search-input :deep(.q-field__control) {
  background-color: #1e293b !important; /* slate-800: Inner card depth */
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.search-input :deep(.q-field__native) {
  color: #0f172a !important; /* slate-900: Dark text for light mode */
}

.dark .search-input :deep(.q-field__native) {
  color: white !important;
}

.search-input :deep(.q-field__shadow) {
  box-shadow: none !important;
}
</style>

