import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const tarotCards = [
  "A Morte", "O Louco", "A Sacerdotisa", "O Diabo", "O Sol",
  "A Lua", "A Torre", "O Julgamento", "O Enforcado", "O Mundo"
];

const meanings = {
  "A Morte": "Fim de um ciclo e começo de outro.",
  "O Louco": "Novos começos, aventura e espontaneidade.",
  "A Sacerdotisa": "Intuição e conhecimento oculto.",
  "O Diabo": "Desejos e tentações.",
  "O Sol": "Felicidade e sucesso.",
  "A Lua": "Mistérios e ilusões.",
  "A Torre": "Mudanças inesperadas.",
  "O Julgamento": "Renovação e despertar espiritual.",
  "O Enforcado": "Nova perspectiva, sacrifício.",
  "O Mundo": "Realização e plenitude."
};

export default function TarotGame() {
  const [flipped, setFlipped] = useState(Array(10).fill(false));
  const [selectedCards, setSelectedCards] = useState([]);
  const [showOffer, setShowOffer] = useState(false);

  const handleFlip = (index) => {
    if (selectedCards.length < 4 && !flipped[index]) {
      const newFlipped = [...flipped];
      newFlipped[index] = true;
      setFlipped(newFlipped);
      setSelectedCards([...selectedCards, tarotCards[index]]);

      if (selectedCards.length + 1 === 4) {
        setTimeout(() => setShowOffer(true), 1000);
      }
    }
  };

  return (
    <div className="flex flex-col items-center p-4 bg-gray-900 text-white min-h-screen">
      <h1 className="text-3xl font-bold mb-4">Jogo de Tarot</h1>
      <div className="grid grid-cols-5 gap-4 mb-6">
        {tarotCards.map((card, index) => (
          <Card
            key={index}
            className="w-24 h-32 flex items-center justify-center cursor-pointer border border-gray-500"
            onClick={() => handleFlip(index)}
          >
            <CardContent className="text-center">
              {flipped[index] ? card : "❔"}
            </CardContent>
          </Card>
        ))}
      </div>

      {selectedCards.length > 0 && (
        <div className="mb-6">
          <h2 className="text-xl mb-2">Suas cartas:</h2>
          <ul>
            {selectedCards.map((card, idx) => (
              <li key={idx} className="text-lg">{card} - {meanings[card]}</li>
            ))}
          </ul>
        </div>
      )}

      {showOffer && (
        <div className="p-4 bg-gray-800 rounded-lg text-center">
          <h2 className="text-xl font-bold">Quer um relatório completo?</h2>
          <p className="mb-2">Pix R$19,90 para:</p>
          <div className="bg-gray-700 p-2 rounded">chave-pix@email.com</div>
          <Button className="mt-3" onClick={() => navigator.clipboard.writeText("chave-pix@email.com")}>Copiar Chave PIX</Button>
        </div>
      )}
    </div>
  );
}