import Image from "next/image";
import Link from "next/link";
import { ProductDetailTabs } from "@/components/sections/product/product-detail-tabs";
import { ProductHeaderActions } from "@/components/sections/product/product-header-actions";
import { ProductPurchasePanel } from "@/components/sections/product/product-purchase-panel";
import type { StorefrontProductDetail } from "@/types/storefront";

export function ProductDetailSection({
  product,
}: {
  product: StorefrontProductDetail;
}) {
  const overline = product.brand ?? product.category;

  return (
    <div className="pb-20 pt-[60px]">
      <div className="space-y-[42px]">
        <nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-2">
          {product.breadcrumbs.map((crumb, index) => (
            <div key={`${crumb.label}-${index}`} className="flex items-center gap-2">
              {crumb.href ? (
                <Link
                  href={crumb.href}
                  className="text-[12px] font-medium uppercase leading-[1.5] tracking-[-0.03em] text-primary/60 transition-colors hover:text-primary"
                >
                  {crumb.label}
                </Link>
              ) : (
                <span className="text-[12px] font-medium uppercase leading-[1.5] tracking-[-0.03em] text-primary/60">
                  {crumb.label}
                </span>
              )}

              {index < product.breadcrumbs.length - 1 ? (
                <span className="text-[12px] font-medium uppercase leading-[1.5] tracking-[-0.03em] text-primary/60">
                  /
                </span>
              ) : null}
            </div>
          ))}
        </nav>

        <div className="grid gap-[60px] xl:grid-cols-[610px_minmax(0,1fr)]">
          <div className="rounded-[12px] border border-black/10 bg-white p-5">
            <div className="relative aspect-square">
              {product.featuredImage ? (
                <Image
                  src={product.featuredImage.src}
                  alt={product.featuredImage.alt || product.name}
                  fill
                  priority
                  sizes="(max-width: 1279px) 100vw, 570px"
                  className="object-contain"
                />
              ) : null}
            </div>
          </div>

          <div className="rounded-[12px] bg-muted-surface p-[42px]">
            <div className="space-y-8">
              <div className="space-y-6">
                <div className="flex items-start justify-between gap-6">
                  {overline ? (
                    overline === product.brand ? (
                      <Link
                        href={`/shop?brand=${encodeURIComponent(product.brand.slug)}`}
                        className="pt-0.5 text-[14px] font-medium uppercase leading-[1.5] tracking-[-0.02em]"
                        style={{ color: "rgba(32, 32, 33, 0.6)" }}
                      >
                        {product.brand.name}
                      </Link>
                    ) : (
                      <p className="pt-0.5 text-[14px] font-medium uppercase leading-[1.5] tracking-[-0.02em] text-primary/60">
                        {overline.name}
                      </p>
                    )
                  ) : <div />}
                  <ProductHeaderActions product={product} />
                </div>

                <h1 className="text-[34px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
                  {product.name}
                </h1>
              </div>
              <ProductPurchasePanel product={product} />
            </div>
          </div>
        </div>
      </div>

      <div className="mt-[42px]">
        <ProductDetailTabs product={product} />
      </div>
    </div>
  );
}