import { defineStore } from 'pinia';
import { instructorService } from '~/services/instructor.service';

interface Course {
    id: number;
    title: string;
    students: number;
    lessons: number;
    icon: string;
    thumbnail: string | null;
}

interface DashboardStats {
    totalCourses: number;
    totalStudents: number;
    completedStudents: number;
}

export const useInstructorStore = defineStore('instructor', {
    state: () => ({
        stats: {
            totalCourses: 0,
            totalStudents: 0,
            completedStudents: 0
        } as DashboardStats,

        recentCourses: [] as Course[],
        loading: false
    }),

    getters: {
        getDashboardStats: (state) => state.stats,
        getRecentCourses: (state) => state.recentCourses
    },

    actions: {
        async fetchDashboardData() {
            this.loading = true;
            try {
                // Fetch real courses from API
                const courses = await instructorService.getCourses();

                // Update stats
                this.stats.totalCourses = courses.length;
                // TODO: Get real student counts from API when available
                this.stats.totalStudents = 0;
                this.stats.completedStudents = 0;

                // Map to recent courses format (take first 5)
                this.recentCourses = courses.slice(0, 3).map((course, index) => ({
                    id: course.id,
                    title: course.title.th,
                    students: 0, // TODO: Get from API
                    lessons: 0, // TODO: Get from course detail API
                    icon: ['📘', '📗', '📙', '📕', '📒'][index % 5],
                    thumbnail: course.thumbnail_url || null
                }));
            } catch (error) {
                console.error('Failed to fetch dashboard data:', error);
            } finally {
                this.loading = false;
            }
        }
    }
});