import React, { useEffect, useState } from 'react';

interface QuizModule {
    quizName: string;
    quizId: string;
    totalQuestion: string;
    internalMarks: string;
    attendance: string;
    moduleId: string;
}

export default function AdminIndex() {
    const [quizList, setQuizList] = useState<QuizModule[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

    useEffect(() => {
        fetch(`http://localhost:5174/api/quiz-list`)
            .then(res => {
                if (!res.ok) {
                    throw new Error('Network response was not ok');
                }
                return res.json();
            })
            .then(data => {
                console.log(data);
                setQuizList(data);
                setLoading(false);
            })
            .catch(error => {
                console.error('An error occurred', error);
                setError(error);
                setLoading(false);
            });
    }, []); // Dependency array to run the effect only once on mount

    if (loading) {
        return <div>Loading...</div>;
    }

    if (error) {
        return <div>Error: {error.message}</div>;
    }

    return (
        <div>
            <section className="container mx-auto px-4">
                <div>
                    <table className='w-full'>
                        <thead>
                            <tr>
                                <th>Quiz ID</th>
                                <th>Quiz Name</th>
                                <th>Total Question</th>
                                <th>internalMarks</th>
                                <th>Attendance</th>
                                <th>Module ID</th>
                                <th className=''>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {quizList.map(quiz => (
                                <tr key={quiz.quizId}>
                                    <td>{quiz.quizId}</td>
                                    <td>{quiz.quizName}</td>
                                    <td>{quiz.totalQuestion}</td>
                                    <td>{quiz.internalMarks}</td>
                                    <td>{quiz.attendance}</td>
                                    <td>{quiz.moduleId}</td>
                                    <td>
                                        <div className='flex flex-row space-x-2'>
                                            <a href={`/admin/edit-quiz?id=${quiz.quizId}`}>Edit</a>
                                            <span>|</span>
                                            <a href="">Delete</a>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    );
}