// Product detail — gallery + info column + tabs + related products.

const { useI18n, fmtNum, fmtPrice } = window.RBI18n;
const { Reveal } = window.RBAnim;
const { ProductImg, Swatch } = window.RBImg;
const { ProductCard } = window.RBHome;
const { IconChevL, IconChevR, IconStar, IconHeart, IconBag, IconTruck,
        IconReturn, IconShield, IconRuler, IconMinus, IconPlus, IconCheck } = window.RBIcons;

const ProductPage = ({ productId }) => {
  const { t, lang } = useI18n();
  const p = window.RB.PRODUCTS.find(x => x.id === productId) || window.RB.PRODUCTS[0];
  const [mainIdx, setMainIdx] = React.useState(0);
  const [size, setSize] = React.useState('M');
  const [color, setColor] = React.useState('rose');
  const [qty, setQty] = React.useState(1);
  const [tab, setTab] = React.useState('desc');
  const [added, setAdded] = React.useState(false);

  React.useEffect(() => { setMainIdx(0); }, [productId]);
  // Color ↔ image linking
  const productColors = p.colors || [];
  const setColorFromIdx = (idx) => {
    const c = productColors[idx];
    if (c) setColor(c.id);
  };
  const setIdxFromColor = (cid) => {
    const i = productColors.findIndex(c => c.id === cid);
    if (i >= 0) setMainIdx(i);
  };
  React.useEffect(() => {
    if (productColors[0]) setColor(productColors[0].id);
  }, [productId]);

  const gallery = p.images || [p.img.a, p.img.b, p.img.a, p.img.b];

  const onAdd = () => {
    window.RBCart.add(p, qty);
    setAdded(true);
    setTimeout(() => setAdded(false), 1800);
  };

  const cat = window.RB.CATEGORIES.find(c => c.id === p.cat);
  const related = window.RB.PRODUCTS.filter(x => x.cat === p.cat && x.id !== p.id).slice(0, 4);
  if (related.length < 4) related.push(...window.RB.PRODUCTS.filter(x => !related.includes(x) && x.id !== p.id).slice(0, 4 - related.length));

  return (
    <main className="bg-paper page-fade">
      <div className="max-w-[1480px] mx-auto px-5 md:px-10 pt-6">
        <nav className="text-xs text-ink-mute flex items-center gap-2">
          <a href="#" onClick={(e)=>{e.preventDefault();window.RBNav.go('home')}} className="hover:text-ink">{t('shop.crumb_home')}</a>
          <span>/</span>
          <a href="#" onClick={(e)=>{e.preventDefault();window.RBNav.go('shop', {cat: p.cat})}} className="hover:text-ink">{cat?.[lang]}</a>
          <span>/</span>
          <span className="text-ink truncate">{p[lang]}</span>
        </nav>
      </div>

      <div className="max-w-[1480px] mx-auto px-5 md:px-10 py-6 md:py-10">
        <div className="grid md:grid-cols-2 gap-8 md:gap-14">

          <div>
            <div className="grid md:grid-cols-[80px_1fr] gap-3 md:gap-4">
              <div className="hidden md:flex flex-col gap-2 order-1">
                {gallery.map((src, i) => (
                  <button key={i} onClick={() => { setMainIdx(i); setColorFromIdx(i); }}
                          className={`relative ar-portrait w-[80px] overflow-hidden border-2 transition
                                      ${mainIdx===i ? 'border-ink' : 'border-transparent opacity-65 hover:opacity-100'}`}>
                    <img src={src} alt="" loading="lazy" className="w-full h-full object-cover"/>
                  </button>
                ))}
              </div>

              <div className="order-2 relative">
                <Reveal variant="zoom" className="relative ar-portrait overflow-hidden bg-paper-warm">
                  <img src={gallery[mainIdx]} alt={p[lang]} className="w-full h-full object-cover img-scale gpu"/>
                  {p.badge && (
                    <span className={`absolute top-4 start-4 text-[10px] tracking-[0.25em] uppercase px-3 py-1.5
                                      ${p.badge==='sale' ? 'bg-rose-500 text-white' :
                                        p.badge==='new'  ? 'bg-ink text-paper' :
                                        'bg-paper text-ink border hairline'}`}>
                      {t(`shop.${({new:'new_badge',sale:'sale_badge',limited:'limited',exclusive:'exclusive',best:'best'})[p.badge] || p.badge}`)}
                    </span>
                  )}
                  <button onClick={() => { const n=(mainIdx+1)%gallery.length; setMainIdx(n); setColorFromIdx(n); }}
                          className="absolute end-3 top-1/2 -translate-y-1/2 bg-paper/95 backdrop-blur p-2.5 hover:bg-paper">
                    <IconChevR size={16}/>
                  </button>
                  <button onClick={() => { const n=(mainIdx-1+gallery.length)%gallery.length; setMainIdx(n); setColorFromIdx(n); }}
                          className="absolute start-3 top-1/2 -translate-y-1/2 bg-paper/95 backdrop-blur p-2.5 hover:bg-paper">
                    <IconChevL size={16}/>
                  </button>
                </Reveal>

                <div className="md:hidden flex gap-2 mt-2">
                  {gallery.map((src, i) => (
                    <button key={i} onClick={() => { setMainIdx(i); setColorFromIdx(i); }}
                            className={`flex-1 relative ar-portrait overflow-hidden border-2
                                        ${mainIdx===i ? 'border-ink' : 'border-transparent opacity-65'}`}>
                      <img src={src} alt="" loading="lazy" className="w-full h-full object-cover"/>
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div>
            <Reveal>
              <p className="ornament text-[10px] tracking-[0.4em] uppercase mb-3">{cat?.tag}</p>
              <h1 className="ff-serif text-3xl md:text-5xl text-ink leading-[1.05] mb-4">{p[lang]}</h1>
            </Reveal>

            <Reveal delay={100}>
              <div className="flex items-center gap-4 mb-6">
                <div className="flex gap-1">
                  {[1,2,3,4,5].map(s => <IconStar key={s} size={13} className="text-rose-400 fill-current"/>)}
                </div>
                <span className="text-xs text-ink-mute ltr-nums">{fmtNum(42, lang)} {t('shop.rate_n')}</span>
                <span className="text-xs text-emerald-700 flex items-center gap-1"><IconCheck size={12}/> {t('shop.in_stock')}</span>
              </div>
            </Reveal>

            <Reveal delay={150}>
              <div className="flex items-baseline gap-3 mb-7 ltr-nums">
                <span className="ff-serif text-4xl text-ink">{fmtPrice(p.price, lang)}</span>
                {p.old && (
                  <>
                    <span className="text-ink-mute line-through text-base">{fmtPrice(p.old, lang)}</span>
                    <span className="text-xs bg-rose-50 text-rose-700 px-2 py-0.5">
                      {t('shop.save')} {fmtPrice(p.old - p.price, lang)}
                    </span>
                  </>
                )}
              </div>
            </Reveal>

            <Reveal delay={200}>
              <p className="text-ink-soft text-sm leading-loose mb-8">
                {lang === 'ar'
                  ? 'قطعة استثنائية تجمع بين الأناقة الكلاسيكية واللمسة العصرية. مصنوعة من أرقى الخامات المختارة بعناية فائقة، تُبرز جمالكِ في إطلالتك اليومية والمناسبات الخاصة.'
                  : 'An exceptional piece that bridges timeless elegance with modern character. Crafted from carefully chosen, refined fabrics — designed to honor your everyday and your special moments.'}
              </p>
            </Reveal>

            <Reveal delay={250}>
              <div className="mb-6">
                <div className="flex items-center justify-between mb-3">
                  <span className="text-[11px] tracking-[0.3em] text-ink uppercase">
                    {t('shop.color')}: <span className="font-medium normal-case tracking-normal ms-1">{productColors.find(c=>c.id===color)?.[lang]}</span>
                  </span>
                </div>
                <div className="flex gap-3">
                  {productColors.map((c, i) => (
                    <button key={c.id} onClick={() => { setColor(c.id); setIdxFromColor(c.id); }}
                            className="p-0.5 rounded-full transition-transform hover:scale-110" title={c[lang]}>
                      <Swatch hex={c.hex} size={28} ring={color===c.id}/>
                    </button>
                  ))}
                </div>
              </div>
            </Reveal>

            <Reveal delay={300}>
              <div className="mb-8">
                <div className="flex items-center justify-between mb-3">
                  <span className="text-[11px] tracking-[0.3em] text-ink uppercase">{t('shop.size')}</span>
                  <button className="text-xs text-ink-mute hover:text-ink flex items-center gap-1 underline-grow">
                    <IconRuler size={12}/> {t('shop.size_guide')}
                  </button>
                </div>
                <div className="grid grid-cols-5 gap-2">
                  {window.RB.SIZE_OPTS.map(s => (
                    <button key={s} onClick={() => setSize(s)}
                            className={`py-3.5 text-sm border transition
                                        ${size===s ? 'border-ink bg-ink text-paper' : 'border-ink/15 hover:border-ink text-ink'}`}>
                      {s}
                    </button>
                  ))}
                </div>
              </div>
            </Reveal>

            <Reveal delay={350}>
              <div className="flex gap-3 mb-4">
                <div className="flex items-center border hairline">
                  <button onClick={() => setQty(Math.max(1, qty-1))} className="px-3 py-3.5 hover:bg-paper-warm"><IconMinus size={14}/></button>
                  <span className="w-10 text-center text-sm ltr-nums">{fmtNum(qty, lang)}</span>
                  <button onClick={() => setQty(qty+1)} className="px-3 py-3.5 hover:bg-paper-warm"><IconPlus size={14}/></button>
                </div>
                <button onClick={onAdd}
                        className={`flex-1 py-3.5 text-[11px] tracking-[0.3em] uppercase transition-colors flex items-center justify-center gap-2 duration-500
                                    ${added ? 'bg-emerald-600 text-white' : 'bg-ink text-paper hover:bg-rose-500'}`}>
                  {added ? <><IconCheck size={16}/> {lang==='ar'?'تمت الإضافة':'Added!'}</> : <><IconBag size={16}/> {t('shop.add')}</>}
                </button>
                <button className="px-4 border hairline hover:border-rose-400 hover:text-rose-500 transition" aria-label="wishlist">
                  <IconHeart size={18}/>
                </button>
              </div>

              <button className="w-full border border-ink text-ink py-3.5 text-[11px] tracking-[0.3em] uppercase hover:bg-ink hover:text-paper transition-colors duration-500 mb-8">
                {t('shop.buy_now')}
              </button>
            </Reveal>

            <Reveal delay={400}>
              <div className="border hairline divide-y divide-ink/10 text-sm">
                {[
                  { i:IconTruck,  ar:['شحن سريع داخل فلسطين','٢-٣ أيام عمل — مجاني فوق ٢٥٠ ₪'], en:['Express shipping within Palestine','2-3 business days — free over 250 ₪'] },
                  { i:IconReturn, ar:['استبدال خلال ١٤ يوم','بحالة المنتج الأصلية مع الفاتورة'],  en:['Returns within 14 days','In original condition with receipt'] },
                  { i:IconShield, ar:['دفع آمن','فيزا، ماستركارد، كاش عند الاستلام'],            en:['Secure payment','Visa, Mastercard, cash on delivery'] }
                ].map((f, i) => (
                  <div key={i} className="flex items-start gap-3 p-4">
                    <f.i size={20} className="text-rose-500 shrink-0 mt-0.5" strokeWidth={1.2}/>
                    <div>
                      <p className="text-sm font-medium text-ink">{lang==='ar'?f.ar[0]:f.en[0]}</p>
                      <p className="text-xs text-ink-mute">{lang==='ar'?f.ar[1]:f.en[1]}</p>
                    </div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>

        {/* Tabs */}
        <div className="mt-16">
          <div className="border-b hairline flex gap-1 mb-8 overflow-x-auto no-scrollbar">
            {[
              { id:'desc',   l: t('shop.desc_tab') },
              { id:'spec',   l: t('shop.spec_tab') },
              { id:'size',   l: t('shop.size_tab') },
              { id:'rev',    l: `${t('shop.rev_tab')} (${fmtNum(42, lang)})` }
            ].map(tt => (
              <button key={tt.id} onClick={() => setTab(tt.id)}
                      className={`px-6 py-3.5 text-[12px] tracking-[0.2em] uppercase whitespace-nowrap border-b-2 -mb-px transition
                                  ${tab===tt.id ? 'border-ink text-ink' : 'border-transparent text-ink-mute hover:text-ink'}`}>
                {tt.l}
              </button>
            ))}
          </div>

          <div className="max-w-3xl text-ink-soft text-sm leading-loose">
            {tab === 'desc' && (
              <div className="space-y-4">
                <p>{lang==='ar'?'قطعة مختارة بعناية فائقة من مجموعتنا الموسمية، تجمع بين الأناقة العصرية واللمسة الكلاسيكية الخالدة.':'A meticulously curated piece from our seasonal collection that bridges modern character with timeless classicism.'}</p>
                <p>{lang==='ar'?'صُمّمت لتُبرز جمالكِ في كل المناسبات — من اليوم العادي إلى السهرات المميزة.':'Designed to honor your beauty across every occasion — from the everyday to the most memorable evenings.'}</p>
                <ul className="list-disc ps-5 space-y-1.5">
                  <li>{lang==='ar'?'خامة فاخرة مريحة طوال اليوم':'Luxurious fabric, comfortable all day'}</li>
                  <li>{lang==='ar'?'قصّة عصرية تليق بمختلف أنواع الجسم':'Modern cut flattering across body shapes'}</li>
                  <li>{lang==='ar'?'متوفر بعدة ألوان ومقاسات':'Available in several colors and sizes'}</li>
                  <li>{lang==='ar'?'سهل التنسيق مع باقي القطع':'Easy to style with the rest of your wardrobe'}</li>
                </ul>
              </div>
            )}
            {tab === 'spec' && (
              <table className="w-full text-sm">
                <tbody className="divide-y divide-ink/10">
                  {[
                    [lang==='ar'?'الخامة':'Fabric', lang==='ar'?'٩٥٪ بوليستر — ٥٪ إيلاستان':'95% polyester — 5% elastane'],
                    [lang==='ar'?'الموسم':'Season', lang==='ar'?'صيف ٢٠٢٦':'Summer 2026'],
                    [lang==='ar'?'البلد':'Origin', lang==='ar'?'مصنوع في تركيا':'Made in Turkey'],
                    [lang==='ar'?'الغسيل':'Care',   lang==='ar'?'غسيل يدوي بماء بارد':'Hand wash cold'],
                    [lang==='ar'?'طول القطعة':'Length', lang==='ar'?'١٠٥ سم (مقاس M)':'105 cm (size M)']
                  ].map(([k,v]) => (
                    <tr key={k}>
                      <td className="py-3 ps-4 text-ink-mute w-1/3">{k}</td>
                      <td className="py-3 text-ink">{v}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
            {tab === 'size' && (
              <table className="w-full text-sm border hairline">
                <thead className="bg-paper-warm">
                  <tr className="text-xs">
                    <th className="py-3 px-3 text-start font-medium">{t('shop.size')}</th>
                    <th className="py-3 px-3 text-start font-medium">{lang==='ar'?'الصدر (سم)':'Bust (cm)'}</th>
                    <th className="py-3 px-3 text-start font-medium">{lang==='ar'?'الخصر (سم)':'Waist (cm)'}</th>
                    <th className="py-3 px-3 text-start font-medium">{lang==='ar'?'الأرداف (سم)':'Hips (cm)'}</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-ink/10 ltr-nums">
                  {[['XS','82','62','88'],['S','86','66','92'],['M','90','70','96'],['L','96','76','102'],['XL','102','82','108']].map(r => (
                    <tr key={r[0]}>{r.map((c,i) => <td key={i} className="py-3 px-3">{i?fmtNum(c,lang):c}</td>)}</tr>
                  ))}
                </tbody>
              </table>
            )}
            {tab === 'rev' && (
              <div className="space-y-5">
                {(lang==='ar'?[
                  { n:'سارة م.', r:5, t:'القطعة فوق التوقعات، التوصيل سريع والتغليف رائع.' },
                  { n:'ليلى ع.', r:5, t:'الخامة ممتازة والمقاس مظبوط. هطلب مرة ثانية أكيد.' },
                  { n:'دانا ك.', r:4, t:'حلوة بس اللون أغمق شوي من الصورة. عموماً راضية.' }
                ]:[
                  { n:'Sarah M.', r:5, t:'The piece exceeded my expectations, delivery was fast and packaging beautiful.' },
                  { n:'Layla A.', r:5, t:'Excellent fabric and the size is just right. I will definitely order again.' },
                  { n:'Dana K.',  r:4, t:'Lovely, though the color is slightly darker than in the photo. Overall satisfied.' }
                ]).map((r, i) => (
                  <div key={i} className="border hairline p-6">
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-medium text-ink">{r.n}</span>
                      <div className="flex gap-0.5">
                        {[1,2,3,4,5].map(s => <IconStar key={s} size={12} className={s<=r.r ? 'text-rose-400 fill-current' : 'text-ink/15'}/>)}
                      </div>
                    </div>
                    <p>"{r.t}"</p>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        <div className="mt-16 md:mt-20">
          <Reveal className="flex items-end justify-between mb-8">
            <h2 className="ff-serif text-3xl md:text-4xl text-ink">{t('shop.related')}</h2>
            <button onClick={() => window.RBNav.go('shop', { cat: p.cat })}
                    className="text-xs tracking-[0.3em] uppercase underline-grow text-ink-soft hover:text-ink">{t('nav.view_all')} →</button>
          </Reveal>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-x-3 gap-y-8 md:gap-x-5 md:gap-y-12">
            {related.map((rp, i) => (
              <Reveal key={rp.id} delay={i*60}>
                <ProductCard p={rp}/>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
};

window.RBProduct = { ProductPage };