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

// Nuevas imágenes individuales
const initialPlayers = [
  { id: 1, name: "Germán", score: 0, img: "/mnt/data/1FF9CEC8-4807-4F74-8BF0-DBC817435916.jpeg" },
  { id: 2, name: "Melani", score: 0, img: "/mnt/data/C6B7E7E9-41B7-428E-8889-F0BBCEC3254B.jpeg" },
  { id: 3, name: "Ximena", score: 0, img: "/mnt/data/5DAF750C-345D-404F-BC3F-72040C4A4E12.jpeg" },
  { id: 4, name: "Kori", score: 0, img: "/mnt/data/6C66A6C6-FDBE-4BEC-A156-7299B63E006A.jpeg" },
];

const WEEK_MS = 604800000;

export default function Game() {
  const [players, setPlayers] = useState(initialPlayers);
  const [leader, setLeader] = useState(null);
  const [weeklyWinner, setWeeklyWinner] = useState(null);
  const [startDate, setStartDate] = useState(Date.now());

  const playSound = () => {
    const audio = new Audio("https://www.soundjay.com/buttons/sounds/button-16.mp3");
    audio.play();
  };

  useEffect(() => {
    const saved = localStorage.getItem("gameData");
    if (saved) {
      const data = JSON.parse(saved);
      setPlayers(data.players);
      setStartDate(data.startDate);
      setWeeklyWinner(data.weeklyWinner);
    }
  }, []);

  useEffect(() => {
    localStorage.setItem("gameData", JSON.stringify({ players, startDate, weeklyWinner }));
  }, [players, startDate, weeklyWinner]);

  const addPoint = (id) => {
    playSound();
    setPlayers(players.map(p =>
      p.id === id ? { ...p, score: p.score + 1 } : p
    ));
  };

  useEffect(() => {
    const top = [...players].sort((a, b) => b.score - a.score)[0];
    setLeader(top);
  }, [players]);

  useEffect(() => {
    const interval = setInterval(() => {
      const now = Date.now();
      if (now - startDate >= WEEK_MS) {
        const winner = [...players].sort((a, b) => b.score - a.score)[0];
        setWeeklyWinner(winner);

        const resetPlayers = players.map(p => ({ ...p, score: 0 }));
        setPlayers(resetPlayers);
        setStartDate(now);
      }
    }, 5000);

    return () => clearInterval(interval);
  }, [players, startDate]);

  return (
    <div className="min-h-screen p-6 bg-gradient-to-r from-pink-300 via-yellow-200 to-blue-300">
      <h1 className="text-4xl font-extrabold text-center mb-4 drop-shadow-lg">
        🤪 ¿Quien es mas mongol? 🎉
      </h1>

      {leader && (
        <div className="text-center text-2xl font-bold mb-4 animate-bounce">
          🏆 Va ganando: {leader.name} con {leader.score} puntos
        </div>
      )}

      {weeklyWinner && (
        <div className="text-center text-3xl font-extrabold mb-6 text-green-700">
          🎉 GANADOR DE LA SEMANA: {weeklyWinner.name} con {weeklyWinner.score} puntos 🎉
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {players.map(player => (
          <motion.div key={player.id} whileTap={{ scale: 0.9 }} whileHover={{ scale: 1.05 }}>
            <Card className="rounded-2xl shadow-2xl text-center p-4 bg-white/80 backdrop-blur">
              <CardContent>
                <img
                  src={player.img}
                  alt={player.name}
                  className="mx-auto mb-4 w-28 h-28 rounded-full border-4 border-white shadow-lg object-cover"
                />

                <h2 className="text-2xl font-bold">{player.name}</h2>
                <p className="text-lg mt-2">🔥 Puntos: {player.score}</p>

                <Button
                  className="mt-4 text-lg px-4 py-2 rounded-xl"
                  onClick={() => addPoint(player.id)}
                >
                  😂 +1 Tontería
                </Button>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </div>
    </div>
  );
}