"use client";

import { useState } from "react";
import Image from "next/image";

import Button from "@/components/ui/Button";
import { cn } from "@/lib/utils";

interface GalleryImage {
  src: string;
  alt?: string;
  hasVideo?: boolean;
}

interface StoreInfo {
  name: string;
  followers?: string;
  sold?: string;
  rating?: number;
  logoText?: string;
}

interface ColorOption {
  name: string;
  value: string;
}

interface SizeOption {
  label: string;
}

interface ProductDetailShowcaseProps {
  galleryImages?: GalleryImage[];
  store?: StoreInfo;
  title?: string;
  rating?: number;
  price?: string;
  oldPrice?: string;
  discountBadge?: string;
  colors?: ColorOption[];
  sizes?: SizeOption[];
  detailsTitle?: string;
  details?: string;
  showShare?: boolean;
  showWishlist?: boolean;
  showQuantity?: boolean;
  showBuyNow?: boolean;
  showAddToCart?: boolean;
  onBuyNow?: () => void;
  onAddToCart?: () => void;
  className?: string;
}

const defaultGalleryImages = [
  { src: "/images/tote-gallery-1.png", alt: "Espresso brown tote bag" },
  { src: "/images/tote-gallery-2.png", alt: "Model carrying espresso brown tote bag" },
  { src: "/images/tote-gallery-3.png", alt: "Model standing with espresso brown tote bag" },
  { src: "/images/tote-gallery-4.png", alt: "Espresso brown tote bag video preview", hasVideo: true },
];

const defaultColors = [
  { name: "Black", value: "#222222" },
  { name: "Espresso", value: "#4b2139" },
  { name: "Navy", value: "#162b3d" },
];

const defaultSizes = [
  { label: "S - 30x5cm" },
  { label: "M - 40cm" },
  { label: "XXL - 42cm" },
];

function StarIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="m10 1.5 2.55 5.16 5.7.83-4.13 4.02.98 5.68L10 14.51l-5.1 2.68.98-5.68L1.75 7.49l5.7-.83L10 1.5Z" />
    </svg>
  );
}

function IconButton({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <Button
      variant="icon"
      aria-label={label}
      className="h-9 w-9 border-0 bg-gray-100 text-gray-500 hover:bg-gray-200"
    >
      {children}
    </Button>
  );
}

export default function ProductDetailShowcase({
  galleryImages = defaultGalleryImages,
  store = {
    name: "Cozy",
    followers: "720 Followers",
    sold: "98k Sold",
    rating: 4.7,
    logoText: "coz",
  },
  title = "Calla Tote Bag - Espresso Brown",
  rating = 4.3,
  price = "LKR 5,000.00",
  oldPrice = "LKR 5,600.00",
  discountBadge = "-41%",
  colors = defaultColors,
  sizes = defaultSizes,
  detailsTitle = "Product: Calta Tote Bag",
  details = "The Calta Tote Bag in Espresso Brown blends everyday elegance with spacious comfort. Crafted with a smooth premium finish and designed for effortless carrying, it's perfect for work, travel, and daily essentials.",
  showShare = true,
  showWishlist = true,
  showQuantity = true,
  showBuyNow = true,
  showAddToCart = true,
  onBuyNow,
  onAddToCart,
  className,
}: ProductDetailShowcaseProps) {
  const [selectedColor, setSelectedColor] = useState(colors[0]?.name);
  const [selectedSize, setSelectedSize] = useState(sizes[0]?.label);

  return (
    <section className={cn("grid w-full gap-6 lg:grid-cols-[1.05fr_1fr]", className)}>
      {galleryImages.length > 0 && (
        <div className="grid grid-cols-2 gap-4">
          {galleryImages.map((image, index) => (
            <div
              key={`${image.src}-${index}`}
              className="relative aspect-square overflow-hidden rounded-md bg-gray-100"
            >
              <Image
                src={image.src}
                alt={image.alt ?? title}
                fill
                sizes="(max-width: 1024px) 50vw, 280px"
                className="object-cover"
              />
              {image.hasVideo && (
                <span className="absolute left-1/2 top-1/2 flex h-14 w-14 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-black/35 text-white backdrop-blur-sm">
                  <svg className="h-7 w-7 translate-x-0.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M8 5.5v13l10-6.5-10-6.5Z" />
                  </svg>
                </span>
              )}
            </div>
          ))}
        </div>
      )}

      <div className="space-y-5">
        {store && (
          <div className="flex flex-col gap-4 rounded-md bg-gray-50 p-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex min-w-0 items-center gap-3">
              <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[#b76222] text-xs font-semibold text-white">
                {store.logoText}
              </div>
              <div className="min-w-0">
                <h3 className="truncate text-sm font-semibold text-gray-900">{store.name}</h3>
                <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500">
                  {store.followers && <span>{store.followers}</span>}
                  {store.sold && <span>{store.sold}</span>}
                  {store.rating && (
                    <span className="inline-flex items-center gap-1 text-gray-700">
                      <StarIcon className="h-3 w-3 text-[#FFB800]" />
                      {store.rating.toFixed(1)}
                    </span>
                  )}
                </div>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Button variant="teal" className="h-8 px-5 text-xs">
                Follow
              </Button>
              <Button variant="outline" className="h-8 rounded-full border-[#00AFC1] px-5 text-xs text-[#00AFC1]">
                Go to Store
              </Button>
            </div>
          </div>
        )}

        <div className="flex items-start justify-between gap-4">
          <div className="min-w-0 space-y-2">
            {title && <h1 className="text-lg font-medium text-gray-900">{title}</h1>}
            {rating && (
              <div className="flex items-center gap-1 text-sm text-gray-700">
                <StarIcon className="h-4 w-4 text-[#FFB800]" />
                {rating.toFixed(1)}
              </div>
            )}
          </div>
          <div className="flex shrink-0 items-center gap-2">
            {showShare && (
              <IconButton label="Share product">
                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M8.5 12.5 15.5 16.5M15.5 7.5 8.5 11.5M18 8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM6 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM18 20.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
                </svg>
              </IconButton>
            )}
            {showWishlist && (
              <IconButton label="Add to wishlist">
                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z" />
                </svg>
              </IconButton>
            )}
          </div>
        </div>

        {(price || oldPrice || discountBadge) && (
          <div className="space-y-2">
            <div className="flex flex-wrap items-baseline gap-2">
              {price && <span className="text-2xl font-semibold text-gray-900">{price}</span>}
              {oldPrice && <span className="text-sm text-red-500 line-through">{oldPrice}</span>}
            </div>
            {discountBadge && (
              <span className="inline-flex rounded bg-red-500 px-2 py-1 text-xs font-semibold text-white">
                {discountBadge}
              </span>
            )}
          </div>
        )}

        {colors.length > 0 && (
          <div className="space-y-3">
            <p className="text-xs font-medium text-gray-500">Available Colors</p>
            <div className="flex flex-wrap gap-3">
              {colors.map((color) => (
                <button
                  key={color.name}
                  type="button"
                  onClick={() => setSelectedColor(color.name)}
                  className={cn(
                    "h-16 w-16 rounded-md ring-offset-2 transition-shadow",
                    selectedColor === color.name && "ring-2 ring-[#00AFC1]"
                  )}
                  style={{ backgroundColor: color.value }}
                  aria-label={color.name}
                />
              ))}
            </div>
          </div>
        )}

        {sizes.length > 0 && (
          <div className="space-y-3">
            <p className="text-xs font-medium text-gray-500">Available Sizes</p>
            <div className="flex flex-wrap gap-3">
              {sizes.map((size) => (
                <Button
                  key={size.label}
                  type="button"
                  variant="pill"
                  onClick={() => setSelectedSize(size.label)}
                  className={cn(
                    "h-10 border-0 px-5 text-xs",
                    selectedSize === size.label
                      ? "bg-[#07132b] text-white hover:bg-[#07132b]"
                      : "bg-gray-100 text-gray-600 hover:bg-gray-200"
                  )}
                >
                  {size.label}
                </Button>
              ))}
            </div>
          </div>
        )}

        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
          {showQuantity && (
            <select className="h-11 rounded-full bg-gray-100 px-4 text-sm text-gray-700 outline-none sm:w-20">
              <option>1</option>
              <option>2</option>
              <option>3</option>
            </select>
          )}
          {showBuyNow && (
            <Button variant="teal" onClick={onBuyNow} className="h-11 flex-1 text-sm">
              Buy now
            </Button>
          )}
          {showAddToCart && (
            <Button
              variant="outline"
              onClick={onAddToCart}
              className="h-11 flex-1 rounded-full border-[#00AFC1] text-sm text-[#00AFC1]"
            >
              Add to cart
            </Button>
          )}
        </div>

        {(detailsTitle || details) && (
          <div className="space-y-2 text-sm leading-6 text-gray-600">
            {detailsTitle && <p className="font-semibold text-gray-900">{detailsTitle}</p>}
            <p>
              <span className="font-medium text-gray-800">Shipping Type: Free Shipping</span>
            </p>
            {details && <p>{details}</p>}
          </div>
        )}
      </div>
    </section>
  );
}
