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

interface QuizModule {
    questionId: string;
    questionText: string;
    option1: string;
    option2: string;
    option3: string;
    option4: string;
    correctAnswer: string;
    moduleId: string;
}

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

    useEffect(() => {
        fetch(`http://localhost:5174/api/question-list`)
            .then(res => {
                if (!res.ok) {
                    throw new Error('Network response was not ok');
                }
                return res.json();
            })
            .then(data => {
                console.log(data);
                setQuestionList(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>Question ID</th>
                                <th>Question</th>
                                <th>Option 1</th>
                                <th>Option 2</th>
                                <th>Option 3</th>
                                <th>Option 4</th>
                                <th>Correct Answer</th>
                                <th>Module ID</th>
                                <th className=''>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {questionList.map(question => (
                                <tr key={question.questionId}>
                                    <td>{question.questionId}</td>
                                    <td>{question.questionText}</td>
                                    <td>{question.option1}</td>
                                    <td>{question.option2}</td>
                                    <td>{question.option3}</td>
                                    <td>{question.option4}</td>
                                    <td>{question.correctAnswer}</td>
                                    <td>{question.moduleId}</td>
                                    <td>
                                        <div className='flex flex-row space-x-2'>
                                            <a href={`/admin/edit-question?id=${question.questionId}`}>Edit</a>
                                            <span>|</span>
                                            <a href="">Delete</a>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    );
}