"use client";

import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import { getImageAlt, getImageUrl } from "@/lib/images";
import { getProductInitial, sortProductsByShowroomOrder } from "@/lib/product-order";
import { localizedPath } from "@/lib/routing";
import type { Locale, Product } from "@/types/content";

type ProductCatalogBrowserProps = {
  locale: Locale;
  products: Product[];
};

export function ProductCatalogBrowser({ locale, products }: ProductCatalogBrowserProps) {
  const orderedProducts = sortProductsByShowroomOrder(products);
  const [activeIndex, setActiveIndex] = useState(0);
  const activeProduct = orderedProducts[activeIndex] ?? orderedProducts[0];

  if (!activeProduct) return null;

  const activeImage = getImageUrl(activeProduct.heroImage);
  const detailHref = localizedPath(`/products/${activeProduct.slug}`, locale);

  return (
    <section className="product-browser-section" aria-label={locale === "id" ? "Katalog produk Akarya" : "Akarya product catalog"}>
      <div className="container product-browser-tabs" role="tablist" aria-label={locale === "id" ? "Kategori produk" : "Product categories"}>
        {orderedProducts.map((product, index) => {
          const isActive = index === activeIndex;

          return (
            <button
              aria-controls="product-browser-panel"
              aria-selected={isActive}
              className={`product-browser-tab${isActive ? " is-active" : ""}`}
              key={product.slug}
              onClick={() => setActiveIndex(index)}
              role="tab"
              type="button"
            >
              <span>{getProductInitial(product.title.en, index)}</span>
              <strong>{product.title[locale]}</strong>
            </button>
          );
        })}
      </div>

      <div className="product-browser-panel" id="product-browser-panel" key={activeProduct.slug} role="tabpanel">
        <div className="container">
          <header className="product-browser-header">
            <p className="eyebrow">{activeProduct.category?.[locale] || (locale === "id" ? "Produk" : "Product")}</p>
            <h2>{activeProduct.title[locale]}</h2>
            <p>{activeProduct.fullDescription[locale] || activeProduct.shortDescription[locale]}</p>
          </header>

          <div className="product-card-grid">
            <article className="product-series-card">
              <div className="product-series-media">
                {activeImage ? (
                  <Image
                    alt={getImageAlt(activeProduct.heroImage, activeProduct.title[locale])}
                    className="product-series-image"
                    fill
                    sizes="(max-width: 768px) 100vw, 520px"
                    src={activeImage}
                  />
                ) : (
                  <span>{activeProduct.title[locale]}</span>
                )}
              </div>
              <div className="product-series-body">
                <h3>{activeProduct.title[locale]}</h3>
                <p>{activeProduct.shortDescription[locale]}</p>
                <Link className="product-learn-more" prefetch={false} href={detailHref}>
                  Learn More <span aria-hidden="true">›</span>
                </Link>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section>
  );
}
