import { useState, useEffect } from "react";
import { Clock, DollarSign, Users, Calendar } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { useCountdown } from "@/hooks/useCountdown";

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

const winners: Winner[] = [
  {
    id: 182,
    name: "Sara B",
    amount: "$250",
    date: "Aug 08, 2025",
    quote: "Thank you so much! I will us this money to fund my life long passion for airplanes and getting my pilots license. I cannot appreciate this enough.",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_182.jpeg"
  },
  {
    id: 176,
    name: "Karen M",
    amount: "$250",
    date: "Jun 30, 2025",
    quote: "I will be using the money for a community event for the 4800 block of Warnock street. The City of Philadelphia will be honoring our block for our participation in the clean street program with Philadelphia more better beautiful. The second week of September 2025.",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_176.jpg"
  },
  {
    id: 171,
    name: "Natacha D",
    amount: "$250",
    date: "May 22, 2025",
    quote: "Thank you for your generous donation. I appreciate your support more than words can express.",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_171.jpg"
  },
  {
    id: 168,
    name: "Latoya W",
    amount: "$250",
    date: "May 07, 2025",
    quote: "Thank you I appreciate it.",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_168.jpeg"
  },
  {
    id: 160,
    name: "Tammy M",
    amount: "$250",
    date: "Apr 10, 2025",
    quote: "Dear Givesback Donors, Thank you so much... I have never received anything like this before and it's going help so much. ... I have a piece of equipment that needs replaced and this will help tremendously... Thank you so much again. Tamera Mittig Kustom Shirtz w Attitude 503-507-5665",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_160.jpg"
  },
  {
    id: 161,
    name: "Felix E",
    amount: "$250",
    date: "Mar 19, 2025",
    quote: "Thank you so much. I will use this for transportation.",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_161.jpg"
  },
  {
    id: 153,
    name: "Samerra B",
    amount: "$250",
    date: "Jan 15, 2025",
    quote: "Thank you",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_153.jpg"
  },
  {
    id: 147,
    name: "Natasha C",
    amount: "$250",
    date: "Dec 06, 2024",
    quote: "Thank you just in time for Christmas!",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_147.jpeg"
  },
  {
    id: 146,
    name: "Damion W",
    amount: "$250",
    date: "Dec 03, 2024",
    quote: "Thank you so much for your generosity and support. I'm truly grateful to the donors for this gift, and I plan to use it to buy my daughter something special for Christmas. Your kindness will help make this holiday season even more memorable for her. Thank you again!",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_146.jpeg"
  },
  {
    id: 143,
    name: "Christina O",
    amount: "$750",
    date: "Nov 06, 2024",
    quote: "THANK YOU! THANK YOU! THANK YOU! For some reason I cannot fathom, I didnt open this until today, December 13th, 2024. Nothing good EVER happens to me, so I never imagined anything truly MAGNIFICENT occurring! You have no idea what this means to us. It is just myself, my 81 year old mother who has dementia and Congenital Heart Failure, and my daughter. My mother has no health insurance and I fell, broke my back, and had to learn to walk again. I cracked my teeth in the fall and lost almost all of them over the next two years. Soooooo, I will use this money on Mom's bills and try to save some for new teeth. I would give anything to be able to TRULY smile again! Christina M Ooten",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_143.jpg"
  },
  {
    id: 141,
    name: "Charles L",
    amount: "$250",
    date: "Oct 22, 2024",
    quote: "Thank you so much. I'll be spending the money on a nice night out for my birthday.",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_141.jpg"
  },
  {
    id: 139,
    name: "Terri T",
    amount: "$250",
    date: "Oct 14, 2024",
    quote: "Thank You Very Much. I haven't received anything since The Domino Sugar contest many years ago. This really came at a good time right now. I'm going to get my Electrical Box put in that I've been waiting to get put in. I have projects that need to be done and now I can have one checked off the list. If anything is left over I might save it or donate it to a charity or someone who may need some help too.",
    image: "https://surfcrm.com/bin/ajax/load_file_from_amazon_open.php?file=givesback_winners%2Fwinner_139.jpeg"
  }
];

export const Givesback = () => {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [completionPercentage, setCompletionPercentage] = useState(100);
  const timeLeft = useCountdown("2025-08-25T23:59:59");

  const carouselWinners = winners.slice(0, 3);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % carouselWinners.length);
    }, 4000);
    return () => clearInterval(interval);
  }, [carouselWinners.length]);

  const currentWinner = carouselWinners[currentSlide];

  return (
    <div className="min-h-screen bg-muted/30">
      <main className="flex-1 transition-all duration-300">
        <div className="max-w-6xl mx-auto p-6 space-y-6">
          {/* Countdown Timer */}
          <div className="countdown-timer">
            <div className="bg-gradient-to-r from-red-500 to-red-600 text-white py-3 px-4 text-center animate-fade-in">
              <div className="max-w-6xl mx-auto flex items-center justify-center gap-4 flex-wrap">
                <div className="flex items-center gap-2">
                  <Clock className="h-5 w-5 animate-pulse" />
                  <span className="font-semibold">Next Weekly Award in:</span>
                </div>
                
                <div className="flex items-center gap-1 text-sm sm:text-base">
                  <div className="bg-white/20 rounded px-2 py-1 min-w-[3rem] text-center">
                    <div className="font-bold text-lg leading-tight">{timeLeft.days}</div>
                    <div className="text-xs uppercase tracking-wide opacity-90">Days</div>
                  </div>
                  <span className="text-xl font-bold mx-1">:</span>
                  <div className="bg-white/20 rounded px-2 py-1 min-w-[3rem] text-center">
                    <div className="font-bold text-lg leading-tight">{timeLeft.hours}</div>
                    <div className="text-xs uppercase tracking-wide opacity-90">Hours</div>
                  </div>
                  <span className="text-xl font-bold mx-1">:</span>
                  <div className="bg-white/20 rounded px-2 py-1 min-w-[3rem] text-center">
                    <div className="font-bold text-lg leading-tight">{timeLeft.minutes}</div>
                    <div className="text-xs uppercase tracking-wide opacity-90">Min</div>
                  </div>
                  <span className="text-xl font-bold mx-1">:</span>
                  <div className="bg-white/20 rounded px-2 py-1 min-w-[3rem] text-center">
                    <div className="font-bold text-lg leading-tight animate-pulse">{timeLeft.seconds}</div>
                    <div className="text-xs uppercase tracking-wide opacity-90">Sec</div>
                  </div>
                </div>
                
                <span className="text-sm font-medium bg-white/20 rounded-full px-3 py-1">
                  🎯 Don't miss out!
                </span>
              </div>
            </div>
          </div>

          {/* Hero Section */}
          <div className="hero-section">
            <Card className="shadow-xl border-0 bg-gradient-to-br from-primary/5 via-background to-secondary/5 overflow-hidden">
              <div className="p-0">
                <div className="grid lg:grid-cols-2 gap-0">
                  {/* Left side - Content */}
                  <div className="p-8 lg:p-12 flex flex-col justify-center">
                    <div className="space-y-6">
                      <div className="space-y-3">
                        <Badge className="bg-green-100 text-green-800 border-green-200 text-sm px-3 py-1">
                          🎉 Givesback Cash Awards Program
                        </Badge>
                        <h1 className="text-4xl lg:text-5xl font-bold text-foreground leading-tight">
                          Awards Up to <span className="text-green-600">$1,000</span> Weekly!
                        </h1>
                        <p className="text-xl text-muted-foreground leading-relaxed">
                          Join thousands of members who've received cash awards. Simple steps, real rewards.
                        </p>
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <div className="text-center">
                          <div className="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
                            <DollarSign className="h-6 w-6 text-green-600" />
                          </div>
                          <div className="text-2xl font-bold text-foreground">$57,150</div>
                          <div className="text-sm text-muted-foreground">Total Awarded</div>
                        </div>
                        
                        <div className="text-center">
                          <div className="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
                            <Users className="h-6 w-6 text-blue-600" />
                          </div>
                          <div className="text-2xl font-bold text-foreground">149</div>
                          <div className="text-sm text-muted-foreground">Happy Winners</div>
                        </div>
                        
                        <div className="text-center">
                          <div className="bg-orange-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
                            <Calendar className="h-6 w-6 text-orange-600" />
                          </div>
                          <div className="text-2xl font-bold text-foreground">Aug 25</div>
                          <div className="text-sm text-muted-foreground">Next Award</div>
                        </div>
                      </div>

                      <div className="bg-gradient-to-br from-blue-50 to-green-50 border border-blue-200 rounded-lg p-6">
                        <div className="space-y-4">
                          <p className="text-muted-foreground leading-relaxed">
                            In our ongoing commitment to help you achieve your funding goals and express our gratitude to our clients, 
                            we're excited to introduce the <strong className="text-foreground">USA Givesback Cash Award Program</strong>. 
                            Each week, select members are chosen at random to receive cash awards.
                          </p>
                          
                          <div className="bg-white/70 rounded-lg p-4">
                            <h3 className="font-semibold text-foreground mb-3">How to Enter & Become Eligible:</h3>
                            <ol className="space-y-2 text-sm">
                              <li className="flex items-start gap-3">
                                <span className="bg-primary text-primary-foreground rounded-full w-6 h-6 flex items-center justify-center text-xs font-semibold flex-shrink-0 mt-0.5 min-w-[24px]">1</span>
                                <span>Search our grant database and select your <strong>3 favorite grants</strong></span>
                              </li>
                              <li className="flex items-start gap-3">
                                <span className="bg-primary text-primary-foreground rounded-full w-6 h-6 flex items-center justify-center text-xs font-semibold flex-shrink-0 mt-0.5 min-w-[24px]">2</span>
                                <span>Click the heart icon to mark them as favorites. With 3 favorites and an active account, you're eligible!</span>
                              </li>
                              <li className="flex items-start gap-3">
                                <span className="bg-primary text-primary-foreground rounded-full w-6 h-6 flex items-center justify-center text-xs font-semibold flex-shrink-0 mt-0.5 min-w-[24px]">3</span>
                                <span>Verify your contact information so we can reach you if selected</span>
                              </li>
                            </ol>
                          </div>

                          <div className="text-center">
                            <p className="text-sm text-muted-foreground italic">
                              Winners are notified by email and text, and featured on our website. 
                              <br />
                              <strong className="text-foreground">Thank you for being a valued USA Givesback client!</strong>
                            </p>
                          </div>
                        </div>
                      </div>

                      <p className="text-xs text-muted-foreground">
                        * No purchase necessary. Must be 18+ and have active account. Terms apply.
                      </p>
                    </div>
                  </div>

                  {/* Right side - Winner Carousel */}
                  <div className="winner-carousel h-full">
                    <div className="relative h-full min-h-[400px] overflow-hidden">
                      {/* Background Images */}
                      {carouselWinners.map((winner, index) => (
                        <div 
                          key={winner.id}
                          className={`carousel-slide absolute inset-0 transition-opacity duration-500 ${
                            index === currentSlide ? 'opacity-100' : 'opacity-0'
                          }`}
                        >
                          <img 
                            src={winner.image} 
                            alt={`Winner ${winner.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>
                        </div>
                      ))}

                      {/* Carousel Indicators */}
                      <div className="absolute top-4 right-4 flex gap-2">
                        {carouselWinners.map((_, index) => (
                          <button
                            key={index}
                            className={`w-3 h-3 rounded-full transition-all ${
                              index === currentSlide ? 'bg-white' : 'bg-white/50'
                            }`}
                            onClick={() => setCurrentSlide(index)}
                          />
                        ))}
                      </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}, Recent Winner
                              </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: `${((currentSlide + 1) / carouselWinners.length) * 100}%` 
                          }}
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </div>

          {/* Status Card */}
          <Card className="shadow-lg border-0">
            <CardHeader className="pb-4">
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-2xl">Ready to Enter Weekly Drawings?</CardTitle>
                  <p className="text-muted-foreground">
                    Complete these 2 simple steps to be eligible
                  </p>
                </div>
                <div className="text-right">
                  <div className="text-3xl font-bold text-green-600">{completionPercentage}%</div>
                  <div className="text-sm text-muted-foreground">Complete</div>
                </div>
              </div>
            </CardHeader>
            
            <CardContent className="space-y-6 pt-0">
              {/* Step 1: Contact Information */}
              <div className="border border-border rounded-lg p-6 bg-muted/30">
                <div className="flex items-start justify-between">
                  <div className="flex items-start gap-3">
                    <div className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-green-500 text-white">
                      ✓
                    </div>
                    <div>
                      <h3 className="font-semibold text-lg">Step 1: Contact Information</h3>
                      <div className="text-sm text-muted-foreground space-y-1 mt-1">
                        <div><span className="font-medium">Name:</span> <span>Test Test</span></div>
                        <div><span className="font-medium">Email:</span> <span>demo@demo.com</span></div>
                        <div><span className="font-medium">Mobile:</span> <span>8327861717</span></div>
                        <div><span className="font-medium">Address:</span> <span>16427 HICKORY KNOLL DR Houston, TX 12345</span></div>
                      </div>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm">Edit</Button>
                    <Button size="sm" disabled>Confirmed</Button>
                  </div>
                </div>
              </div>

              {/* Step 2: Favorited 3 Grants */}
              <div className="border border-border rounded-lg p-6 bg-muted/30">
                <div className="flex items-start justify-between">
                  <div className="flex items-start gap-3">
                    <div className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-green-500 text-white">
                      ✓
                    </div>
                    <div>
                      <h3 className="font-semibold text-lg">Step 2: Favorited 3 Grants</h3>
                      <div className="text-sm text-muted-foreground mt-1">
                        <p className="mb-2">Mark 3 grants as favorites in our database</p>
                      </div>
                      <div className="text-sm text-muted-foreground mt-1">
                        <div>✅ California Disaster Assistance</div>
                        <div>✅ Sleep in Heavenly Peace - Bed Donation Program</div>
                        <div>✅ Disaster Support Fund</div>
                      </div>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm" asChild>
                      <a href="/applications">View Applications</a>
                    </Button>
                  </div>
                </div>
              </div>

              {/* Success Message */}
              <div className="text-center p-6 bg-blue-50 border border-blue-200 rounded-lg">
                <div className="text-green-600 text-3xl mb-2">🎉</div>
                <h3 className="font-bold text-green-800 text-xl mb-1">Congratulations!</h3>
                <p className="text-green-600 font-medium mb-1">You've been entered into the Givesback Cash Program!</p>
                <p className="text-sm text-muted-foreground mt-2">You're now eligible for all upcoming weekly awards up to $1,000. Good luck!</p>
              </div>
            </CardContent>
          </Card>

          {/* Testimonials Grid */}
          <div className="space-y-6">
            <div className="text-center">
              <h2 className="text-3xl font-bold text-foreground mb-2">Past Award Recipients</h2>
              <p className="text-muted-foreground">See what our winners have to say</p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {winners.map((winner) => (
                <Card key={winner.id} className="hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                  <div className="aspect-video bg-muted rounded-t-lg overflow-hidden">
                    <img 
                      loading="lazy" 
                      alt={`${winner.name} testimonial`} 
                      src={winner.image} 
                      className="w-full h-full object-cover" 
                    />
                  </div>
                  <CardContent className="p-6">
                    <div className="mb-4">
                      <h4 className="font-semibold text-lg text-foreground">{winner.name}</h4>
                      <Badge variant="secondary" className="text-xs">awarded on {winner.date}</Badge>
                    </div>
                    <blockquote className="text-muted-foreground italic leading-relaxed">
                      "{winner.quote}"
                    </blockquote>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default Givesback;