"use client";

import { useEffect } from "react";
import { Reveal } from "@/components/shared/Reveal";
import Link from "next/link";
import { ChevronLeft, ChevronRight, Star } from "lucide-react";
import useEmblaCarousel from "embla-carousel-react";

type Review = {
  name: string;
  rating: number;
  review: string;
  link: string;
};

const resortReview: Review = {
  name: "- Abhishek Kumar",
  rating: 5,
  review:
    "One of the best wedding venues near Pune. Spacious resort, outstanding hospitality, and seamless event execution. Perfect for destination weddings, receptions, and even corporate events.",
  link: "https://maps.app.goo.gl/e2SXQFZvxihJi3iSA",
};

const weddingReviews: Review[] = [
  {
    name: "Kaushal Sakle",
    rating: 5,
    review:
      "Thank you TGHR for the amazing wedding venue. The management team was incredibly supportive, every lawn and hall was beautifully maintained, and our two-day celebration became unforgettable.",
    link: "https://maps.app.goo.gl/vo12UKMXF2X3CTQe9",
  },
  {
    name: "Tushar Patil",
    rating: 5,
    review:
      "Heritage-inspired architecture, spacious banquet halls, luxurious rooms, and outstanding event management created the perfect destination wedding experience for our family and guests.",
    link: "https://maps.app.goo.gl/kAjmTkNBZK5mJXeLA",
  },
  {
    name: "Sohan Patil",
    rating: 5,
    review:
      "From the first visit to the wedding day, the team was supportive and professional. The venue looked stunning, and our guests appreciated the hospitality. One of the finest luxury wedding resorts in Pune.",
    link: "https://maps.app.goo.gl/ptJdaUdY7CJZm6i18",
  },
];

const corporateReviews: Review[] = [
  {
    name: "Netal Charkha",
    rating: 5,
    review:
      "If you're searching for a corporate retreat resort near Pune, this place is an excellent choice. The event spaces, accommodation, food, and outdoor activities were well organized. Our employees loved the refreshing environment away from the city.",
    link: "https://maps.app.goo.gl/842tDJq24bsxMTXC6",
  },
  {
    name: "Snehal Thete",
    rating: 5,
    review:
      "The Grand Heritage Resorts is a fantastic corporate offsite venue near Pune. We booked it for a leadership workshop, and everything—from meeting arrangements to guest",
    link: "https://maps.app.goo.gl/cFK5tY7igxHWiffz8",
  },
  {
    name: "Vaishnavi Jadhav",
    rating: 5,
    review:
      "We organized our company's annual meeting here, and it turned out to be one of our best events. The banquet hall, spacious lawns, and comfortable stay made it an ideal",
    link: "https://maps.app.goo.gl/Ntu7DaVvxDBSmMXi6",
  },
];

const stayReviews: Review[] = [
  {
    name: "Shrushti Kadam",
    rating: 5,
    review:
      "Pleasant surroundings with spacious rooms and beautiful heritage architecture. Great views, peaceful ambience, and comfortable accommodation made our holiday truly enjoyable.",
    link: "https://maps.app.goo.gl/iQZjRPbGBFj9JWZj6",
  },
  {
    name: "Bhumika Nikam",
    rating: 5,
    review:
      "A wonderful stay at The Grand Heritage Resorts, one of the best resorts near Pune. Beautiful heritage ambience, comfortable rooms, and warm hospitality!",
    link: "https://maps.app.goo.gl/g4xwqPev4RLFsyWY6",
  },
  {
    name: "Ekta Patel",
    rating: 5,
    review:
      "The spacious property, beautiful ambience, and warm hospitality made our weekend truly relaxing and memorable. Highly recommended for anyone looking for a luxury staycation resort near Pune with a unique heritage experience",
    link: "https://maps.app.goo.gl/4zpCkuv7yU7THEkJ9",
  },
];

function trimReview(text: string) {
  const words = text.split(" ");

  if (words.length <= 30) return text;

  return words.slice(0, 30).join(" ") + "...";
}

function ReviewCard({
  title,
  reviews,
}: {
  title: string;
  reviews: Review[];
}) {
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: true,
    align: "start",
  });

  useEffect(() => {
    if (!emblaApi) return;

    const autoplay = window.setInterval(() => {
      emblaApi.scrollNext();
    }, 4500);

    return () => window.clearInterval(autoplay);
  }, [emblaApi]);

  const scrollPrev = () => emblaApi?.scrollPrev();
  const scrollNext = () => emblaApi?.scrollNext();

  return (
    <div className="group overflow-hidden rounded-[12px] border border-gold/20 bg-ivory shadow-[0_15px_50px_rgba(0,0,0,0.06)] transition-all duration-500 hover:shadow-[0_25px_70px_rgba(0,0,0,0.12)]">
      {/* Header */}
      <div className="border-b border-gold/10 px-8 py-4">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="font-serif text-2xl text-espresso">
              {title}
            </h3>
          </div>

          <div className="flex gap-2">
            <button
              onClick={scrollPrev}
              aria-label="Previous review"
              className="flex h-8 w-8 items-center justify-center rounded-full border border-gold/20 transition hover:bg-gold hover:text-white"
            >
              <ChevronLeft size={18} />
            </button>

            <button
              onClick={scrollNext}
              aria-label="Next review"
              className="flex h-8 w-8 items-center justify-center rounded-full border border-gold/20 transition hover:bg-gold hover:text-white"
            >
              <ChevronRight size={18} />
            </button>
          </div>
        </div>
      </div>

      {/* Embla */}
      <div ref={emblaRef} className="overflow-hidden">
        <div className="flex">
          {reviews.map((review, index) => (
            <div
              key={index}
              className="min-w-0 flex-[0_0_100%]"
            >
              <Link
                href={review.link}
                title={review.link}
                target="_blank"
                rel="noopener noreferrer"
                className="block h-full px-8 py-4 will-change-transform transition-all duration-500 hover:-translate-y-2"
              >
                {/* Stars */}
                <div className="mb-4 flex gap-1">
                  {Array.from({
                    length: review.rating,
                  }).map((_, i) => (
                    <Star
                      key={i}
                      size={16}
                      className="fill-gold text-gold"
                    />
                  ))}
                </div>

                {/* Review */}
                <p className="min-h-[120px] text-[15px] leading-6 text-mahogany">
                  "{trimReview(review.review)}"
                </p>

                {/* Reviewer */}
                <div className="mt-0">
                  <h4 className="font-semibold text-espresso">
                    {review.name}
                  </h4>
                </div>
              </Link>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function TestimonialsSection() {
  return (
    <section className="bg-sand py-12 md:py-12 overflow-hidden">
      <Reveal>
        <div className="mx-auto max-w-7xl px-6">
          {/* Heading */}
          <div className="text-center mb-6">
            <span className="text-[10px] uppercase tracking-[0.4em] text-gold block">
              Reviews
            </span>

            <h2 className="mt-5 font-serif text-3xl md:text-4xl text-espresso">
              Guest Experiences at TGHR
            </h2>
          </div>

          {/* Resort Review */}
          <div className="mx-auto max-w-5xl px-6 py-6 md:px-6 md:py-6">
            {/* Stars */}
            <div className="flex justify-center gap-1 mb-6">
              {Array.from({
                length: resortReview.rating,
              }).map((_, i) => (
                <Star
                  key={i}
                  size={20}
                  className="fill-gold text-gold"
                />
              ))}
            </div>

            <Link
              href={resortReview.link}
              title={resortReview.link}
              target="_blank"
              rel="noopener noreferrer"
              className="block mb-10"
            >
              {/* Review */}
              <blockquote className="font-serif italic text-2xl leading-relaxed text-espresso text-center max-w-4xl mx-auto">
                “{trimReview(resortReview.review)}”
              </blockquote>

              {/* Reviewer */}
              <div className="mt-5 text-center">
                <h3 className="font-sans text-lg font-medium text-espresso">
                  {resortReview.name}
                </h3>
              </div>
            </Link>
          </div>

          {/* Review Cards */}
          <div className="grid gap-8 lg:grid-cols-3">
            <ReviewCard
              title="Wedding Reviews"
              reviews={weddingReviews}
            />

            <ReviewCard
              title="Corporate Reviews"
              reviews={corporateReviews}
            />

            <ReviewCard
              title="Stay Reviews"
              reviews={stayReviews}
            />
          </div>
        </div>
      </Reveal>
    </section>
  );
}

export default TestimonialsSection;