/* ============ BADEM Configurator ============ */
const {useState, useEffect, useRef, useCallback} = React;
const C = window.BademChoco;

/* shared price/nutrition model */
const TYPE_ADD = {milk:0, dark:2, white:1, ruby:7, caramel:3};
const FILL_ADD = {pistachio:6, praline:5, raspberry:5, caramel:4, ganache:3};
const DECO_ADD = {pistachio_p:3, almond:3, gold:5, nibs:2, drizzle:2};
const BASE = 14;
const NUTRI = {
  milk:{kcal:58,sugar:5.4,cocoa:38}, dark:{kcal:54,sugar:3.1,cocoa:70},
  white:{kcal:61,sugar:6.8,cocoa:30}, ruby:{kcal:57,sugar:5.9,cocoa:34}, caramel:{kcal:60,sugar:6.4,cocoa:33}
};
const FILL_KCAL={pistachio:22,praline:26,raspberry:14,caramel:24,ganache:20};

function piecePrice(type, filling, decos){
  return BASE + (TYPE_ADD[type]||0) + (FILL_ADD[filling]||0) + decos.reduce((a,d)=>a+(DECO_ADD[d]||0),0);
}

/* ---------- Choco renderer wrapper ---------- */
function Choco({state, size, anim, pop, tilt}){
  const ref = useRef();
  useEffect(()=>{ if(ref.current) C.render(ref.current, state); },
    [state.shape, state.type, state.filling, (state.decorations||[]).join(','), state.view]);
  return (
    <div className={"choco-wrap"+(pop?" pop":"")} data-anim={anim?1:0} style={size?{'--size':size}:undefined}>
      <div ref={ref}></div>
    </div>
  );
}

/* ---------- 3D preview (three.js) ---------- */
function Choco3D({state}){
  const ref=useRef(); const viewRef=useRef();
  useEffect(()=>{ if(window.BademChoco3D){ viewRef.current=window.BademChoco3D.create(ref.current,{}); viewRef.current.set(state); }
    return ()=>{ if(viewRef.current) viewRef.current.dispose(); }; },[]);
  useEffect(()=>{ if(viewRef.current) viewRef.current.set(state); },
    [state.shape,state.type,state.filling,(state.decorations||[]).join(','),state.view]);
  return <div ref={ref} style={{width:'100%',height:'100%'}}></div>;
}

/* ---------- mini swatch (for selectors) ---------- */
function MiniChoco({state, size}){
  const ref=useRef();
  useEffect(()=>{ if(ref.current) C.render(ref.current, state); },
    [state.shape,state.type,state.filling,(state.decorations||[]).join(','),state.view]);
  return <div className="choco-wrap" style={{'--size':size,filter:'drop-shadow(0 4px 6px rgba(46,26,14,.25))'}}><div ref={ref}></div></div>;
}

/* ---------- Group wrapper ---------- */
function Group({n, title, sel, children}){
  return (
    <div className="grp">
      <div className="grp__head">
        <span className="t">{n} · {title}</span>
        <span className="sel">{sel}</span>
      </div>
      {children}
    </div>
  );
}

const CHK=<svg className="chk" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12l5 5L20 7"/></svg>;
const ARR=<svg className="arr" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M5 12h14M13 6l6 6-6 6"/></svg>;

/* ============ APP ============ */
function App(){
  const [shape,setShape]=useState('heart');
  const [type,setType]=useState('milk');
  const [filling,setFilling]=useState('praline');
  const [decos,setDecos]=useState(['gold']);
  const [view,setView]=useState('exterior');
  const [qty,setQty]=useState(3);
  const [popKey,setPopKey]=useState(0);
  const [toast,setToast]=useState(false);
  const [directOrder,setDirectOrder]=useState([]);
  const [moldsQty,setMoldsQty]=useState(3);
  const [catalogFillings,setCatalogFillings]=useState([]);
  const [catalogDecos,setCatalogDecos]=useState([]);

  useEffect(()=>{
    fetch('/api/catalog/fillings').then(r=>r.ok?r.json():null).then(d=>{if(Array.isArray(d))setCatalogFillings(d);}).catch(()=>{});
    fetch('/api/catalog/decorations').then(r=>r.ok?r.json():null).then(d=>{if(Array.isArray(d))setCatalogDecos(d);}).catch(()=>{});
    if(window.BademTrack) window.BademTrack('design_start',{mode:'configurator'});
  },[]);

  const fillImgUrl=(id)=>{ const f=catalogFillings.find(f=>f.id===id); return f?.img_url||''; };
  const decoImgUrl=(id)=>{ const d=catalogDecos.find(d=>d.id===id); return d?.img_url||''; };

  const bump=useCallback(()=>setPopKey(k=>k+1),[]);

  const toggleDeco=(id)=>{
    setDecos(d=> d.includes(id) ? d.filter(x=>x!==id) : (d.length>=2 ? [d[1],id] : [...d,id]));
  };

  const per = piecePrice(type, filling, decos);
  const total = per*qty;
  const nut = NUTRI[type];
  const kcal = Math.round(nut.kcal + (FILL_KCAL[filling]||0) + decos.length*6);

  const typeObj=C.byId(C.TYPES,type), shapeObj=C.byId(C.SHAPES,shape), fillObj=C.byId(C.FILLINGS,filling);
  const name = `${shapeObj.tr} · ${typeObj.tr}`;
  const decoNames = decos.map(d=>C.byId(C.DECOS,d).tr).join(', ')||'Sade';

  const state={shape,type,filling,decorations:decos,view};

  /* (static high-quality 3D angle — no tilt) */
  const stageRef=useRef();

  const [cartN,setCartN]=useState(window.BademCart?window.BademCart.lines():0);
  const addToBox=()=>{
    const q=Math.max(3,qty);
    if(window.BademCart) {
      window.BademCart.add({
        kind:'design',
        name,
        sub:`${fillObj.tr} · ${decoNames}`,
        unit:per,
        qty:q,
        st:state,
        vat_rate:1,
        product_group:'artisan_chocolate',
      });
    }
    setCartN(window.BademCart?window.BademCart.lines():0);
    if(window.BademTrack) window.BademTrack('design_complete',{mode:'configurator',qty:q});
    setToast(true); setTimeout(()=>setToast(false),2200);
  };

  const totalDirectPieces = directOrder.reduce((n,it)=>n+it.qty,0);
  const directTotal = directOrder.reduce((n,it)=>n+it.unit*it.qty,0);

  const addToDirectOrder=()=>{
    const q=Math.max(3,moldsQty);
    setDirectOrder(prev=>[...prev,{kind:'design',name,sub:`${fillObj.tr} · ${decoNames}`,unit:per,qty:q,st:{...state},vat_rate:1,product_group:'artisan_chocolate'}]);
  };

  const removeDirectItem=(i)=>setDirectOrder(prev=>prev.filter((_,j)=>j!==i));

  const submitDirectOrder=()=>{
    if(totalDirectPieces<9) return;
    if(window.BademCart) directOrder.forEach(it=>window.BademCart.add(it));
    window.location.href='cart.html';
  };

  return (
    <React.Fragment>
      {/* top bar */}
      <div className="cfgbar">
        <a href="index.html" aria-label="Ana sayfaya dön" style={{display:'flex',alignItems:'center',gap:'12px'}}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M15 5l-7 7 7 7"/></svg>
          <img src="assets/badem-logo.png" className="cfgbar__logo" alt="Badem"/>
        </a>
        <div className="cfgbar__steps">
          {['Şekil','Çikolata','Dolgu','Süsleme'].map((s,i)=>(
            <React.Fragment key={s}>
              {i>0 && <span className="sep"></span>}
              <span className="st on"><span className="n">{i+1}</span>{s}</span>
            </React.Fragment>
          ))}
        </div>
        <div className="cfgbar__right" style={{gap:'14px'}}>
          <div className="cfgbar__modes" role="tablist" aria-label="Tasarım modu">
            <a href="configurator.html" className="cfgbar__mode on" aria-current="page">Tasarla</a>
            <a href="build-your-box.html" className="cfgbar__mode">Kutunu Hazırla</a>
          </div>
          <a href="collections.html" className="link-underline cfgbar__link-hide" style={{color:'var(--muted)'}}>Koleksiyonlar</a>
          <a href={localStorage.getItem('badem_customer_token')?'account.html':'login.html'} className="cfgbar__icon" aria-label="Hesabım">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="8" r="4"/><path d="M5 21c0-4 3.5-6 7-6s7 2 7 6"/></svg>
          </a>
          <a href="cart.html" className="btn btn--sm" style={{borderRadius:'100px'}}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 8h12l-1 12H7L6 8z"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8"/></svg>
            Sepet{cartN>0?` · ${cartN}`:''}
          </a>
        </div>
      </div>

      <div className="cfg">
        {/* ---------- LEFT ---------- */}
        <div className="panel left">
          <Group n="01" title="Şekil" sel={shapeObj.tr}>
            <div className="shapes">
              {C.SHAPES.map(s=>(
                <button key={s.id} className={"shape-opt"+(shape===s.id?" on":"")} onClick={()=>{setShape(s.id);bump();}}>
                  <MiniChoco state={{shape:s.id,type,decorations:[]}} size="42px"/>
                  <span className="lbl">{s.tr}</span>
                </button>
              ))}
            </div>
          </Group>

          <Group n="02" title="Çikolata" sel={typeObj.tr}>
            <div className="types">
              {C.TYPES.map(t=>(
                <button key={t.id} className={"type-opt"+(type===t.id?" on":"")} onClick={()=>{setType(t.id);bump();}}>
                  <span className="sw" style={{background:`radial-gradient(120% 120% at 30% 22%, ${t.light}, ${t.base} 52%, ${t.dark})`}}></span>
                  <span className="lbl">{t.tr}</span>
                </button>
              ))}
            </div>
          </Group>

          <Group n="03" title="Dolgu" sel={fillObj.tr}>
            <div className="fills">
              {C.FILLINGS.map(f=>(
                <button key={f.id} className={"fill-opt"+(filling===f.id?" on":"")} onClick={()=>{setFilling(f.id); if(view==='exterior') setView('cut'); bump();}}>
                  {fillImgUrl(f.id)
                    ? <img src={fillImgUrl(f.id)} alt={f.tr} style={{width:'38px',height:'38px',objectFit:'cover',borderRadius:'50%',flexShrink:0,border:'1.5px solid rgba(0,0,0,.08)'}}/>
                    : <MiniChoco state={{shape:'round',type,filling:f.id,view:'cut'}} size="38px"/>}
                  <span><span className="nm">{f.tr}</span><br/><span className="pr">+₺{FILL_ADD[f.id]}</span></span>
                </button>
              ))}
            </div>
          </Group>

          <Group n="04" title="Süsleme" sel={decos.length+' seçili'}>
            <div className="decos">
              {C.DECOS.map(d=>{
                const on=decos.includes(d.id);
                const col=d.pal?d.pal[0]:'#C9A24D';
                const imgUrl=decoImgUrl(d.id);
                return (
                  <button key={d.id} className={"deco-opt"+(on?" on":"")} onClick={()=>{toggleDeco(d.id);bump();}}>
                    {imgUrl
                      ? <img src={imgUrl} alt={d.tr} className="ic" style={{width:'18px',height:'18px',objectFit:'cover',borderRadius:'50%',flexShrink:0}}/>
                      : <span className="ic" style={{background:`radial-gradient(circle at 35% 30%, #fff5, ${col})`}}></span>}
                    {d.tr}{CHK}
                  </button>
                );
              })}
            </div>
            <p style={{fontSize:'11.5px',color:'var(--muted)',marginTop:'12px'}}>En fazla 2 süsleme seçebilirsin.</p>
          </Group>

          <Group n="05" title="Adet" sel={qty+' adet'}>
            <div className="qty">
              <div className="qty__presets">
                {[3,6,9,12].map(p=>(
                  <button key={p} className={qty===p?"on":""} onClick={()=>setQty(p)}>{p}</button>
                ))}
              </div>
              <div className="stepper">
                <button onClick={()=>setQty(q=>Math.max(3,q-1))}>−</button>
                <span className="v">{qty}</span>
                <button onClick={()=>setQty(q=>Math.min(99,q+1))}>+</button>
              </div>
              <p style={{fontSize:'11.5px',color:'var(--muted)',display:'flex',gap:'8px',lineHeight:1.5,marginTop:'2px'}}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--gold-deep)" strokeWidth="1.6" style={{flex:'0 0 auto',marginTop:'1px'}}><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>
                Kalıp başına minimum 3 adet üretim yapılabilmektedir.
              </p>
            </div>
          </Group>
        </div>

        {/* ---------- CENTER ---------- */}
        <div className="center">
          <div className="viewtog">
            <button className={view==='exterior'?"on":""} onClick={()=>setView('exterior')}>Dış Görünüm</button>
            <button className={view==='cut'?"on":""} onClick={()=>setView('cut')}>Kesit · Dolgu</button>
          </div>
          <div className="stage stage--3d">
            <Choco3D state={state}/>
          </div>
          <div className="drag-hint">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 2l2.4 7.4H22l-6 4.6 2.3 7.4-6.3-4.6L5.7 21.4 8 14 2 9.4h7.6z"/></svg>
            Yüksek kaliteli 3D önizleme
          </div>
          <div className="combo-cap">
            <span>{shapeObj.en}</span>·<span>{typeObj.en}</span>·<span>{fillObj.en}</span>
          </div>
        </div>

        {/* ---------- RIGHT ---------- */}
        <div className="panel right">
          <div className="sum__name">{name}</div>
          <div className="sum__sub">Dolgu: {fillObj.tr} · Süsleme: {decoNames}</div>

          <div className="sum__price">
            <div className="total">₺{total.toLocaleString('tr-TR')}</div>
            <div className="per">₺{per} / adet<br/>{qty} adet</div>
          </div>

          <div className="nutri">
            <div className="nc"><div className="v">{kcal}</div><div className="l">kcal / adet</div></div>
            <div className="nc"><div className="v">{nut.cocoa}%</div><div className="l">kakao</div></div>
            <div className="nc"><div className="v">{(nut.sugar+(filling==='ganache'?2:3)).toFixed(1)}g</div><div className="l">şeker</div></div>
          </div>

          <p className="alg">İçerebilir: süt, fındık, badem, Antep fıstığı, soya. Glüten içermez. {type==='white'||type==='ruby'?'Vejetaryen.':'El ile dökülmüştür.'} Üretim: İstanbul atölyesi · raf ömrü 21 gün.</p>

          <div className="addbar">
            <button className="btn btn--lg btn--block" onClick={addToBox}>
              Kutuya Ekle · ₺{total.toLocaleString('tr-TR')} {ARR}
            </button>
            <a href="build-your-box.html" className="link-underline" style={{display:'flex',justifyContent:'center',marginTop:'16px'}}>Hediye kutusu olarak hazırla {ARR}</a>
          </div>

          {/* ── Direkt Sipariş ── */}
          <div style={{borderTop:'1px solid var(--line)',marginTop:'24px',paddingTop:'20px'}}>
            <div style={{fontSize:'11px',fontWeight:600,textTransform:'uppercase',letterSpacing:'.1em',color:'var(--muted)',textAlign:'center',marginBottom:'16px'}}>veya doğrudan sipariş ver</div>

            <div style={{marginBottom:'12px'}}>
              <div style={{fontSize:'12.5px',color:'var(--muted)',marginBottom:'8px'}}>Bu tasarımdan kaç adet?</div>
              <div className="stepper">
                <button onClick={()=>setMoldsQty(q=>Math.max(3,q-1))}>−</button>
                <span className="v">{moldsQty}</span>
                <button onClick={()=>setMoldsQty(q=>Math.min(99,q+1))}>+</button>
              </div>
              <p style={{fontSize:'11.5px',color:'var(--muted)',marginTop:'8px'}}>
                Kalıp başına min 3 adet · ₺{(per*moldsQty).toLocaleString('tr-TR')}
              </p>
            </div>

            <button className="btn btn--outline btn--block" style={{marginBottom:'16px'}} onClick={addToDirectOrder}>
              Sipariş Listesine Ekle
            </button>

            {directOrder.length>0 && (
              <div className="dol">
                {directOrder.map((item,i)=>(
                  <div key={i} className="dol-item">
                    <div className="dol-info">
                      <div className="dol-name">{item.name}</div>
                      <div className="dol-meta">{item.sub} · {item.qty} adet</div>
                    </div>
                    <div style={{display:'flex',alignItems:'center',gap:'10px'}}>
                      <span style={{fontFamily:'var(--mono)',fontSize:'13px'}}>₺{(item.unit*item.qty).toLocaleString('tr-TR')}</span>
                      <button className="dol-rm" onClick={()=>removeDirectItem(i)} aria-label="Kaldır">×</button>
                    </div>
                  </div>
                ))}
                <div className="dol-total">
                  <span>Toplam: {totalDirectPieces} adet</span>
                  {totalDirectPieces<9 && <span style={{color:'#B45309',fontSize:'12px'}}> — min 9 gerekli ({9-totalDirectPieces} eksik)</span>}
                </div>
                <button
                  className="btn btn--lg btn--block"
                  disabled={totalDirectPieces<9}
                  style={totalDirectPieces<9?{opacity:.45,cursor:'not-allowed'}:{}}
                  onClick={submitDirectOrder}
                >
                  Sipariş Ver · ₺{directTotal.toLocaleString('tr-TR')} {ARR}
                </button>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className={"toast"+(toast?" show":"")}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12l5 5L20 7"/></svg>
        {qty} adet kutuna eklendi
      </div>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);