'use client';

import { useState, useEffect } from 'react';
import ExamList from '../../components/admin/ExamList';
import Link from 'next/link';

export default function AdminDashboard() {
  const [exams, setExams] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchExams = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/exams');
      const data = await response.json();
      if (response.ok) {
        setExams(data.exams);
      } else {
        setError(data.error || 'خطا در دریافت آزمون‌ها');
      }
    } catch (err) {
      setError('خطا در ارتباط با سرور');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchExams();
  }, []);

  const handleDeleteExam = async (id: string) => {
    if (!confirm('آیا از حذف این آزمون مطمئن هستید؟')) return;

    try {
      const response = await fetch(`/api/exams/${id}`, {
        method: 'DELETE',
      });

      if (response.ok) {
        fetchExams();
      } else {
        const data = await response.json();
        alert(data.error || 'خطا در حذف آزمون');
      }
    } catch (err) {
      alert('خطا در ارتباط با سرور');
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 py-8">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">پنل مدیریت</h1>
            <p className="text-gray-600 mt-2">مدیریت آزمون‌ها و سوالات</p>
          </div>
          <Link href="/admin/exams/new" className="btn-primary">
            + ایجاد آزمون جدید
          </Link>
        </div>

        {error && (
          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
            {error}
          </div>
        )}

        {loading ? (
          <div className="flex items-center justify-center py-16">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
          </div>
        ) : (
          <ExamList exams={exams} onDelete={handleDeleteExam} />
        )}
      </div>
    </div>
  );
}