"use client";

import {
  Heart,
  LockKeyhole,
  MapPin,
  PackageCheck,
  RotateCcw,
  ShieldCheck,
  ShoppingCart,
} from "lucide-react";

import { PriceDisplay } from "@/components/price-display";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export interface ProductBuyBoxProps {
  itemId: string;
  title: string;
  price: number;
  originalRetail?: number | null;
  status: string;
  storeCity: string;
  storeState: string;
  conditionLabel?: string | null;
  conditionClassName?: string;
  shippingSummary?: string | null;
  returnsSummary?: string | null;
  addToCartPending: boolean;
  onAddToCart: (itemId: string) => void;
  onSaveForLater: (itemId: string) => void;
  className?: string;
}

function formatStatus(status: string): string {
  return status
    .split(/[-_\s]+/)
    .filter(Boolean)
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
    .join(" ");
}

export function ProductBuyBox({
  itemId,
  title,
  price,
  originalRetail = null,
  status,
  storeCity,
  storeState,
  conditionLabel,
  conditionClassName,
  shippingSummary,
  returnsSummary,
  addToCartPending,
  onAddToCart,
  onSaveForLater,
  className,
}: ProductBuyBoxProps) {
  const isAvailable = status.toLowerCase() === "active";
  const location = [storeCity, storeState].filter(Boolean).join(", ");

  return (
    <section
      aria-label={`${title} purchase options`}
      className={className}
    >
      <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div>
          <h1 className="text-2xl font-bold leading-tight text-slate-900">{title}</h1>
          <div className="mt-3">
            <PriceDisplay price={price} originalRetail={originalRetail} size="lg" />
          </div>
        </div>

        {conditionLabel ? (
          <span
            className={cn(
              "mt-4 inline-block rounded px-3 py-1.5 text-sm font-medium",
              conditionClassName ?? "bg-slate-100 text-slate-600",
            )}
          >
            {conditionLabel}
          </span>
        ) : null}

        {!isAvailable ? (
          <p className="mt-4 rounded-md bg-slate-100 px-3 py-2 text-sm font-medium text-slate-700">
            {formatStatus(status) || "Unavailable"}
          </p>
        ) : null}

        <div className="mt-6 space-y-2">
          <Button
            aria-busy={addToCartPending}
            className="w-full"
            disabled={addToCartPending || !isAvailable}
            size="lg"
            onClick={() => onAddToCart(itemId)}
          >
            <ShoppingCart aria-hidden="true" />
            Add to Cart
          </Button>
          <Button
            className="w-full"
            size="lg"
            variant="outline"
            onClick={() => onSaveForLater(itemId)}
          >
            <Heart aria-hidden="true" />
            Save for Later
          </Button>
        </div>

        <ul
          aria-label="Purchase reassurance"
          className="mt-5 divide-y divide-slate-100 rounded-md border border-slate-100 bg-slate-50"
        >
          {isAvailable ? (
            <li className="flex items-start gap-3 px-3 py-3 text-sm text-slate-700">
              <PackageCheck aria-hidden="true" className="mt-0.5 size-4 text-forest-700" />
              <span className="font-medium text-slate-900">Only 1 available</span>
            </li>
          ) : null}
          {location ? (
            <li className="flex items-start gap-3 px-3 py-3 text-sm text-slate-700">
              <MapPin aria-hidden="true" className="mt-0.5 size-4 text-slate-500" />
              <span>
                Ships from <span className="font-medium text-slate-900">{location}</span>
                {shippingSummary ? (
                  <span className="block text-slate-500">{shippingSummary}</span>
                ) : null}
              </span>
            </li>
          ) : null}
          {returnsSummary ? (
            <li className="flex items-start gap-3 px-3 py-3 text-sm text-slate-700">
              <RotateCcw aria-hidden="true" className="mt-0.5 size-4 text-slate-500" />
              <span>{returnsSummary}</span>
            </li>
          ) : null}
          <li className="flex items-start gap-3 px-3 py-3 text-sm text-slate-700">
            <ShieldCheck aria-hidden="true" className="mt-0.5 size-4 text-forest-700" />
            <span>
              <span className="font-medium text-slate-900">Buyer protection</span>
              <span className="block text-slate-500">Not as described? You&apos;re covered.</span>
            </span>
          </li>
          <li className="flex items-start gap-3 px-3 py-3 text-sm text-slate-700">
            <LockKeyhole aria-hidden="true" className="mt-0.5 size-4 text-slate-500" />
            <span>Secure checkout</span>
          </li>
        </ul>
      </div>
    </section>
  );
}