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

interface Winner {
  name: string;
  image: string;
  quote: string;
  amount: string;
  date: string;
}

const winners: Winner[] = [
  {
    name: "Natacha D",
    image: "/lovable-uploads/2f4bedd0-5b93-4742-ab75-ffd7b869e847.png",
    quote: "Thank you for your generous donation. I appreciate your support more than words can express.",
    amount: "$1,000",
    date: "Recent Winner"
  },
  {
    name: "Natacha C",
    image: "/lovable-uploads/78a98793-c70e-4db9-bb83-243391c59c2d.png",
    quote: "Thank you for your generous donation. I appreciate your support more than words can express.",
    amount: "$1,000",
    date: "December Winner"
  },
  {
    name: "Christina O",
    image: "/lovable-uploads/2e4f55ff-19b3-486f-bdc9-c5f178ad07cb.png",
    quote: "THANK YOU! THANK YOU! THANK YOU! Nothing good EVER happens to me, so I never imagined anything truly MAGNIFICENT occurring! You have no idea what this means to us.",
    amount: "$750",
    date: "November Winner"
  },
  {
    name: "Phil Luis B",
    image: "/lovable-uploads/0527a2f7-ddc6-43d0-a0cb-f53f463386e7.png",
    quote: "Thank you so much for selecting me for this award! I am both humbled and honored and am grateful as this comes at the perfect time for my business.",
    amount: "$750",
    date: "April Winner"
  }
];

export const WinnerCarousel = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % winners.length);
    }, 5000);

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

  const currentWinner = winners[currentIndex];

  return (
    <div className="relative min-h-[400px] lg:min-h-full overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0 transition-all duration-1000 ease-in-out">
        <img
          src={currentWinner.image}
          alt={`${currentWinner.name} holding their Givesback award check`}
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent" />
      </div>

      {/* Carousel Indicators */}
      <div className="absolute top-4 right-4 flex gap-2">
        {winners.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentIndex(index)}
            className={`w-3 h-3 rounded-full transition-all duration-300 ${
              index === currentIndex 
                ? "bg-white shadow-lg scale-110" 
                : "bg-white/50 hover:bg-white/70"
            }`}
            aria-label={`View ${winners[index].name}'s story`}
          />
        ))}
      </div>

      {/* Winner Info Badge */}
      <div className="absolute top-4 left-4">
        <div className="bg-white/95 backdrop-blur-sm rounded-lg px-3 py-2 shadow-lg">
          <div className="text-sm font-bold text-gray-900">{currentWinner.name}</div>
          <div className="text-xs text-green-600 font-semibold">{currentWinner.amount} Winner</div>
        </div>
      </div>

      {/* Floating Testimonial */}
      <div className="absolute bottom-6 left-6 right-6">
        <Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg animate-fade-in">
          <CardContent className="p-4">
            <p className="text-sm italic text-gray-700 mb-2 line-clamp-3">
              "{currentWinner.quote}"
            </p>
            <div className="flex items-center justify-between">
              <div className="text-xs font-medium text-gray-900">
                - {currentWinner.name}, {currentWinner.date}
              </div>
              <div className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
                {currentWinner.amount}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Progress Bar */}
      <div className="absolute bottom-0 left-0 right-0 h-1 bg-black/20">
        <div 
          className="h-full bg-white transition-all duration-300 ease-linear"
          style={{ 
            width: `${((currentIndex + 1) / winners.length) * 100}%`,
            animation: 'progress 5s linear infinite'
          }}
        />
      </div>
    </div>
  );
};