import Link from "next/link";
import Image from "next/image";
import { AddToCartButton } from "../../components/AddToCartButton";
import { Reveal } from "../../components/Reveal";
import { RichText } from "../../components/RichText";
import { ProductName } from "../../components/ProductName";
import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
import { formatPrice, discountPercent } from "../../lib/format";
import { effectiveTaxRate } from "../../lib/cartTotals";

// Provisional scaffold — naming/design concept for this product is still
// undecided (parked 2026-08-24, see memory: project_tasse_die_pause_product).
// Headline reads product.name directly from Payload instead of a hardcoded
// string like every other bespoke page here (TodoKartenHero.tsx, der-
// alltagsstift/Hero.tsx) — so renaming in the CMS updates this page with no
// code change. No tagline/checklist/benefit copy yet; those depend on
// whatever concept the name ends up carrying, which isn't decided.
export async function Hero() {
  const [product, shipping, defaultTaxRate, kleinunternehmer] = await Promise.all([
    getProductBySlug("tasse-die-pause"),
    getShippingSettings(),
    getDefaultTaxRatePercent(),
    getKleinunternehmer(),
  ]);
  const discount = product ? discountPercent(product.price, product.compareAtPrice) : null;
  const taxRate = product ? effectiveTaxRate(product, defaultTaxRate) : null;
  const anyLowStock = product
    ? product.active && (product.variants.length > 0 ? product.variants.some((v) => v.lowStock) : product.lowStock)
    : false;

  return (
    <section className="bg-bg-base w-full overflow-hidden">
      <div className="flex flex-col lg:grid lg:grid-cols-12 gap-8 lg:gap-[var(--layout-grid-gap)] pt-10 md:pt-12">
        <Reveal className="order-1 lg:order-none lg:col-span-5 flex flex-col gap-6 items-start pl-[var(--layout-padding-x)] pr-10 lg:pr-0">
          <p className="flex items-center gap-2 text-body-sm text-text-muted">
            <Link href="/" className="hover:text-brand transition-colors">
              Startseite
            </Link>
            <span>›</span>
            <Link href="/#werkzeuge" className="hover:text-brand transition-colors">
              Werkzeuge
            </Link>
            <span>›</span>
            <span className="text-text-primary">{product ? <ProductName name={product.name} /> : "Tasse"}</span>
          </p>

          <div className="flex flex-col gap-6 items-start w-full flex-1 lg:justify-center">
            <div className="flex flex-col gap-2 items-start w-full">
              <p
                className="font-semibold text-h-page text-text-primary"
                style={{ fontFamily: "var(--font-playfair)" }}
              >
                {product ? <ProductName name={product.name} /> : "Tasse"}
              </p>
              {product?.subline && (
                <p className="font-semibold text-h3 text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
                  {product.subline}
                </p>
              )}
            </div>

            {product?.description ? <RichText content={product.description} /> : null}

            <div className="flex flex-col gap-1 items-start">
              {product && (
                <div className="flex gap-2 items-baseline">
                  {discount !== null && (
                    <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
                  )}
                  <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
                  <p className="text-label text-text-muted">
                    {kleinunternehmer
                      ? product.noShippingCost
                        ? "Keine Versandkosten"
                        : "zzgl. Versand"
                      : `inkl. ${taxRate}% MwSt. ${product.noShippingCost ? "– keine Versandkosten" : "zzgl. Versand"}`}
                  </p>
                </div>
              )}
              {!product?.noShippingCost && (
                <p className="text-label text-text-muted">
                  Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
                </p>
              )}
              {anyLowStock && <p className="text-label font-bold text-warning">Nur noch wenige verfügbar</p>}
            </div>

            {product && (
              <AddToCartButton
                label="In den Warenkorb"
                productId={product.id}
                numericId={product.numericId}
                outOfStock={!product.active || product.outOfStock}
                maxQty={product.maxQty}
                variants={product.active ? product.variants : []}
              />
            )}
          </div>
        </Reveal>

        {product && (
          <Reveal className="order-2 lg:order-none lg:col-span-7 flex lg:items-center" delay={0.15}>
            <div className="relative w-full max-w-[28rem] mx-auto lg:mx-0 aspect-[4/3.1] rounded-md overflow-hidden border border-border bg-bg-base">
              <Image src={product.image} alt={product.name} fill sizes="(min-width: 1024px) 45vw, 100vw" className="object-cover" />
            </div>
          </Reveal>
        )}
      </div>
    </section>
  );
}
