import React, { useState, useEffect } from 'react';
import { STORY_REELS } from '../data/socialData';
import { X, ChevronLeft, ChevronRight, Heart, Sparkles, Calendar, Volume2 } from 'lucide-react';

interface StoryModalProps {
  storyId: string | null;
  onClose: () => void;
  onBookExperience: () => void;
}

export const StoryModal: React.FC<StoryModalProps> = ({
  storyId,
  onClose,
  onBookExperience
}) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [liked, setLiked] = useState(false);

  useEffect(() => {
    if (storyId) {
      const idx = STORY_REELS.findIndex(s => s.id === storyId);
      if (idx !== -1) setCurrentIndex(idx);
    }
  }, [storyId]);

  if (!storyId) return null;

  const currentStory = STORY_REELS[currentIndex] || STORY_REELS[0];

  const handleNext = () => {
    if (currentIndex < STORY_REELS.length - 1) {
      setCurrentIndex(currentIndex + 1);
      setLiked(false);
    } else {
      onClose();
    }
  };

  const handlePrev = () => {
    if (currentIndex > 0) {
      setCurrentIndex(currentIndex - 1);
      setLiked(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4 bg-slate-950/95 backdrop-blur-xl">
      <div className="relative max-w-sm sm:max-w-md w-full h-[85vh] max-h-[700px] rounded-3xl overflow-hidden bg-slate-900 shadow-2xl border border-white/20 flex flex-col justify-between">
        
        {/* Background Image */}
        <img
          src={currentStory.previewImage}
          alt={currentStory.user}
          className="absolute inset-0 w-full h-full object-cover filter brightness-95"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-slate-950/70" />

        {/* Top Story Header & Progress Bars */}
        <div className="relative z-10 p-4 space-y-3">
          {/* Progress segments */}
          <div className="flex gap-1.5">
            {STORY_REELS.map((_, i) => (
              <div
                key={i}
                className={`h-1 flex-1 rounded-full overflow-hidden ${
                  i < currentIndex ? 'bg-white' : i === currentIndex ? 'bg-amber-400 animate-pulse' : 'bg-white/30'
                }`}
              />
            ))}
          </div>

          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2.5">
              <img
                src={currentStory.avatar}
                alt={currentStory.user}
                className="w-8 h-8 rounded-full border border-amber-400 object-cover"
              />
              <div>
                <div className="text-xs font-bold text-white">
                  {currentStory.user}
                </div>
                <span className="text-[10px] text-amber-300 font-mono">Live on @entourage.hk</span>
              </div>
            </div>

            <button
              onClick={onClose}
              className="w-8 h-8 rounded-full bg-slate-950/60 text-white flex items-center justify-center hover:bg-slate-950"
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        </div>

        {/* Tap areas for prev / next */}
        <div className="absolute inset-0 z-0 flex">
          <div className="w-1/2 h-full cursor-pointer" onClick={handlePrev} />
          <div className="w-1/2 h-full cursor-pointer" onClick={handleNext} />
        </div>

        {/* Bottom Story Actions & Caption */}
        <div className="relative z-10 p-5 space-y-4">
          <div className="p-3 rounded-2xl bg-slate-950/80 backdrop-blur-md border border-white/10">
            <p className="text-xs text-slate-100 font-medium leading-relaxed">
              "{currentStory.caption}"
            </p>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={() => setLiked(!liked)}
              className={`p-3 rounded-xl border backdrop-blur-md ${
                liked ? 'bg-rose-500/20 text-rose-400 border-rose-500/40' : 'bg-slate-950/70 text-white border-white/20'
              }`}
            >
              <Heart className={`w-4 h-4 ${liked ? 'fill-rose-500 text-rose-500' : ''}`} />
            </button>

            <button
              onClick={() => {
                onClose();
                onBookExperience();
              }}
              className="flex-1 py-3 px-4 rounded-xl bg-gradient-to-r from-amber-400 to-amber-500 text-slate-950 font-bold text-xs shadow-lg shadow-amber-500/30 hover:scale-[1.01] active:scale-[0.99] flex items-center justify-center gap-2"
            >
              <Calendar className="w-4 h-4 text-slate-950" />
              <span>Book This Experience</span>
            </button>
          </div>
        </div>

      </div>
    </div>
  );
};