import Image from "next/image";
import Link from "next/link";
import { PageShell } from "../../components";
import { CUSTOMER_URL, getStoreItem, getStoreItems, getTenant } from "../../meshkee";
import { pageMetadata, productCanonicalPath } from "../../seo";
import StoreActions from "../../StoreActions";

export async function generateMetadata({ params }) {
  const { id } = await params;
  const item = await getStoreItem(id);
  const description = item.description.replace(/<[^>]*>/g, "") || `خرید ${item.title} از آریا شبکه پیشرو همراه با مشاوره تخصصی و اعلام موجودی.`;
  return pageMetadata({
    title: item.title,
    description: description.slice(0, 160),
    path: productCanonicalPath(item),
    image: item.image
  });
}

export default async function StoreDetailPage({ params }) {
  const { id } = await params;
  const [{ id: businessId }, item, related] = await Promise.all([
    getTenant(),
    getStoreItem(id),
    getStoreItems({ pageSize: 4 })
  ]);
  const similar = related.items.filter((relatedItem) => relatedItem.id !== item.id).slice(0, 4);
  const specs = Array.isArray(item.technicalValues) ? item.technicalValues : [];

  return (
    <PageShell>
      <section className="section product-detail">
        <div className="container detail-grid">
          <div className="gallery">
            <a className="gallery-main zoom-frame" href={item.image}>
              <Image src={item.image} alt={item.title} fill sizes="(max-width: 900px) 100vw, 50vw" />
            </a>
            <div className="gallery-thumbs">
              {item.images.slice(0, 4).map((image) => (
                <a href={image} key={image}>
                  <Image src={image} alt="" width={92} height={92} />
                </a>
              ))}
            </div>
          </div>
          <div className="detail-copy">
            <span>{item.category}</span>
            <h1>{item.title}</h1>
            <p>{item.description.replace(/<[^>]*>/g, "") || "برای دریافت مشاوره تخصصی و اعلام موجودی با کارشناسان فروش تماس بگیرید."}</p>
            <strong>{item.price ? `${item.price} ${item.currency}` : "تماس با فروشگاه"}</strong>
            <StoreActions item={item} businessId={businessId} />
          </div>
        </div>
      </section>
      <section className="section detail-tabs-section">
        <div className="container detail-tabs">
          <details open>
            <summary>توضیحات</summary>
            <div dangerouslySetInnerHTML={{ __html: item.description || "<p>توضیحات این محصول از API فروشگاه یا محتوای جایگزین نمایش داده می شود.</p>" }} />
          </details>
          <details>
            <summary>اطلاعات فنی</summary>
            {specs.length ? (
              <div className="spec-table">
                {specs.map((spec, index) => (
                  <p key={`${spec.fieldId || spec.label || index}`}>
                    <span>{spec.label || spec.fieldName || spec.fieldId || `ویژگی ${index + 1}`}</span>
                    <strong>{spec.value || spec.textValue || spec.optionLabel || spec.optionId || "-"}</strong>
                  </p>
                ))}
              </div>
            ) : <p>اطلاعات فنی برای این محصول ثبت نشده است.</p>}
          </details>
          <details>
            <summary>نظرات</summary>
            <div className="login-comment-box">
              <p>برای ثبت نظر درباره این محصول وارد حساب کاربری شوید.</p>
              <a href={CUSTOMER_URL}>ورود به حساب کاربری</a>
            </div>
          </details>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="section-title"><span>RELATED</span><h2>محصولات مشابه</h2></div>
          <div className="product-grid store-grid">
            {similar.map((relatedItem) => (
              <Link className="product-card" href={`/store/${relatedItem.id}`} key={relatedItem.id}>
                <div className="product-image">
                  <Image src={relatedItem.image} alt={relatedItem.title} fill sizes="(max-width: 800px) 50vw, 25vw" />
                </div>
                <span>{relatedItem.category}</span>
                <h3>{relatedItem.title}</h3>
                <strong>{relatedItem.price ? `${relatedItem.price} ${relatedItem.currency}` : "تماس با فروشگاه"}</strong>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </PageShell>
  );
}