import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { createClient } from '@/utils/supabase/client';

type TeamSetupProps = {
  teamName: string;
  setTeamName: Dispatch<SetStateAction<string>>;
  handleStartQuiz: (continueFromQuestion?: number) => void;
  quizId: number | null;
};

export default function TeamSetup({
  teamName,
  setTeamName,
  handleStartQuiz,
  quizId
}: TeamSetupProps) {
  const supabase = createClient();

  useEffect(() => {
    // Check if there's existing team data in localStorage
    const savedTeamData = localStorage.getItem('quizTeamData');
    
    if (savedTeamData) {
      const { name, quizId: savedQuizId } = JSON.parse(savedTeamData);
      
      // If we have saved data for this quiz, use the team name
      if (savedQuizId && quizId && savedQuizId === quizId) {
        setTeamName(name);
      } else {
        // If quiz IDs don't match, clear saved data
        localStorage.removeItem('quizTeamData');
        localStorage.removeItem('quizAnswers');
      }
    }
  }, [setTeamName, quizId]);

  const handleStartQuizWithSync = async () => {
    if (teamName.trim()) {
      // Join the presence channel when starting the quiz
      const channel = supabase.channel('online_teams');
      
      await channel.subscribe(async (status) => {
        if (status === 'SUBSCRIBED') {
          await channel.track({
            team: teamName.trim(),
            online_at: new Date().toISOString(),
            status: 'active'
          });
        }
      });

      // Just start the quiz - we'll sync with the current slide automatically
      handleStartQuiz();
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className="max-w-2xl mx-auto p-4 rounded-md"
    >
      <motion.div
        initial={{ scale: 0.9 }}
        animate={{ scale: 1 }}
        transition={{ delay: 0.2 }}
        className="space-y-8"
      >
        <motion.div
          initial={{ y: -20, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ delay: 0.3 }}
        >
          <h1 className="text-3xl font-bold text-center text-amber-900 mb-2">
            Добре дошли на<br />
            Вкъщи Куиз!
          </h1>
          <p className="text-center text-amber-800/80 text-sm">
            Подгответе се за невероятно приключение
          </p>
        </motion.div>

        <motion.div
          initial={{ y: 20, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ delay: 0.4 }}
          className="bg-white/60 backdrop-blur-sm rounded-xl p-6 shadow-sm border border-amber-100/50"
        >
          <h2 className="text-2xl font-semibold text-amber-900 mb-4">
            Правила на играта:
          </h2>
          <ul className="space-y-3">
            <motion.li
              initial={{ x: -20, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ delay: 0.5 }}
              className="flex items-center text-lg text-amber-800"
            >
              <span className="mr-3 text-amber-600">👥</span>
              Максимум 6 човека в отбор
            </motion.li>
            <motion.li
              initial={{ x: -20, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ delay: 0.6 }}
              className="flex items-center text-lg text-amber-800"
            >
              <span className="mr-3 text-amber-600">💰</span>
              7лв на играч
            </motion.li>
            <motion.li
              initial={{ x: -20, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ delay: 0.7 }}
              className="flex items-center text-lg text-amber-800"
            >
              <span className="mr-3 text-amber-600">🎯</span>
              Моля, не мамете
            </motion.li>
            <motion.li
              initial={{ x: -20, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ delay: 0.8 }}
              className="flex items-center text-lg text-amber-800"
            >
              <span className="mr-3 text-amber-600">🎉</span>
              Забавлявайте се!
            </motion.li>
          </ul>
        </motion.div>

        <motion.div
          initial={{ y: 20, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ delay: 0.9 }}
          className="space-y-6"
        >
          <div className="relative">
            <input
              type="text"
              value={teamName}
              onChange={(e) => setTeamName(e.target.value)}
              placeholder="Име на отбора"
              className="w-full px-6 py-4 text-xl bg-white/60 backdrop-blur-sm border-2 border-amber-200/50 rounded-xl focus:border-amber-400 focus:outline-none transition-all duration-300 placeholder:text-amber-800/40 text-amber-900"
            />
            <div className="absolute inset-0 bg-gradient-to-br from-amber-100/20 to-orange-100/20 rounded-xl -z-10" />
          </div>

          <motion.button
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={handleStartQuizWithSync}
            className="w-full py-4 text-xl font-semibold text-white bg-gradient-to-r from-amber-500 to-orange-500 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:from-amber-400 hover:to-orange-400"
          >
            Започни играта
          </motion.button>
        </motion.div>
      </motion.div>
    </motion.div>
  );
}