<script setup lang="ts">
import { computed, onMounted, watch } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { useLecturesStore } from '@/stores/lectures'
import GlassCard from '@/components/ui/GlassCard.vue'
import DataTable from '@/components/ui/DataTable.vue'
import StatusBadge from '@/components/ui/StatusBadge.vue'
import EmptyState from '@/components/ui/EmptyState.vue'
const auth = useAuthStore()
const lecturesStore = useLecturesStore()
type DataTableColumn = { key: string; label: string; align?: 'left' | 'center' | 'right' }

const columns: DataTableColumn[] = [
  { key: 'title', label: 'Лекция' },
  { key: 'date', label: 'Дата' },
  { key: 'status', label: 'Статус', align: 'center' },
  { key: 'stats', label: 'Записи/Посещения/Отзывы', align: 'center' },
  { key: 'actions', label: 'Действия', align: 'right' },
]

const rows = computed(() => {
  return lecturesStore.all.map((l) => ({
    id: l.id,
    title: l.title,
    date: `${new Date(l.date).toLocaleDateString('ru-RU')} ${l.time}`,
    status: l.status ?? 'upcoming',
    stats: `${l.enrolledSeats} / — / ${l.reviewCount}`,
  }))
})

function fetchTeacherLectures() {
  if (!auth.user?.id) return
  void lecturesStore.fetchLectures({ TeacherId: auth.user.id })
}

onMounted(fetchTeacherLectures)
watch(() => auth.user?.id, fetchTeacherLectures)
</script>

<template>
  <div class="teacher-lectures page-content">
    <div class="header">
      <h1 class="page-title">Мои лекции</h1>
      <button class="btn-primary" disabled>Создать лекцию</button>
    </div>

    <GlassCard>
      <EmptyState
        v-if="!rows.length && !lecturesStore.loading"
        title="Лекций пока нет"
        subtitle="Backend не вернул лекции для текущего преподавателя."
      />
      <DataTable :columns="columns" :rows="rows">
        <template #status="{ row }">
          <StatusBadge :status="row.status" />
        </template>
        <template #actions>
          <div class="actions">
            <button class="btn-ghost" disabled>Редактировать</button>
            <button class="btn-ghost" disabled>Открыть/закрыть запись</button>
            <button class="btn-ghost" disabled>Список записавшихся</button>
            <button class="btn-ghost" disabled>Отметить посещение</button>
          </div>
        </template>
      </DataTable>
    </GlassCard>
  </div>
</template>

<style scoped>
.teacher-lectures {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
</style>
