import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { ArrowLeft } from 'lucide-react';
import { STORY } from '@/lib/pirateStory';

const MAP_BG = "https://media.base44.com/images/public/69e777f2f456e7739a573a6c/48ef84684_generated_image.png";
const SEA_BG = "https://media.base44.com/images/public/69e777f2f456e7739a573a6c/91fe5c57f_generated_image.png";

export default function AdventureMap() {
  const [progress, setProgress] = useState({});

  useEffect(() => {
    const saved = localStorage.getItem('pirate_progress');
    if (saved) setProgress(JSON.parse(saved));
  }, []);

  const playSound = (src) => {
    const audio = new Audio(src);
    audio.volume = 0.4;
    audio.play();
  };

  const completedCount = STORY.islands.filter(i => progress[i.id]?.completed).length;
  const progressPercent = (completedCount / STORY.islands.length) * 100;

  return (
    <div
      className="min-h-screen font-nunito relative overflow-hidden"
      style={{
        backgroundImage: `url(${SEA_BG})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center'
      }}
    >
      {/* 🌊 Animated sea overlay */}
      <motion.div
        className="absolute inset-0 pointer-events-none"
        animate={{ backgroundPosition: ['0% 0%', '100% 100%'] }}
        transition={{ duration: 60, repeat: Infinity, ease: 'linear' }}
        style={{
          backgroundImage: `url(${SEA_BG})`,
          opacity: 0.1
        }}
      />

      <div className="min-h-screen bg-[rgba(10,30,60,0.65)] backdrop-blur-sm">
        
        {/* Header */}
        <div className="sticky top-0 z-40 py-3 px-4 flex items-center gap-3"
          style={{ background: 'rgba(10,20,40,0.85)', backdropFilter: 'blur(6px)', borderBottom: '2px solid rgba(146,64,14,0.6)' }}>
          
          <Link to="/">
            <button className="flex items-center gap-2 text-amber-300 hover:text-amber-100 font-bold">
              <ArrowLeft className="h-4 w-4" />
              Начало
            </button>
          </Link>

          <h1 className="font-fredoka text-2xl text-amber-200 mx-auto">
            🗺️ Карта на приключението
          </h1>
        </div>

        <div className="p-4 md:p-8 max-w-3xl mx-auto">

          {/* 🧭 Story intro */}
          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="text-center text-amber-200 mb-6 italic"
          >
            Капитане... всяко островче крие тайна. Само най-смелите ще открият съкровището.
          </motion.p>

          {/* 📊 Progress bar */}
          <div className="mb-6">
            <div className="h-3 bg-stone-800 rounded-full overflow-hidden">
              <motion.div
                className="h-full bg-amber-400"
                animate={{ width: `${progressPercent}%` }}
              />
            </div>
            <p className="text-amber-200 text-sm mt-1">
              Прогрес: {completedCount}/{STORY.islands.length}
            </p>
          </div>

          {/* 🗺️ Map */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="relative rounded-2xl overflow-hidden border-4 border-amber-700/60 shadow-2xl mb-6"
            style={{ minHeight: 320 }}
          >
            <img src={MAP_BG} alt="Карта" className="w-full object-cover" />

            {STORY.islands.map((island, i) => {
              const isCompleted = progress[island.id]?.completed;
              const isUnlocked = i === 0 || progress[STORY.islands[i - 1]?.id]?.completed;

              return (
                <motion.div
                  key={island.id}
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  transition={{ delay: i * 0.15, type: 'spring' }}
                  className="absolute"
                  style={{
                    left: `${island.position.x}%`,
                    top: `${island.position.y}%`
                  }}
                >
                  <Link to={isUnlocked ? `/island/${island.id}` : '#'}>
                    <motion.div
                      onMouseEnter={() => isUnlocked && playSound('/sounds/hover.mp3')}
                      onClick={() => isUnlocked && playSound('/sounds/click.mp3')}
                      whileHover={isUnlocked ? { scale: 1.3 } : {}}
                      animate={
                        isUnlocked && !isCompleted
                          ? { scale: [1, 1.2, 1], rotate: [0, 2, -2, 0] }
                          : isCompleted
                          ? { rotate: [0, 360] }
                          : { opacity: [0.5, 0.7, 0.5] }
                      }
                      transition={{ duration: 2, repeat: Infinity }}
                      className="relative cursor-pointer"
                      style={{
                        filter: isUnlocked ? 'none' : 'blur(1px) grayscale(80%)'
                      }}
                    >
                      {/* ✨ completion glow */}
                      {isCompleted && (
                        <motion.div
                          className="absolute inset-0 rounded-full"
                          animate={{ scale: [1, 1.8], opacity: [0.6, 0] }}
                          transition={{ duration: 1.5, repeat: Infinity }}
                          style={{ background: 'gold' }}
                        />
                      )}

                      <div
                        className="w-12 h-12 rounded-full border-4 flex items-center justify-center text-xl shadow-lg"
                        style={{
                          backgroundColor: isCompleted
                            ? '#f59e0b'
                            : isUnlocked
                            ? island.color
                            : '#374151',
                          borderColor: isCompleted
                            ? '#fcd34d'
                            : isUnlocked
                            ? island.color + 'aa'
                            : '#4b5563'
                        }}
                      >
                        {isCompleted ? '⭐' : isUnlocked ? island.emoji : '🔒'}
                      </div>

                      <div
                        className="absolute -bottom-7 left-1/2 -translate-x-1/2 whitespace-nowrap text-xs font-bold px-2 py-0.5 rounded-full"
                        style={{
                          background: 'rgba(0,0,0,0.7)',
                          color: isCompleted ? '#fcd34d' : '#e5e7eb'
                        }}
                      >
                        {island.name.split(' ').slice(-1)[0]}
                      </div>
                    </motion.div>
                  </Link>
                </motion.div>
              );
            })}
          </motion.div>

          {/* 📜 Island list */}
          <div className="space-y-3">
            {STORY.islands.map((island, i) => {
              const isCompleted = progress[island.id]?.completed;
              const isUnlocked = i === 0 || progress[STORY.islands[i - 1]?.id]?.completed;

              return (
                <motion.div
                  key={island.id}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: i * 0.1 }}
                >
                  <Link to={isUnlocked ? `/island/${island.id}` : '#'}>
                    <motion.div
                      whileHover={isUnlocked ? { x: 6 } : {}}
                      className="flex items-center gap-4 p-4 rounded-xl border-2 transition-all"
                      style={{
                        background: isCompleted
                          ? 'rgba(245,158,11,0.15)'
                          : isUnlocked
                          ? 'rgba(30,20,5,0.7)'
                          : 'rgba(20,20,20,0.5)',
                        borderColor: isCompleted
                          ? 'rgba(251,191,36,0.5)'
                          : isUnlocked
                          ? island.color + '40'
                          : 'rgba(60,60,60,0.4)',
                        opacity: isUnlocked ? 1 : 0.5
                      }}
                    >
                      <div
                        className="w-14 h-14 rounded-xl flex items-center justify-center text-3xl flex-shrink-0"
                        style={{
                          background: island.color + '25',
                          border: `2px solid ${island.color}50`
                        }}
                      >
                        {island.emoji}
                      </div>

                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <h3 className="font-fredoka text-lg text-amber-100">
                            {island.name}
                          </h3>
                          {isCompleted && <span className="text-yellow-400">⭐</span>}
                          {!isUnlocked && <span className="text-stone-500 text-sm">🔒</span>}
                        </div>

                        <p className="text-sm text-amber-400">
                          {isCompleted
                            ? '✅ Завършен!'
                            : isUnlocked
                            ? '👉 Влез в приключението'
                            : 'Завърши предишния остров'}
                        </p>
                      </div>

                      {isUnlocked && !isCompleted && (
                        <div
                          className="px-4 py-2 rounded-xl font-bold text-sm text-amber-900"
                          style={{
                            background: 'linear-gradient(135deg, #f59e0b, #d97706)'
                          }}
                        >
                          Играй
                        </div>
                      )}
                    </motion.div>
                  </Link>
                </motion.div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}