"use client";

import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";

import type { Product } from "@/lib/data";
import { AddToCartButton } from "@/components/add-to-cart-button";
import { Button } from "@/components/ui/button";

type ProductPurchasePanelProps = {
  product: Product;
  imageOverride?: string;
};

export function ProductPurchasePanel({ product, imageOverride }: ProductPurchasePanelProps) {
  const router = useRouter();
  const [selectedColor, setSelectedColor] = useState(product.colors[0] || "");
  const [selectedSize, setSelectedSize] = useState(product.sizes[0] || "");

  const checkoutHref = useMemo(() => {
    const params = new URLSearchParams({
      product: product.name,
      price: String(product.price),
      color: selectedColor,
      size: selectedSize
    });

    if (imageOverride) {
      params.set("image", imageOverride);
    }

    return `/checkout?${params.toString()}`;
  }, [imageOverride, product.name, product.price, selectedColor, selectedSize]);

  return (
    <div className="space-y-4 rounded-3xl border p-5">
      <div className="space-y-2">
        <div className="flex items-center justify-between gap-3">
          <p className="text-sm font-medium">Color</p>
          <p className="text-xs text-muted-foreground">Selected: {selectedColor}</p>
        </div>
        <div className="flex flex-wrap gap-2">
          {product.colors.map((color) => (
            <button
              type="button"
              key={color}
              onClick={() => setSelectedColor(color)}
              className={`rounded-full border px-4 py-2 text-sm transition ${
                selectedColor === color
                  ? "border-primary bg-primary text-white"
                  : "hover:border-primary"
              }`}
            >
              {color}
            </button>
          ))}
        </div>
      </div>

      <div className="space-y-2">
        <div className="flex items-center justify-between gap-3">
          <p className="text-sm font-medium">Size</p>
          <p className="text-xs text-muted-foreground">Selected: {selectedSize}</p>
        </div>
        <div className="flex flex-wrap gap-2">
          {product.sizes.map((size) => (
            <button
              type="button"
              key={size}
              onClick={() => setSelectedSize(size)}
              className={`rounded-full border px-4 py-2 text-sm transition ${
                selectedSize === size
                  ? "border-primary bg-primary text-white"
                  : "hover:border-primary"
              }`}
            >
              {size}
            </button>
          ))}
        </div>
      </div>

      <div className="space-y-2">
        <p className="text-sm font-medium">Fabric</p>
        <div className="flex flex-wrap gap-2">
          {product.fabric.map((fabric) => (
            <button
              type="button"
              key={fabric}
              className="rounded-full border px-4 py-2 text-sm transition hover:border-primary"
            >
              {fabric}
            </button>
          ))}
        </div>
      </div>

      <div className="rounded-2xl border border-dashed p-3 text-sm text-muted-foreground">
        Ready to order: {selectedColor} / {selectedSize}
      </div>

      <div className="hidden grid-cols-2 gap-3 md:grid">
        <AddToCartButton
          product={product}
          imageOverride={imageOverride}
          color={selectedColor}
          size={selectedSize}
          className="w-full"
        />
        <Button className="w-full bg-orange-600 text-white hover:bg-orange-700" onClick={() => router.push(checkoutHref)}>
          Buy Now
        </Button>
      </div>

      <div className="grid grid-cols-2 gap-3 md:hidden">
        <AddToCartButton
          product={product}
          imageOverride={imageOverride}
          color={selectedColor}
          size={selectedSize}
          className="w-full"
        />
        <Button className="w-full bg-orange-600 text-white hover:bg-orange-700" onClick={() => router.push(checkoutHref)}>
          Buy Now
        </Button>
      </div>
    </div>
  );
}