import React, { useState, useEffect, useCallback } from 'react';
import { Header } from './components/Header';
import { CardItem } from './components/CardItem';
import { FeedbackBanner } from './components/FeedbackBanner';
import { initialCardsData, shuffleCards } from './data/cardsData';
import { CardData } from './types';

export default function App() {
  const [cards, setCards] = useState<CardData[]>([]);
  const [selectedCards, setSelectedCards] = useState<Set<number>>(new Set());
  const [feedbackStatus, setFeedbackStatus] = useState<'none' | 'success' | 'error'>('none');
  const [feedbackMessage, setFeedbackMessage] = useState<string>('');

  // Initial load
  useEffect(() => {
    setCards(shuffleCards(initialCardsData));
  }, []);

  // Toggle card selection
  const toggleCard = (id: number) => {
    const nextSelected = new Set(selectedCards);
    if (nextSelected.has(id)) {
      nextSelected.delete(id);
    } else {
      nextSelected.add(id);
    }
    setSelectedCards(nextSelected);
    setFeedbackStatus('none');
  };

  // Reset selection and shuffle
  const handleReset = useCallback(() => {
    setSelectedCards(new Set());
    setCards(shuffleCards(initialCardsData));
    setFeedbackStatus('none');
    setFeedbackMessage('');
  }, []);

  // Save / Validate selection
  const handleSave = () => {
    if (selectedCards.size === 0) {
      setFeedbackStatus('error');
      setFeedbackMessage('Revisa tu selección e inténtalo nuevamente.');
      return;
    }

    let selectedInvalidCount = 0;
    let selectedValidCount = 0;
    const totalValidCount = initialCardsData.filter((c) => c.valid).length;

    selectedCards.forEach((id) => {
      const card = initialCardsData.find((c) => c.id === id);
      if (card) {
        if (!card.valid) {
          selectedInvalidCount++;
        } else {
          selectedValidCount++;
        }
      }
    });

    const isCompletelyCorrect =
      selectedInvalidCount === 0 && selectedValidCount === totalValidCount;

    if (isCompletelyCorrect) {
      setFeedbackStatus('success');
      setFeedbackMessage('Has seleccionado de forma correcta.');
    } else {
      setFeedbackStatus('error');
      setFeedbackMessage('Revisa tu selección e inténtalo nuevamente.');
    }
  };

  return (
    <div className="min-h-screen flex flex-col justify-between bg-[#F8FAFC] text-[#423475] antialiased selection:bg-[#4AA7BA] selection:text-white">
      <div>
        {/* Minimalist Header with strictly the two requested buttons */}
        <Header onReset={handleReset} onSave={handleSave} />

        {/* Main Content Area */}
        <main className="max-w-5xl mx-auto px-4 py-6 flex-grow w-full space-y-5">
          {/* Selection Grid */}
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
            {cards.map((card) => (
              <CardItem
                key={card.id}
                card={card}
                isSelected={selectedCards.has(card.id)}
                onToggle={toggleCard}
              />
            ))}
          </div>

          {/* Feedback Banner */}
          <FeedbackBanner status={feedbackStatus} message={feedbackMessage} />
        </main>
      </div>

      {/* Minimal Footer */}
      <footer className="bg-white border-t border-slate-200 py-3 text-center text-[11px] text-slate-400">
        <p>MatCon • Recursos Educativos Interactivos</p>
      </footer>
    </div>
  );
}