import Link from "next/link";
import { ArrowRight, BatteryCharging, Timer } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  brands as mockBrands,
  offers as mockOffers,
  scooters as mockScooters,
  type Brand,
  type Offer,
  type Scooter,
} from "@/lib/mock-data";

function formatPrice(value: number) {
  return `Rs. ${value.toLocaleString("en-NP")}`;
}

type ScootersOnOfferProps = {
  brands?: Brand[];
  offers?: Offer[];
  scooters?: Scooter[];
};

export function ScootersOnOffer({
  brands = mockBrands,
  offers = mockOffers,
  scooters = mockScooters,
}: ScootersOnOfferProps) {
  const scooterOffers = offers.filter((offer) => offer.scooterId).slice(0, 6);

  return (
    <section className="bg-white py-10" id="scooters-on-offer">
      <div className="container-custom">
        <div className="mb-5 flex items-center justify-between gap-4">
          <h2 className="text-2xl font-bold text-navy-deep">Scooters on Offer</h2>
          <Link
            href="/scooters"
            className="inline-flex items-center gap-2 text-sm font-semibold text-primary"
          >
            View All Scooters <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
          {scooterOffers.map((offer) => {
            const scooter = scooters.find((item) => item.id === offer.scooterId);
            const brand = brands.find((item) => item.id === scooter?.brandId);

            if (!scooter) {
              return null;
            }

            return (
              <article className="soft-card flex min-h-[430px] flex-col p-4" key={offer.id}>
                <div className="relative rounded-2xl bg-primary-soft p-3">
                  <Badge variant="green" className="absolute left-3 top-3">
                    {offer.discountLabel}
                  </Badge>
                  <img
                    src={scooter.thumbnailImage}
                    alt={scooter.name}
                    className="aspect-[4/3] w-full object-contain"
                  />
                </div>
                <div className="flex flex-1 flex-col pt-4">
                  <p className="text-xs font-semibold text-navy-muted">{brand?.name}</p>
                  <h3 className="mt-1 text-base font-bold text-navy-deep">
                    {scooter.name}
                  </h3>
                  <p className="mt-2 text-sm text-navy-muted line-through">
                    {formatPrice(scooter.price)}
                  </p>
                  <p className="text-lg font-black text-ev-deep">
                    {formatPrice(scooter.offerPrice)}
                  </p>
                  <div className="mt-3 grid grid-cols-2 gap-2 text-xs text-navy-muted">
                    <span className="rounded-xl bg-slate-50 p-2">
                      <BatteryCharging className="mb-1 h-4 w-4 text-primary" />
                      {scooter.rangeKm} km
                    </span>
                    <span className="rounded-xl bg-slate-50 p-2">
                      <Timer className="mb-1 h-4 w-4 text-primary" />
                      {scooter.chargingTime}
                    </span>
                  </div>
                  <Button
                    className="mt-auto w-full"
                    href={`/scooters/${scooter.slug}`}
                    variant="outline"
                    size="sm"
                  >
                    View Offer Details
                  </Button>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}