"use client";

import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight } from "lucide-react";
import { LocationDisplayName } from "@/components/LocationDisplayName";
import { MotionItem, MotionReveal, MotionStagger } from "@/components/Motion";
import { SectionHeader } from "@/components/SectionHeader";
import { getWhatsAppUrl } from "@/lib/contact";
import { useUserLocation } from "@/lib/location-context";
import { routePath } from "@/lib/route-url";
import { cn } from "@/lib/utils";

type VehicleType = "Bike" | "Car";

const services = [
  {
    image: "/images/bike-service-new-2.webp",
    title: "Bike Service",
    desc: "Full service, engine oil, brakes, electrical repairs, and regular maintenance.",
    href: "/services/bike-service",
  },
  {
    image: "/images/car-service-new-2.webp",
    title: "Car Service",
    desc: "Doorstep inspection, scheduled service, suspension, steering, and repair support.",
    href: "/services/car-service",
  },
  {
    image: "/images/car-ac-service-new-1.webp",
    title: "Car AC Service",
    desc: "Cooling check, gas refill, compressor issues, leakage test, and AC performance fix.",
    href: "/services/car-ac-service",
  },
  {
    image: "/images/engine-service-new-2.webp",
    title: "Engine Repair",
    desc: "Bike and car engine repair for overheating, misfiring, starting issues, fuel drop, and health diagnostics.",
    vehicleTypes: ["Car", "Bike"] satisfies VehicleType[],
    href: "/services/engine-repair",
  },
  {
    image: "/images/battery-service-new-7.webp",
    title: "Battery Service",
    desc: "Bike and car battery checks, jump starts, wiring faults, light issues, and replacement support.",
    vehicleTypes: ["Car", "Bike"] satisfies VehicleType[],
    href: "/services/battery-service",
  },
  {
    image: "/images/tyre-service-new-2.webp",
    title: "Tyre & Wheel",
    desc: "Bike and car puncture repair, air leaks, wheel balancing, tyre checks, and alloy wheel support.",
    vehicleTypes: ["Car", "Bike"] satisfies VehicleType[],
    href: "/services/tyre-wheel",
  },
];

export function ServiceCard({
  image,
  title,
  desc,
  vehicleTypes,
  href,
}: {
  image: string;
  title: string;
  desc: string;
  vehicleTypes?: VehicleType[];
  href?: string;
}) {
  const { location, resolvedName, state } = useUserLocation();
  const whatsappMessage = `Hi Ride N Revive, I want to book ${title}${
    location ? ` in ${location.name}` : ""
  }. Please help me.`;
  const cardHref = href ?? getWhatsAppUrl(whatsappMessage);
  const isExternal = !href;
  const CardLink = href ? Link : "a";

  return (
    <MotionItem className="group relative flex h-full flex-col overflow-hidden rounded-xl bg-[#e9e9e9] font-['Space_Grotesk'] text-card-foreground shadow-[0_14px_42px_color-mix(in_oklab,var(--foreground)_7%,transparent)] transition-all duration-500 hover:-translate-y-1.5 hover:border-primary/30 hover:shadow-[0_22px_64px_color-mix(in_oklab,var(--foreground)_13%,transparent)] 2xl:shadow-[0_18px_55px_color-mix(in_oklab,var(--foreground)_7%,transparent)]">
      <CardLink
        href={href ? routePath(cardHref) : cardHref}
        target={isExternal ? "_blank" : undefined}
        rel={isExternal ? "noreferrer" : undefined}
        aria-label={href ? `Open ${title}` : `Book ${title} on WhatsApp`}
        className="absolute inset-0 z-20"
        onClick={(event) => {
          if (state === "unavailable") {
            event.preventDefault();
            window.alert(
              `Service is not available in your area${resolvedName ? ` (${resolvedName})` : ""}.`,
            );
          }
        }}
      />
      <div className="relative mx-2 mt-2 h-44 overflow-hidden rounded-xl bg-[#e9e9e9] 2xl:mx-3 2xl:mt-3 2xl:h-52 2xl:rounded-xl">
        <Image
          src={image}
          alt={title}
          fill
          sizes="(min-width: 1536px) 30vw, (min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
          className="object-contain p-4 transition-all duration-500 group-hover:scale-110 2xl:p-5"
        />

        <span className="absolute left-3 top-3 rounded-full bg-card px-3 py-1.5 text-[10px] font-bold uppercase tracking-[0.18em] text-primary shadow-sm 2xl:left-4 2xl:top-4 2xl:px-4 2xl:py-2 2xl:text-[11px]">
          Doorstep
        </span>

        {vehicleTypes ? (
          <span className="absolute right-3 top-3 rounded-full bg-card px-3 py-1.5 text-[10px] font-bold uppercase tracking-[0.12em] text-primary shadow-sm 2xl:right-4 2xl:top-4 2xl:px-4 2xl:py-2 2xl:text-[11px]">
            {vehicleTypes.join(" | ")}
          </span>
        ) : null}
      </div>

      <div className="relative flex flex-1 flex-col p-5 pt-4 2xl:p-6 2xl:pt-5">
        <div className="mb-3 flex items-start justify-between gap-3 2xl:mb-4 2xl:gap-4">
          <h3 className="max-w-[200px] text-[22px] font-black leading-tight tracking-[-0.04em] text-card-foreground 2xl:max-w-[220px] 2xl:text-[25px]">
            {title}
          </h3>

          <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-foreground text-background transition-all duration-300 group-hover:rotate-45 group-hover:bg-primary group-hover:text-primary-foreground 2xl:h-12 2xl:w-12">
            <ArrowUpRight className="h-4 w-4 2xl:h-5 2xl:w-5" />
          </span>
        </div>

        <p className="min-h-[72px] text-sm leading-relaxed text-muted-foreground 2xl:min-h-[78px] 2xl:text-[15px]">
          {desc}
        </p>
      </div>
    </MotionItem>
  );
}

export function ServiceCardsGrid() {
  return (
    <MotionStagger className="grid gap-5 font-['Space_Grotesk'] sm:grid-cols-2 lg:grid-cols-3 2xl:gap-7">
      {services.map((service) => (
        <ServiceCard key={service.title} {...service} />
      ))}
    </MotionStagger>
  );
}

type ServicesSectionProps = {
  className?: string;
  containerClassName?: string;
};

export function ServicesSection({ className, containerClassName }: ServicesSectionProps) {
  const { location } = useUserLocation();

  return (
    <section
      data-section="services"
      className={cn("py-14 font-['Space_Grotesk'] 2xl:py-20", className)}
    >
      <div className={cn("mx-auto max-w-7xl px-4", containerClassName)}>
        <MotionReveal>
          <SectionHeader
            eyebrow="Our services"
            title={
              <>
                Total Vehicle Care
                {location ? (
                  <>
                    {" "}
                    in <LocationDisplayName name={location.name} />
                  </>
                ) : null}
              </>
            }
            lead="Bike, car, AC, engine, battery, tyre, and wheel support brought to your doorstep."
          />
        </MotionReveal>
        <MotionReveal delay={0.08} className="mt-8 2xl:mt-12">
          <ServiceCardsGrid />
        </MotionReveal>
      </div>
    </section>
  );
}