'use client';

import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import ExamPage from '../../../components/exam/ExamPage';
import type { Question } from '../../../types';

export default function ExamSlugPage() {
  const params = useParams();
  const [examData, setExamData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchExam = async () => {
      try {
        setLoading(true);
        const response = await fetch(`/api/exams/${params.slug}`);
        const data = await response.json();

        if (response.ok) {
          setExamData(data.exam);
        } else {
          setError(data.error || 'آزمون یافت نشد');
        }
      } catch (err) {
        setError('خطا در ارتباط با سرور');
      } finally {
        setLoading(false);
      }
    };

    if (params.slug) {
      fetchExam();
    }
  }, [params.slug]);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
      </div>
    );
  }

  if (error || !examData) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
        <div className="text-center">
          <div className="text-6xl mb-4">😕</div>
          <p className="text-red-600 mb-4">{error || 'آزمون یافت نشد'}</p>
        </div>
      </div>
    );
  }

  const questions: Question[] = examData.questions.map((q: any) => ({
    ...q,
    options: JSON.parse(q.options),
  }));

  return (
    <ExamPage
      examId={examData.id}
      examTitle={examData.title}
      examDescription={examData.description}
      questions={questions}
    />
  );
}