"use client";

import Link from "next/link";
import { ArrowLeft, BadgeCheck, Box, PackageOpen, Plus, ShieldCheck, Sparkles, Truck } from "lucide-react";
import { useState } from "react";
import { usePreferences, useToast } from "@/components/providers/app-providers";
import { useStore } from "./store-provider";
import type { StoreProduct } from "./store-types";

const productKeys = ["SKU-PROD-001", "SKU-PROD-002", "SKU-PROD-003"] as const;

function formatMoney(value: string, locale: "ar" | "en", currencyLabel: string) {
  return `${new Intl.NumberFormat(locale === "ar" ? "ar-EG" : "en-EG", { maximumFractionDigits: 2 }).format(Number(value))} ${currencyLabel}`;
}

export function ProductCatalog({ products }: { products: StoreProduct[] }) {
  const { dictionary: t, locale } = usePreferences();
  const notify = useToast();
  const { addItem, href } = useStore();
  const [recentlyAdded, setRecentlyAdded] = useState<string | null>(null);

  function add(product: StoreProduct) {
    addItem(product.sku);
    setRecentlyAdded(product.sku);
    notify(`${product.nameAr} — ${t.store.catalog.added}`, "success");
    window.setTimeout(() => setRecentlyAdded((current) => current === product.sku ? null : current), 1_400);
  }

  return (
    <>
      <section className="store-hero">
        <div className="store-hero-copy">
          <p className="store-kicker"><Sparkles size={15} />{t.store.hero.eyebrow}</p>
          <h1>{t.store.hero.title}</h1>
          <p>{t.store.hero.description}</p>
          <Link className="store-primary-action" href="#products">
            {t.store.hero.shop}<ArrowLeft className="rtl-arrow" size={18} />
          </Link>
          <div className="store-benefits">
            <span><ShieldCheck size={18} />{t.store.hero.security}</span>
            <span><Truck size={18} />{t.store.hero.shipping}</span>
            <span><BadgeCheck size={18} />{t.store.hero.confirmation}</span>
          </div>
        </div>
        <div className="store-hero-visual" aria-hidden="true">
          <span className="hero-orbit orbit-one" />
          <span className="hero-orbit orbit-two" />
          <div className="hero-package"><Box size={78} strokeWidth={1.25} /><b>COD</b></div>
          <span className="hero-status"><i />{t.store.catalog.available}</span>
        </div>
      </section>

      <section className="store-products-section" id="products">
        <div className="store-section-heading">
          <p>{t.store.catalog.eyebrow}</p>
          <h2>{t.store.catalog.title}</h2>
          <span>{t.store.catalog.description}</span>
        </div>
        <div className="store-product-grid">
          {products.map((product, index) => {
            const out = product.available <= 0;
            const low = !out && product.available <= product.lowStockThreshold;
            const descriptionKey = productKeys.includes(product.sku as typeof productKeys[number])
              ? product.sku as typeof productKeys[number]
              : "SKU-PROD-001";
            return (
              <article className="store-product-card" key={product.sku}>
                <div className={`store-product-art art-${(index % 3) + 1}`}>
                  <PackageOpen size={62} strokeWidth={1.2} />
                  <span className="mono" dir="ltr">{product.sku}</span>
                </div>
                <div className="store-product-body">
                  <span className={`store-stock ${out ? "out" : low ? "low" : "available"}`}>
                    <i />{out ? t.store.catalog.outOfStock : low ? t.store.catalog.lowStock : t.store.catalog.available}
                  </span>
                  <h3>{locale === "ar" ? product.nameAr : product.nameEn}</h3>
                  <p>{t.store.products[descriptionKey].description}</p>
                  <div className="store-product-footer">
                    <strong><bdi dir="ltr">{formatMoney(product.price, locale, t.store.catalog.currency)}</bdi></strong>
                    <button disabled={out} onClick={() => add(product)} type="button">
                      <Plus size={18} />{recentlyAdded === product.sku ? t.store.catalog.added : t.store.catalog.add}
                    </button>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
        {products.length === 0 ? (
          <div className="store-empty"><PackageOpen size={42} /><p>{t.store.cart.empty}</p><Link href={href()}>{t.store.navigation.home}</Link></div>
        ) : null}
      </section>
    </>
  );
}