import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { CreditCard, LockKeyhole, PackageCheck, Settings } from "lucide-react";
import { AddToCartButton } from "@/components/AddToCartButton";
import { ProductCard } from "@/components/ProductCard";
import { ProductVisual } from "@/components/ProductVisual";
import { prisma } from "@/lib/prisma";
import { currency, displayPrice } from "@/lib/utils";

function formatValue(value?: string | null) {
  if (!value) return "Listed on product";
  return value
    .toString()
    .replaceAll("_", " ")
    .toLowerCase()
    .replace(/\b\w/g, (char) => char.toUpperCase());
}

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const product = await prisma.product.findFirst({ where: { slug: params.slug, itemKind: "PHYSICAL_BULLION", isPublicProduct: true } }).catch(() => null);
  if (!product) return {};
  const description = product.seoDescription || product.shortDescription || product.description || "";
  return {
    title: product.seoTitle || `Buy ${product.name} Online`,
    description: description.slice(0, 150)
  };
}

export default async function ProductDetailPage({ params }: { params: { slug: string } }) {
  const product = await prisma.product.findFirst({ where: { slug: params.slug, itemKind: "PHYSICAL_BULLION", isPublicProduct: true }, include: { category: true } }).catch(() => null);
  if (!product) notFound();
  const related = await prisma.product.findMany({ where: { metalType: product.metalType, itemKind: "PHYSICAL_BULLION", isPublicProduct: true, NOT: { id: product.id } }, take: 4 }).catch(() => []);
  const price = displayPrice(product);
  const stock = product.stockStatus || product.inventoryStatus || "IN_STOCK";
  const brand = product.brandMint || product.mintBrand || "Bullion";
  const productDescription = product.description || product.shortDescription || "Product details are being reviewed by our team.";
  const stockLabel = stock === "LOW_STOCK" ? "Low Stock" : stock === "OUT_OF_STOCK" ? "Out of Stock" : "In Stock";

  return (
    <main className="storefront-page product-detail-page">
      <section className="container-grid py-6 md:py-8">
        <div className="text-xs font-black uppercase tracking-[0.14em] text-[#5f5a52]">
          <Link href="/" className="hover:text-[#7A5310]">Home</Link>
          <span className="px-2 text-[#b58b24]">/</span>
          <Link href="/products" className="hover:text-[#7A5310]">Products</Link>
          <span className="px-2 text-[#b58b24]">/</span>
          <span className="text-[#1B1B1B]">{product.name}</span>
        </div>

        <div className="mt-5 grid gap-8 lg:grid-cols-[minmax(0,1fr)_460px] lg:items-start">
          <div className="product-detail-gallery bg-white p-4">
            <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#dfd0b8] pb-3">
              <div>
                <p className="text-xs font-black uppercase tracking-[0.16em] text-[#7a5310]">Bullion product</p>
                <h2 className="mt-1 text-lg font-black text-[#171717]">Product Image</h2>
              </div>
              <div className="flex flex-wrap gap-2">
                <span className={stock === "OUT_OF_STOCK" ? "product-badge product-badge-muted" : stock === "LOW_STOCK" ? "product-badge product-badge-warning" : "product-badge product-badge-stock"}>{stockLabel}</span>
                {product.isIraEligible ? <span className="product-badge product-badge-ira">IRA</span> : null}
              </div>
            </div>
            <div className="product-detail-image-shell mt-4">
              <ProductVisual product={product} className="min-h-[430px]" />
            </div>
            <div className="mt-4 grid gap-3 border-t border-[#dfd0b8] pt-4 text-sm text-[#5f5a52] sm:grid-cols-3">
              <div className="product-detail-spec-tile"><strong>Metal</strong>{formatValue(product.metalType)}</div>
              <div className="product-detail-spec-tile"><strong>Weight</strong>{product.weight || "Listed on product"}</div>
              <div className="product-detail-spec-tile"><strong>Purity</strong>{product.karat || product.purity || "Listed on product"}</div>
            </div>
          </div>

          <aside className="product-detail-buybox product-detail-purchase h-fit bg-white p-5 lg:sticky lg:top-44">
            <div className="flex flex-wrap gap-2 pt-1">
              <span className={stock === "OUT_OF_STOCK" ? "product-badge product-badge-muted" : stock === "LOW_STOCK" ? "product-badge product-badge-warning" : "product-badge product-badge-stock"}>{stockLabel}</span>
              {product.isIraEligible ? <span className="product-badge product-badge-ira">IRA Eligible</span> : null}
              <span className="product-badge product-badge-muted">Price Updated</span>
            </div>
            <h1 className="mt-4 text-3xl font-black leading-tight text-[#171717]">{product.name}</h1>
            <p className="mt-2 text-sm font-bold text-[#5f5a52]">{product.weight || "Weight listed"} / {product.purity || product.karat || "Purity listed"} / {brand}</p>
            <div className="product-detail-price-panel price-panel mt-5">
              <div className="text-xs font-black uppercase tracking-[0.1em] text-[#5f5a52]">As low as</div>
              <div className="price-text mt-1 text-4xl">{currency(price)}</div>
              <div className="mt-1 text-xs font-bold text-[#5f5a52]">Price updated</div>
            </div>
            <form className="mt-5 grid gap-3">
              <label className="max-w-[160px] text-xs font-black uppercase tracking-[0.12em] text-[#5f5a52]">Quantity<input className="mt-2 border-[#d8c98f] bg-[#fffdf8] text-center font-black" type="number" min={1} defaultValue={1} /></label>
              <AddToCartButton productId={product.id} disabled={stock === "OUT_OF_STOCK"} />
            </form>
            <div className="mt-3 grid grid-cols-2 gap-2">
              <Link href="/support" className="outline-button min-h-10 text-sm">Ask Support</Link>
              <Link href="/cart" className="outline-button min-h-10 text-sm">View Cart</Link>
            </div>
            <div className="mt-4 grid gap-2 rounded border border-[#dfd0b8] bg-[#fffdf8] p-4 text-sm font-bold text-[#5f5a52]">
              <div className="flex items-center gap-2"><LockKeyhole size={17} className="text-[#0F766E]" /> Secure checkout</div>
              <div className="flex items-center gap-2"><CreditCard size={17} className="text-[#0F766E]" /> Payment options available</div>
              <div className="flex items-center gap-2"><Settings size={17} className="text-[#b7791f]" /> Manual price update</div>
              <div className="flex items-center gap-2"><PackageCheck size={17} className="text-[#0F766E]" /> Fulfillment review</div>
            </div>
            <div className="product-detail-trust-box">
              <h2>Why buy through ELIT?</h2>
              <div>
                <span><LockKeyhole size={16} /> Secure checkout</span>
                <span><Settings size={16} /> Manual price update</span>
                <span><PackageCheck size={16} /> Fulfillment review</span>
                <span><CreditCard size={16} /> Support available</span>
              </div>
            </div>
            <p className="mt-3 border-t border-[#dfd0b8] pt-3 text-xs leading-5 text-[#5f5a52]">
              Prices may change without notice. This website does not provide investment advice.
            </p>
          </aside>
        </div>

        <div className="mt-8 grid gap-6">
          <div className="product-detail-info-card product-detail-specs bg-white p-5">
            <h2 className="product-detail-card-title">Product Specifications</h2>
            <div className="mt-4 grid gap-0 overflow-hidden rounded border border-[#dfd0b8] md:grid-cols-2">
              {[
                ["Metal Type", formatValue(product.metalType)],
                ["Weight", product.weight],
                ["Purity", product.karat || product.purity],
                ["Product Type", formatValue(product.productType)],
                ["Brand / Mint", brand],
                ["Stock Status", stockLabel]
              ].map(([label, value]) => (
                <div key={label} className="grid border-b border-[#dfd0b8] bg-white text-sm last:border-b-0 sm:grid-cols-[170px_1fr] md:last:border-b">
                  <div className="bg-[#fff8ea] p-3 font-black text-[#171717]">{label}</div>
                  <div className="p-3 text-[#5f5a52]">{value || "Listed on product"}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="product-detail-info-card bg-white p-5">
            <h2 className="product-detail-card-title">Description</h2>
            <p className="mt-3 leading-7 text-[#5f5a52]">{productDescription}</p>
          </div>
          <div className="product-detail-info-card bg-white p-5">
            <h2 className="product-detail-card-title">Shipping & Fulfillment</h2>
            <p className="mt-3 leading-7 text-[#5f5a52]">Orders are reviewed by our fulfillment team after checkout. Final fulfillment details are coordinated after order confirmation.</p>
          </div>
          <div className="product-detail-info-card bg-white p-5">
            <h2 className="product-detail-card-title">Product FAQ</h2>
            {[
              ["Is this price live spot pricing?", "No. Product prices are updated manually by our team."],
              ["Who fulfills the order?", "Fulfillment is reviewed and coordinated after order confirmation."],
              ["Does this page provide investment advice?", "No. This product page does not provide investment advice."]
            ].map(([q, a]) => (
              <details key={q} className="border-b border-[#dfd0b8] py-3 last:border-0">
                <summary className="cursor-pointer font-black">{q}</summary>
                <p className="mt-2 text-sm text-[#5f5a52]">{a}</p>
              </details>
            ))}
          </div>
        </div>

        <section className="mt-10 rounded-lg border border-[#dfd0b8] bg-[#fff8ea] p-4 md:p-5">
          <div className="mb-5 flex flex-wrap items-end justify-between gap-3">
            <div>
              <p className="text-xs font-black uppercase tracking-[0.16em] text-[#7a5310]">More bullion options</p>
              <h2 className="mt-2 text-2xl font-black text-[#171717]">Related Products</h2>
            </div>
            <Link href="/products" className="outline-button min-h-10 text-sm">View all</Link>
          </div>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">{related.map((item) => <ProductCard key={item.id} product={item} />)}</div>
        </section>
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "Product", name: product.name, offers: { "@type": "Offer", price: String(price), priceCurrency: "USD" } }) }} />
      </section>
    </main>
  );
}