/* ============================================================
   Төрмен — interactivity layer
   • toast notifications  • fly-to-cart animation
   • favorites / wishlist (persisted)
   ============================================================ */
const { useState:useStateI, useEffect:useEffectI, createContext:createCtxI, useContext:useCtxI, useCallback:useCbI } = React;

/* ---------------- imperative FX (no React needed) ---------------- */
function tormenFly(fromRect, imgUrl){
  if(!fromRect) return;
  const targets = [...document.querySelectorAll('[data-cart-target]')]
    .filter(el=> el.offsetParent !== null); // only visible ones
  const target = targets[targets.length-1] || document.querySelector('[data-cart-target]');
  if(!target) return;
  const tr = target.getBoundingClientRect();
  const size = Math.max(54, Math.min(fromRect.width, 120));
  const el = document.createElement('div');
  el.style.cssText = `position:fixed;left:${fromRect.left}px;top:${fromRect.top}px;width:${size}px;height:${size}px;`+
    `border-radius:18px;z-index:9999;pointer-events:none;background-size:cover;background-position:center;`+
    `box-shadow:0 16px 36px -10px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25)`;
  if(imgUrl){ el.style.backgroundImage = `url("${imgUrl}")`; }
  else { el.style.background = 'linear-gradient(135deg,var(--ember-2),var(--ember))'; }
  document.body.appendChild(el);
  const cx = fromRect.left + size/2, cy = fromRect.top + size/2;
  const dx = (tr.left + tr.width/2) - cx;
  const dy = (tr.top + tr.height/2) - cy;
  const anim = el.animate([
    { transform:'translate(0,0) scale(1) rotate(0deg)', opacity:1, offset:0 },
    { transform:`translate(${dx*0.45}px,${dy*0.45 - 70}px) scale(.66) rotate(-8deg)`, opacity:1, offset:.55 },
    { transform:`translate(${dx}px,${dy}px) scale(.14) rotate(6deg)`, opacity:.25, offset:1 },
  ], { duration: 720, easing:'cubic-bezier(.5,0,.65,1)' });
  anim.onfinish = ()=>{ el.remove(); target.classList.add('cart-pop'); setTimeout(()=>target.classList.remove('cart-pop'),420); };
  anim.oncancel = ()=> el.remove();
}

function tormenToast(detail){ window.dispatchEvent(new CustomEvent('tormen:toast',{ detail })); }
function tormenAddFX(srcEl, imgUrl, title, sub){
  try{ tormenFly(srcEl && srcEl.getBoundingClientRect(), imgUrl); }catch(e){}
  tormenToast({ icon:'shopping-bag', title, sub, accent:true });
}
Object.assign(window, { tormenFly, tormenToast, tormenAddFX });

/* ---------------- toast host ---------------- */
function Toast({ icon='check', title, sub, accent }){
  return (
    <div className="toast glass glass-strong">
      <span className="grid place-items-center rounded-full shrink-0" style={{ width:38, height:38,
        background: accent?'linear-gradient(135deg,var(--ember-2),var(--ember))':'var(--surface-2)',
        color: accent?'var(--on-accent)':'var(--gold)' }}>
        <Icon name={icon} size={19} stroke={2} />
      </span>
      <div className="min-w-0">
        {title && <div className="font-semibold text-sm leading-tight truncate">{title}</div>}
        {sub && <div className="text-xs truncate" style={{ color:'var(--ink-2)' }}>{sub}</div>}
      </div>
    </div>
  );
}
function ToastHost(){
  const [toasts, setToasts] = useStateI([]);
  useEffectI(()=>{
    const h = (e)=>{
      const id = Math.random().toString(36).slice(2);
      setToasts(ts=>[...ts.slice(-3), { id, ...e.detail }]);
      setTimeout(()=> setToasts(ts=>ts.filter(x=>x.id!==id)), 2800);
    };
    window.addEventListener('tormen:toast', h);
    return ()=> window.removeEventListener('tormen:toast', h);
  },[]);
  return (
    <div className="toast-host">
      {toasts.map(t=> <Toast key={t.id} {...t} />)}
    </div>
  );
}

/* ---------------- favorites ---------------- */
const FavContext = createCtxI(null);
function FavoritesProvider({ children }){
  const [favs, setFavs] = useStateI(()=>{
    try{ return JSON.parse(localStorage.getItem('tormen_favs')||'[]'); }catch(e){ return []; }
  });
  useEffectI(()=>{ localStorage.setItem('tormen_favs', JSON.stringify(favs)); }, [favs]);
  const has = useCbI((id)=> favs.includes(id), [favs]);
  const toggle = useCbI((id)=> setFavs(f=> f.includes(id) ? f.filter(x=>x!==id) : [id,...f]), []);
  return <FavContext.Provider value={{ favs, has, toggle, count:favs.length }}>{children}</FavContext.Provider>;
}
function useFav(){ return useCtxI(FavContext); }

/* heart toggle button */
function HeartButton({ id, floating=false, size=40 }){
  const { has, toggle } = useFav();
  const { t, lang } = useLang();
  const on = has(id);
  const click = (e)=>{
    e.stopPropagation(); e.preventDefault();
    toggle(id);
    tormenToast({ icon: on?'heart-off':'heart',
      title: on ? (lang==='kz'?'Таңдаулыдан алынды':'Убрано из избранного')
                : (lang==='kz'?'Таңдаулыға қосылды':'В избранном'),
      accent:false });
  };
  return (
    <button onClick={click} aria-pressed={on}
      className={`heart-btn grid place-items-center ${on?'on':''} ${floating?'heart-float':''}`}
      style={{ width:size, height:size }}>
      <Icon name="heart" size={Math.round(size*0.46)} stroke={on?0:1.8}
        style={{ fill: on?'var(--ember)':'transparent', color: on?'var(--ember)':'inherit' }} />
    </button>
  );
}

/* favorites screen */
function FavoritesScreen({ go }){
  const { t, lang } = useLang();
  const { favs } = useFav();
  const sets = (window.SETS||[]).filter(s=> favs.includes(s.id));
  const prods = (window.ProductCard && window.PRODUCTS) ? window.PRODUCTS.filter(p=> favs.includes(p.id)) : [];
  const total = sets.length + prods.length;
  const both = sets.length>0 && prods.length>0;
  const GroupLabel = ({ icon, label, n })=>(
    <div className="flex items-center gap-2 mb-5">
      <Icon name={icon} size={13} stroke={2} style={{ color:'var(--ink-3)' }} />
      <span className="text-xs font-medium" style={{ color:'var(--ink-3)', letterSpacing:'0.04em' }}>{label}</span>
      <span className="text-xs tnum" style={{ color:'var(--ink-4)' }}>{n}</span>
      <span className="flex-1" style={{ height:1, background:'var(--border-soft)' }} />
    </div>
  );
  return (
    <div className="max-w-6xl mx-auto px-5 pt-24 md:pt-28 pb-32">
      <Reveal>
        <div className="eyebrow mb-3">{lang==='kz'?'ТАҢДАУЛЫ':'ИЗБРАННОЕ'}</div>
        <h1 className="serif-title text-4xl md:text-5xl mb-3">
          {lang==='kz'? <>Сіздің <span className="grad-text">таңдаулыңыз</span></> : <>Ваше <span className="grad-text">избранное</span></>}
          {total>0 && <span className="tnum ml-3" style={{ color:'var(--ink-4)', fontSize:'0.55em' }}>{total}</span>}
        </h1>
        <p className="max-w-xl mb-9" style={{ color:'var(--ink-2)' }}>
          {lang==='kz'?'Ұнаған жинақтар мен өнімдерді осында сақтап, кейін тапсырыс беріңіз.':'Собирайте понравившиеся наборы и продукты здесь и заказывайте, когда удобно.'}</p>
      </Reveal>
      {total===0 ? (
        <Reveal>
          <div className="pt-8 pb-4" style={{ borderTop:'1px solid var(--border-soft)' }}>
            <div className="max-w-md mx-auto text-center">
              <span className="icon-tile mx-auto mb-5 inline-grid place-items-center" style={{ width:48, height:48 }}>
                <Icon name="heart" size={20} stroke={1.6} style={{ color:'var(--ink-3)' }} />
              </span>
              <h2 className="serif-title text-2xl md:text-3xl mb-3">
                <span className="grad-text">{lang==='kz'?'Әзірге бос':'Пока пусто'}</span>
              </h2>
              <p className="text-sm leading-relaxed mb-8" style={{ color:'var(--ink-2)' }}>
                {lang==='kz'?'Каталогта ұнаған жинаққа немесе өнімге жүректі басыңыз.':'Нажмите на сердечко у понравившегося набора или продукта в каталоге.'}
              </p>
              <button className="btn btn-primary" onClick={()=>go('catalog')}>
                <span className="shine"></span>{t('go_catalog')}<Icon name="arrow-right" size={17} />
              </button>
            </div>
          </div>
        </Reveal>
      ) : (
        <div className="flex flex-col gap-12">
          {sets.length>0 && (
            <div>
              {both && <GroupLabel icon="utensils-crossed" label={lang==='kz'?'Жинақтар':'Наборы'} n={sets.length} />}
              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
                {sets.map((s,i)=> <Reveal key={s.id} delay={(i%3)*70}><SetCard set={s} go={go} /></Reveal>)}
              </div>
            </div>
          )}
          {prods.length>0 && (
            <div>
              {both && <GroupLabel icon="beef" label={lang==='kz'?'Өнімдер':'Продукты'} n={prods.length} />}
              <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
                {prods.map((p,i)=> <Reveal key={p.id} delay={(i%4)*60}><window.ProductCard p={p} /></Reveal>)}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ToastHost, FavoritesProvider, useFav, HeartButton, FavoritesScreen });