"use client";

import Link from "next/link";
import { BatteryCharging, Gauge, Heart, Timer } from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { Brand, InventoryItem, Scooter } from "@/lib/mock-data";
import { cn } from "@/lib/utils";

type ScooterCardProps = {
  scooter: Scooter;
  brand?: Brand;
  availability: InventoryItem[];
  compared: boolean;
  onCompareChange: (scooterId: string, checked: boolean) => void;
};

const statusCopy: Record<InventoryItem["status"], { label: string; variant: "blue" | "green" | "outline" | "navy" }> = {
  IN_STOCK: { label: "In Stock", variant: "green" },
  LIMITED_STOCK: { label: "Limited Stock", variant: "blue" },
  OUT_OF_STOCK: { label: "Out of Stock", variant: "outline" },
  TEST_RIDE_ONLY: { label: "Test Ride Only", variant: "navy" },
  COMING_SOON: { label: "Coming Soon", variant: "blue" },
};

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

function getDisplayStatus(availability: InventoryItem[]) {
  const priority: InventoryItem["status"][] = [
    "IN_STOCK",
    "LIMITED_STOCK",
    "TEST_RIDE_ONLY",
    "COMING_SOON",
    "OUT_OF_STOCK",
  ];

  return (
    priority.find((status) => availability.some((item) => item.status === status)) ??
    "OUT_OF_STOCK"
  );
}

export function ScooterCard({
  scooter,
  brand,
  availability,
  compared,
  onCompareChange,
}: ScooterCardProps) {
  const [favorite, setFavorite] = useState(false);
  const status = getDisplayStatus(availability);
  const statusDetails = statusCopy[status];

  return (
    <article className="flex min-h-[520px] flex-col rounded-xl border border-border bg-white p-4 shadow-card">
      <div className="relative rounded-xl bg-white p-1">
        <Badge variant={statusDetails.variant} className="absolute left-0 top-0 z-10">
          {statusDetails.label}
        </Badge>
        <button
          type="button"
          aria-label={`Save ${scooter.name}`}
          className={cn(
            "absolute right-0 top-1 z-10 inline-flex h-9 w-9 items-center justify-center rounded-full bg-white text-navy-muted transition hover:text-ev",
            favorite && "text-ev",
          )}
          onClick={() => setFavorite((value) => !value)}
        >
          <Heart className={cn("h-4 w-4", favorite && "fill-current")} />
        </button>
        <Link href={`/scooters/${scooter.slug}`}>
          <img
            src={scooter.thumbnailImage}
            alt={scooter.name}
            className="aspect-[4/3] w-full object-contain"
          />
        </Link>
      </div>

      <div className="flex flex-1 flex-col pt-4">
        <p className="text-xs font-semibold text-navy-muted">{brand?.name}</p>
        <Link href={`/scooters/${scooter.slug}`}>
          <h3 className="mt-1 text-base font-black text-navy-deep transition hover:text-primary">
            {scooter.name}
          </h3>
        </Link>
        <p className="mt-2 text-base font-bold text-ev-deep">
          {formatPrice(scooter.offerPrice)}
        </p>

        <dl className="mt-4 grid gap-2 text-xs text-navy-muted">
          <div className="flex items-center justify-between gap-3">
            <dt className="flex items-center gap-2">
              <BatteryCharging className="h-4 w-4 text-primary" />
              Range
            </dt>
            <dd className="font-semibold text-navy-deep">{scooter.rangeKm} km</dd>
          </div>
          <div className="flex items-center justify-between gap-3">
            <dt className="flex items-center gap-2">
              <Gauge className="h-4 w-4 text-primary" />
              Top Speed
            </dt>
            <dd className="font-semibold text-navy-deep">
              {scooter.topSpeedKmph} km/h
            </dd>
          </div>
          <div className="flex items-center justify-between gap-3">
            <dt className="flex items-center gap-2">
              <Timer className="h-4 w-4 text-primary" />
              Charging Time
            </dt>
            <dd className="font-semibold text-navy-deep">{scooter.chargingTime}</dd>
          </div>
        </dl>

        <div className="mt-auto space-y-2 pt-5">
          <Button
            className="h-9 w-full rounded-lg border-ev/70 text-ev-deep"
            href={`/scooters/${scooter.slug}`}
            variant="outline"
          >
            View Details
          </Button>
          <Button className="h-9 w-full rounded-lg" href="/book-test-ride" variant="green">
            Book Test Ride
          </Button>
          <label className="flex items-center gap-2 pt-2 text-sm font-medium text-navy-muted">
            <input
              type="checkbox"
              className="h-4 w-4 rounded border-border text-primary"
              checked={compared}
              onChange={(event) => onCompareChange(scooter.id, event.target.checked)}
            />
            Compare
          </label>
        </div>
      </div>
    </article>
  );
}