'use client';
import { useState, useEffect } from 'react';
import { createClient } from '@/utils/supabase/client';
import { FiLink } from 'react-icons/fi';
import { QuizFilters } from './QuizFilters';
import { Quiz } from '@/types/quiz';

interface QuizListProps {
  onQuizSelect: (quizId: number) => void;
}

export function QuizList({ onQuizSelect }: QuizListProps) {
  const [quizes, setQuizes] = useState<Quiz[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const supabase = createClient();

  useEffect(() => {
    const fetchQuizes = async () => {
      setIsLoading(true);
      try {
        const { data } = await supabase
          .from('quizes')
          .select('*')
          .order('created_at', { ascending: false });

        const quizesWithUrl = (await Promise.all(
          (data || []).map(async (quiz) => {
            return {
              ...quiz
            };
          })
        )) as Quiz[];

        setQuizes(quizesWithUrl);
      } catch (error) {
        console.error('Error fetching quizes:', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchQuizes();
  }, [supabase]);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[200px]">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <QuizFilters onQuizCreated={onQuizSelect} />
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
        {quizes.map((quiz) => (
          <button
            key={quiz.id}
            onClick={() => onQuizSelect(quiz.id)}
            className="group bg-white p-3 rounded-lg border border-gray-100 hover:border-primary/20 hover:shadow-md transition-all duration-200 text-left"
          >
            <div className="flex flex-col h-full">
              <div className="flex items-start justify-between">
                <div className="text-lg font-semibold text-gray-800 group-hover:text-primary transition-colors">
                  {quiz.name}
                </div>
                {quiz.url && (
                  <a
                    href={quiz.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    onClick={(e) => e.stopPropagation()}
                    className="text-primary hover:text-primary/80 transition-colors"
                  >
                    <FiLink className="w-5 h-5" />
                  </a>
                )}
              </div>
              <p className="text-sm text-gray-600 mt-0.5">
                {new Date(quiz.date || '').toLocaleDateString('bg-BG', {
                  year: 'numeric',
                  month: 'short',
                  day: 'numeric',
                })}
              </p>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}