"use client";

import React from "react";
import useEmblaCarousel from "embla-carousel-react";
import { motion } from "framer-motion";
import { MotionReveal } from "@/components/Motion";
import { Quote, Star, CheckCircle2, ArrowLeft, ArrowRight } from "lucide-react";
import { SectionHeader } from "@/components/SectionHeader";
import { useUserLocation } from "@/lib/location-context";
import { cn } from "@/lib/utils";

const testimonials = [
  {
    name: "Aarav Sharma",
    role: "Car Owner",
    quote:
      "The mechanic arrived on time, explained every step clearly, and completed my car service right at home. It saved me an entire workshop visit.",
  },
  {
    name: "Priya Mehta",
    role: "Daily Commuter",
    quote:
      "I booked on WhatsApp and the team handled my scooter service without any confusion. Pricing was clear, and there were no surprise charges.",
  },
  {
    name: "Rohan Malhotra",
    role: "SUV Owner, Sector 56",
    quote:
      "Ride N Revive checked my SUV thoroughly and shared what actually needed attention. The doorstep experience felt professional and reliable.",
  },
  {
    name: "Neha Verma",
    role: "Hatchback Owner",
    quote:
      "I had to reschedule once, and support made it easy. The technician was polite, neat, and finished the work without disturbing my day.",
  },
  {
    name: "Karan Singh",
    role: "Bike Owner, Golf Course Road",
    quote:
      "My bike service was done in my parking area while I worked from home. Quick updates, clean work, and very convenient.",
  },
];

export function TestimonialsSlider() {
  const [emblaRef, emblaApi] = useEmblaCarousel({
    align: "start",
    loop: true,
    breakpoints: {
      "(max-width: 768px)": { align: "center" },
    },
  });

  const scrollPrev = React.useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi]);
  const scrollNext = React.useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);

  return (
    <div className="relative mt-8 w-full font-['Space_Grotesk'] md:mt-12">
      {/* Navigation - Hidden on mobile, visible on MD+ */}
      <div className="absolute -top-20 right-0 hidden gap-3 md:flex">
        <button
          onClick={scrollPrev}
          aria-label="Previous testimonial"
          className="group flex h-12 w-12 items-center justify-center rounded-full border border-primary/20 bg-background text-primary shadow-sm transition-all hover:-translate-y-0.5 hover:bg-primary hover:text-white"
        >
          <ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-0.5" />
        </button>
        <button
          onClick={scrollNext}
          aria-label="Next testimonial"
          className="group flex h-12 w-12 items-center justify-center rounded-full border border-primary/20 bg-background text-primary shadow-sm transition-all hover:-translate-y-0.5 hover:bg-primary hover:text-white"
        >
          <ArrowRight className="h-5 w-5 transition-transform group-hover:translate-x-0.5" />
        </button>
      </div>

      {/* Slider Viewport */}
      <div
        className="cursor-grab overflow-hidden px-4 pt-3 font-['Space_Grotesk'] active:cursor-grabbing md:px-3"
        ref={emblaRef}
      >
        <div className="flex -ml-4 md:-ml-6">
          {testimonials.map((testimonial, index) => (
            <div
              key={index}
              className="min-w-0 flex-[0_0_90%] pl-4 md:flex-[0_0_50%] md:pl-6 lg:flex-[0_0_33.33%]"
            >
              <motion.article
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                className="group relative flex h-full min-h-[360px] flex-col justify-between overflow-hidden rounded-3xl border border-border bg-card p-7 transition-all duration-500 hover:-translate-y-1.5 hover:border-primary/30 2xl:p-8"
              >
                <Quote className="absolute -right-4 -top-4 h-28 w-28 rotate-12 text-primary opacity-[0.05] transition-transform duration-500 group-hover:rotate-0" />

                <div>
                  <div className="mb-8 flex items-center justify-between">
                    <div className="flex gap-1 text-amber-400" aria-label="5 star rating">
                      {[...Array(5)].map((_, i) => (
                        <Star key={i} className="h-4 w-4 fill-current" />
                      ))}
                    </div>
                    <span className="inline-flex items-center gap-1.5 rounded-full border border-primary/15 bg-primary/5 px-3 py-1 text-[10px] font-black uppercase tracking-widest text-primary">
                      <CheckCircle2 className="h-3.5 w-3.5" />
                      Verified
                    </span>
                  </div>

                  <blockquote className="relative">
                    <p className="text-lg font-semibold leading-relaxed tracking-tight text-slate-800">
                      “{testimonial.quote}”
                    </p>
                  </blockquote>
                </div>

                <div className="mt-10 flex items-center gap-4 border-t border-border pt-6">
                  <div className="relative">
                    <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-foreground text-xl font-black text-background">
                      {testimonial.name
                        .split(" ")
                        .map((part) => part.charAt(0))
                        .join("")}
                    </div>
                    <div className="absolute -bottom-1 -right-1 rounded-full bg-card p-0.5">
                      <CheckCircle2 className="h-5 w-5 fill-primary text-white" />
                    </div>
                  </div>
                  <div className="overflow-hidden">
                    <h3 className="truncate text-lg font-bold tracking-tight text-slate-900">
                      {testimonial.name}
                    </h3>
                    <p className="truncate text-[11px] font-bold uppercase tracking-[0.18em] text-primary">
                      {testimonial.role}
                    </p>
                  </div>
                </div>
              </motion.article>
            </div>
          ))}
        </div>
      </div>

      {/* Mobile-only Navigation Dots/Arrows */}
      <div className="mt-8 flex items-center justify-center gap-4 md:hidden">
        <button onClick={scrollPrev} aria-label="Previous testimonial" className="p-2 text-primary">
          <ArrowLeft />
        </button>
        <div className="h-1 w-20 rounded-full bg-slate-200">
          <div className="h-full w-1/3 rounded-full bg-primary" />
        </div>
        <button onClick={scrollNext} aria-label="Next testimonial" className="p-2 text-primary">
          <ArrowRight />
        </button>
      </div>
    </div>
  );
}

export function TestimonialsSection({
  className,
  containerClassName,
}: {
  className?: string;
  containerClassName?: string;
}) {
  const { location } = useUserLocation();
  const serviceAreaName = location?.name ?? "your area";

  return (
    <section
      data-section="testimonials"
      className={cn(
        "overflow-hidden bg-slate-100 py-16 font-['Space_Grotesk'] md:py-24",
        className,
      )}
    >
      <div className={cn("mx-auto max-w-7xl px-4 md:px-6", containerClassName)}>
        <MotionReveal>
          <SectionHeader
            eyebrow="Customer reviews"
            title={`Trusted by riders and drivers across ${serviceAreaName}`}
            lead="Real doorstep service experiences from customers who wanted clear pricing, skilled hands, and less workshop waiting."
          />
        </MotionReveal>
        <TestimonialsSlider />
      </div>
    </section>
  );
}