import { get } from "lodash";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import Image from "next/image";
import Link from "next/link";

import { apiEndpoints } from "@/lib/api";
import { canonicalUrls } from "@/lib/canonical";
import styles from "./product.module.css";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string; productSlug: string }>;
}): Promise<Metadata> {
  try {
    const { slug, productSlug } = await params;
    const { data: product } = await apiEndpoints.product(slug, productSlug);

    if (!product) {
      return {
        title: "Product Not Found | La Tarte Patisserie",
        description: "The requested product could not be found.",
      };
    }

    const title = get(product, ["title"], `Product - ${productSlug}`);
    const description = get(
      product,
      ["subtitle"],
      `Discover ${title} at La Tarte Patisserie. Handcrafted with love and premium ingredients.`
    );
    const imageUrl = get(product, ["thumbnail", "url"], "");

    return {
      title: `${title} | La Tarte Patisserie`,
      description,
      alternates: {
        canonical: canonicalUrls.product(slug, productSlug),
      },
      openGraph: {
        title: `${title} | La Tarte Patisserie`,
        description,
        images: imageUrl ? [{ url: imageUrl }] : undefined,
        type: "website",
        locale: "en_BD",
        siteName: "La Tarte Patisserie",
        url: canonicalUrls.product(slug, productSlug),
      },
    };
  } catch (error) {
    console.error("Failed to fetch product metadata:", error);
    const { slug, productSlug } = await params;
    return {
      title: `Product - ${productSlug} | La Tarte Patisserie`,
      description: "Explore our delicious products at La Tarte Patisserie.",
      alternates: {
        canonical: canonicalUrls.product(slug, productSlug),
      },
    };
  }
}

const ProductPage = async ({
  params,
}: {
  params: Promise<{ slug: string; productSlug: string }>;
}) => {
  try {
    const { slug, productSlug } = await params;
    const { data: product } = await apiEndpoints.product(slug, productSlug);

    if (!product) {
      notFound();
    }

    const title = get(product, ["title"], "");
    const subtitle = get(product, ["subtitle"], "");
    const imageUrl = get(product, ["thumbnail", "url"], "");
    const imageFormats = get(product, ["thumbnail", "formats"], {});
    const menuName = get(product, ["menu", "name"], "Menu");
    const variants = get(product, ["variants"], []);
    const primaryVariant = variants[0] || {};

    // Use large format if available, fallback to original
    const largeFormatPath = get(imageFormats, ["large", "url"], "");
    const displayImageUrl = largeFormatPath
      ? largeFormatPath.startsWith("http")
        ? largeFormatPath
        : `${
            process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:1338"
          }${largeFormatPath}`
      : imageUrl;
    const imageWidth = get(
      imageFormats,
      ["large", "width"],
      get(product, ["thumbnail", "width"], 600)
    );
    const imageHeight = get(
      imageFormats,
      ["large", "height"],
      get(product, ["thumbnail", "height"], 600)
    );

    return (
      <div className={styles.container}>
        {/* Breadcrumb Navigation */}
        <div className={styles.breadcrumb}>
          <Link href="/" className={styles.breadcrumbLink}>
            Home
          </Link>
          <span className={styles.separator}>•</span>
          <Link href="/menu" className={styles.breadcrumbLink}>
            Menu
          </Link>
          <span className={styles.separator}>•</span>
          <Link href={`/menu/${slug}`} className={styles.breadcrumbLink}>
            {menuName}
          </Link>
          <span className={styles.separator}>•</span>
          <span className={styles.currentPage}>{title}</span>
        </div>

        {/* Main Product Content */}
        <div className={styles.productContainer}>
          {/* Product Image */}
          <div className={styles.imageSection}>
            <div className={styles.imageWrapper}>
              <Image
                src={displayImageUrl}
                alt={title}
                width={imageWidth}
                height={imageHeight}
                className={styles.productImage}
                priority
              />
            </div>
          </div>

          {/* Product Information */}
          <div className={styles.infoSection}>
            <div className={styles.productHeader}>
              <h1 className={styles.productTitle}>{title}</h1>
              {subtitle && <p className={styles.productSubtitle}>{subtitle}</p>}
            </div>

            {/* Variant Information */}
            {variants.length > 0 && (
              <div className={styles.variantSection}>
                <div className={styles.sizeInfo}>
                  <span className={styles.sizeLabel}>
                    {primaryVariant.text || primaryVariant.name}
                  </span>
                </div>
                <div className={styles.priceSection}>
                  <span className={styles.currency}>TK.</span>
                  <span className={styles.price}>{primaryVariant.price}</span>
                </div>
              </div>
            )}

            {/* Size Options (if multiple variants) */}
            {variants.length > 1 && (
              <div className={styles.sizeOptions}>
                <h3 className={styles.sectionTitle}>Available Sizes</h3>
                <div className={styles.sizeButtons}>
                  {variants.map((variant: any, index: number) => (
                    <div
                      key={variant.id || index}
                      className={styles.sizeButton}
                    >
                      <span className={styles.sizeName}>{variant.name}</span>
                      <span className={styles.sizeText}>{variant.text}</span>
                      <span className={styles.sizePrice}>
                        TK. {variant.price}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Order Section */}
            <div className={styles.orderSection}>
              <div className={styles.orderInfo}>
                <p className={styles.orderText}>
                  Ready to indulge in this delicious treat? Contact us to place
                  your order.
                </p>
              </div>

              <div className={styles.contactButtons}>
                <a href="tel:+8801929333999" className={styles.orderButton}>
                  <span className={styles.buttonIcon}>📞</span>
                  Call to Order
                </a>
                <a
                  href="https://facebook.com/latartebd"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={styles.messageButton}
                >
                  <span className={styles.buttonIcon}>💬</span>
                  Message Us
                </a>
              </div>
            </div>

            {/* Back Navigation */}
            <div className={styles.backSection}>
              <Link href={`/menu/${slug}`} className={styles.backLink}>
                ← Back to {menuName}
              </Link>
            </div>
          </div>
        </div>
      </div>
    );
  } catch (error) {
    console.error("Failed to fetch product:", error);
    notFound();
  }
};

export default ProductPage;