import React, { useEffect, useState } from 'react';
import { getCardById, getCardsByIds } from '../services/api';
import { Deck } from '../types';
import { supabase } from "../lib/supabase";
import DeckCard from "./DeckCard";

interface DeckListProps {
  onDeckEdit?: (deckId: string) => void;
}

const DeckList = ({ onDeckEdit }: DeckListProps) => {
  const [decks, setDecks] = useState<Deck[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchDecks = async () => {
      const { data: decksData, error: decksError } = await supabase.from('decks').select('*');
      if (decksError) {
        console.error('Error fetching decks:', decksError);
        setLoading(false);
        return;
      }

      const decksWithCards = await Promise.all(decksData.map(async (deck) => {
        const { data: cardEntities, error: cardsError } = await supabase
          .from('deck_cards')
          .select('*')
          .eq('deck_id', deck.id);

        if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
          console.log("deck", deck.name);
            console.log("cardEntities", cardEntities);
        }

        if (cardsError) {
          console.error(`Error fetching cards for deck ${deck.id}:`, cardsError);
          return { ...deck, cards: [] };
        }

        const cardIds = cardEntities.map((entity) => entity.card_id);
        const uniqueCardIds = [...new Set(cardIds)];

        console.log("uniqueCardIds", uniqueCardIds);

        try {
          const scryfallCards = await getCardsByIds(uniqueCardIds);

          if (!scryfallCards) {
            console.error("scryfallCards is undefined after getCardsByIds");
            return { ...deck, cards: [] };
          }

          const cards = cardEntities.map((entity) => {
            const card = scryfallCards.find((c) => c.id === entity.card_id);
            return {
              card,
              quantity: entity.quantity,
              is_commander: entity.is_commander,
            };
          });

          return {
            ...deck,
            cards,
            createdAt: new Date(deck.created_at),
            updatedAt: new Date(deck.updated_at),
          };
        } catch (error) {
          console.error("Error fetching cards from Scryfall:", error);
          return { ...deck, cards: [] };
        }
      }));

      setDecks(decksWithCards);
      setLoading(false);
    };

    fetchDecks();
  }, []);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {decks.map((deck) => (
        <DeckCard key={deck.id} deck={deck} onEdit={onDeckEdit} />
      ))}
    </div>
  );
};

export default DeckList;