/* ───────────────────────────────────────────────────────────
   session-swipe.jsx — the swipe-to-decide card engine + variations
   Exports: SwipePhase, ItemDonePhase, SwipeCard
   ─────────────────────────────────────────────────────────── */

const THRESH = 92;   // px to commit a swipe

function dirFrom(dx,dy){
  if(Math.max(Math.abs(dx),Math.abs(dy))<8) return null;
  if(Math.abs(dx)>=Math.abs(dy)) return dx>0?'right':'left';
  return dy>0?'down':'up';
}

function useSwipe(onCommit, enabled=true){
  const [d,setD]=useState({x:0,y:0,active:false});
  const st=useRef(null);
  const cur=useRef({x:0,y:0});
  const move=(cx,cy)=>{
    if(!st.current) return;
    const nx=cx-st.current.x, ny=cy-st.current.y;
    cur.current={x:nx,y:ny};
    setD({ x:nx, y:ny, active:true });
  };
  const end=()=>{
    if(!st.current) return;
    const {x,y}=cur.current;
    const dist=Math.hypot(x,y);
    const dir=dirFrom(x,y);
    st.current=null;
    if(dir && dist>=THRESH){ onCommit(dir); }
    else { setD({x:0,y:0,active:false}); }
  };
  const bind = enabled ? {
    onPointerDown:(e)=>{ st.current={x:e.clientX,y:e.clientY}; cur.current={x:0,y:0}; try{e.currentTarget.setPointerCapture&&e.currentTarget.setPointerCapture(e.pointerId);}catch(_){} },
    onPointerMove:(e)=>move(e.clientX,e.clientY),
    onPointerUp:end,
    onPointerCancel:end,
  } : {};
  const reset=()=>setD({x:0,y:0,active:false});
  return { d, bind, reset };
}

/* live preview score: committed tally nudged by the in-progress drag */
function previewScore(running, dir, progress){
  if(!dir) return running;
  const v=ANSWERS[DIRS[dir].ans].v;
  return running + v*Math.min(1,progress);
}

function SwipePhase({ style='deck', qi, answers, draft, runningScore, onAnswer }){
  const [flying,setFlying]=useState(null);
  const commit=(dir)=>{
    if(flying) return;
    setFlying(dir);
    setTimeout(()=>{ setFlying(null); onAnswer(dir); }, 230);
  };
  const Q=QUESTIONS[qi];

  return (
    <div className="fade-in" style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', padding:'10px 18px 22px' }}>
      {/* item header */}
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:10 }}>
        <GarmentSwatch item={draft} size={34} radius={9}/>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:14, fontWeight:700, color:'#fff', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{draft?.name}</div>
          <div style={{ fontSize:11, color:'rgba(255,255,255,.55)' }}>{catById(draft?.category).label}</div>
        </div>
        {/* answered dots */}
        <div style={{ display:'flex', gap:5 }}>
          {QUESTIONS.map((qq,k)=>{
            const a=answers[qq.id];
            return <div key={qq.id} style={{ width:7, height:7, borderRadius:9,
              background: a?ANSWERS[a].color : (k===qi?'rgba(255,255,255,.9)':'rgba(255,255,255,.22)') }}/>;
          })}
        </div>
      </div>

      {style==='buttons'
        ? <ButtonsVariant key={qi} Q={Q} qi={qi} running={runningScore} flying={flying} onCommit={commit}/>
        : <DragVariant key={qi} immersive={style==='immersive'} Q={Q} qi={qi} running={runningScore} flying={flying} onCommit={commit}/>}
    </div>
  );
}

/* ===== drag variants (deck + immersive) ===== */
function DragVariant({ Q, qi, running, flying, onCommit, immersive }){
  const { d, bind } = useSwipe(onCommit);
  const dir = flying || dirFrom(d.x,d.y);
  const progress = Math.min(1, Math.hypot(d.x,d.y)/THRESH);
  const ps = previewScore(running, flying?flying:(progress>0.15?dir:null), progress);
  const grad = gradientForScore(ps);

  const flyOff = flying ? { transform:`translate(${DIRS[flying].x*460}px,${DIRS[flying].y*620}px) rotate(${DIRS[flying].x*22}deg)`, opacity:0, transition:'transform .24s ease-in, opacity .24s' } : null;
  const dragT = !flying ? { transform:`translate(${d.x}px,${d.y}px) rotate(${d.x*0.05}deg)`, transition: d.active?'none':'transform .3s cubic-bezier(.2,.9,.3,1.2)' } : flyOff;

  const card = (
    <div {...bind} style={{ position:'relative', touchAction:'none', cursor:'grab',
      ...(immersive? { width:'100%', height:'100%' } : {
        width:'100%', maxWidth:330, aspectRatio:'1/1.34', borderRadius:30, overflow:'hidden',
        boxShadow:'0 30px 60px rgba(0,0,0,.4)', margin:'0 auto' }),
      ...dragT }}>
      <div style={{ position:'absolute', inset:0, background:grad, transition:'background .25s', borderRadius:immersive?0:30 }}/>
      {/* grain / depth */}
      <div style={{ position:'absolute', inset:0, background:'radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.14), transparent 55%)' }}/>
      {/* directional hint badges */}
      {Object.entries(DIRS).map(([k,v])=>{
        const lit = dir===k && progress>0.18;
        const pos = { right:{right:18,top:'50%',transform:'translateY(-50%)'}, left:{left:18,top:'50%',transform:'translateY(-50%)'},
                      up:{top:20,left:'50%',transform:'translateX(-50%)'}, down:{bottom:20,left:'50%',transform:'translateX(-50%)'} }[k];
        return <div key={k} style={{ position:'absolute', ...pos, padding:'6px 13px', borderRadius:999,
          border:'2px solid rgba(255,255,255,.9)', color:'#fff', fontWeight:800, fontSize:13, letterSpacing:'.06em', textTransform:'uppercase',
          opacity: lit?1:0.0, transform:(pos.transform||'')+` scale(${lit?1:.8})`, transition:'opacity .15s, transform .15s',
          background:'rgba(255,255,255,.16)', backdropFilter:'blur(4px)' }}>{v.label}</div>;
      })}
      {/* question */}
      <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'0 30px', textAlign:'center' }}>
        <div style={{ fontSize:11.5, letterSpacing:'.16em', textTransform:'uppercase', color:'rgba(255,255,255,.7)', fontWeight:700, marginBottom:16 }}>Domanda {qi+1} di 6</div>
        <div className="serif" style={{ fontSize: immersive?32:26, lineHeight:1.18, color:'#fff', fontWeight:500, whiteSpace:'pre-line', textShadow:'0 2px 18px rgba(0,0,0,.25)' }}>{Q.q}</div>
      </div>
    </div>
  );

  return (
    <>
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', minHeight:0, position:'relative' }}>
        {card}
      </div>
      <HintLegend Q={Q} onCommit={flying?null:onCommit}/>
    </>
  );
}

/* ===== buttons variant (accessible, no drag) ===== */
function ButtonsVariant({ Q, qi, running, flying, onCommit }){
  const ps = flying? previewScore(running, flying, 1): running;
  const grad=gradientForScore(ps);
  const pulse = flying ? { transform:'scale(.96)', opacity:.5, transition:'all .2s' } : { transition:'all .2s' };
  const order=['up','left','right','down'];
  return (
    <>
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', minHeight:0 }}>
        <div style={{ width:'100%', maxWidth:330, aspectRatio:'1/1.18', borderRadius:30, overflow:'hidden', position:'relative', boxShadow:'0 30px 60px rgba(0,0,0,.4)', ...pulse }}>
          <div style={{ position:'absolute', inset:0, background:grad, transition:'background .3s' }}/>
          <div style={{ position:'absolute', inset:0, background:'radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.14), transparent 55%)' }}/>
          <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'0 30px', textAlign:'center' }}>
            <div style={{ fontSize:11.5, letterSpacing:'.16em', textTransform:'uppercase', color:'rgba(255,255,255,.7)', fontWeight:700, marginBottom:16 }}>Domanda {qi+1} di 6</div>
            <div className="serif" style={{ fontSize:26, lineHeight:1.18, color:'#fff', fontWeight:500, whiteSpace:'pre-line', textShadow:'0 2px 18px rgba(0,0,0,.25)' }}>{Q.q}</div>
          </div>
        </div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:9, marginTop:14 }}>
        {order.map(k=>{
          const v=DIRS[k];
          return <button key={k} onClick={()=>onCommit(k)} style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:8,
            padding:'14px 0', borderRadius:14, border:'1.5px solid rgba(255,255,255,.18)', cursor:'pointer',
            background:'rgba(255,255,255,.07)', color:'#fff', fontFamily:'var(--font-body)', fontWeight:700, fontSize:15 }}>
            <span style={{ width:22, height:22, borderRadius:999, background:v.color, display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:13, color:'#fff' }}>{ {right:'→',left:'←',up:'↑',down:'↓'}[k] }</span>
            {v.label}
          </button>;
        })}
      </div>
      <div style={{ textAlign:'center', fontSize:11.5, color:'rgba(255,255,255,.45)', marginTop:9 }}>{Q.hint}</div>
    </>
  );
}

function HintLegend({ Q, onCommit }){
  return (
    <div style={{ marginTop:14 }}>
      <div style={{ display:'flex', justifyContent:'center', gap:9, marginBottom:10 }}>
        {[['left','←','No'],['up','↑','Neutro'],['down','↓','Forse'],['right','→','Sì']].map(([k,g,l])=>(
          <button key={k} onClick={onCommit?()=>onCommit(k):undefined} aria-label={l}
            style={{ display:'flex', alignItems:'center', gap:6, padding:'7px 12px', borderRadius:999,
              border:'1px solid rgba(255,255,255,.16)', background:'rgba(255,255,255,.05)',
              cursor:onCommit?'pointer':'default', fontFamily:'var(--font-body)' }}>
            <span style={{ width:18, height:18, borderRadius:999, background:DIRS[k].color, display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:11, color:'#fff' }}>{g}</span>
            <span style={{ fontSize:11.5, color:'rgba(255,255,255,.7)', fontWeight:600 }}>{l}</span>
          </button>
        ))}
      </div>
      <div style={{ textAlign:'center', fontSize:11.5, color:'rgba(255,255,255,.42)', lineHeight:1.4, padding:'0 12px' }}>Trascina la carta o tocca — {Q.hint}</div>
    </div>
  );
}

/* ===== per-item verdict ===== */
function ItemDonePhase({ item, threshold, onNext, onFinish }){
  const keep=verdict(item.score, threshold)==='keep';
  return (
    <div className="fade-in" style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'0 30px', textAlign:'center',
      background:`radial-gradient(120% 70% at 50% 30%, ${keep?'rgba(31,138,91,.28)':'rgba(196,60,43,.26)'} 0%, transparent 60%)` }}>
      <div className="pop-in" style={{ marginBottom:20 }}>
        <GarmentSwatch item={item} size={104} radius={24} ring/>
      </div>
      <div className="pop-in" style={{ width:70, height:70, borderRadius:999, display:'flex', alignItems:'center', justifyContent:'center', marginBottom:18,
        background: keep?'var(--pos)':'var(--neg)', boxShadow:`0 12px 30px ${keep?'rgba(31,138,91,.5)':'rgba(196,60,43,.5)'}` }}>
        {keep? Icon.check({ size:34, color:'#fff', sw:2.6 }) : Icon.gift({ size:32, color:'#fff', sw:2 })}
      </div>
      <div className="eyebrow fade-up" style={{ color:'rgba(255,255,255,.6)', marginBottom:8 }}>{item.name}</div>
      <h1 className="serif fade-up" style={{ fontSize:34, fontWeight:500, color:'#fff', margin:'0 0 6px' }}>{keep?'Resta con te':'Lascia andare'}</h1>
      <p className="fade-up" style={{ fontSize:14.5, color:'rgba(255,255,255,.72)', lineHeight:1.5, maxWidth:280, margin:'0 0 6px' }}>
        {keep?'Questo capo lavora per te. Tienilo, curato e in vista.':'Ti sta occupando spazio senza darti valore. Mettilo nella pila “via”.'}
      </p>
      <div className="mono fade-up" style={{ fontSize:13, color:'rgba(255,255,255,.5)', marginBottom:28 }}>Punteggio {item.score>0?'+':''}{item.score}</div>
      <div className="fade-up" style={{ display:'flex', flexDirection:'column', gap:10, width:'100%', maxWidth:300 }}>
        <button className="btn btn-primary btn-block" onClick={onNext}>{Icon.plus({size:18,color:'#fff'})} Prossimo capo</button>
        <button onClick={onFinish} style={{ background:'none', border:'none', color:'rgba(255,255,255,.6)', fontFamily:'var(--font-body)', fontSize:14, fontWeight:600, cursor:'pointer' }}>Termina la sessione</button>
      </div>
    </div>
  );
}

Object.assign(window, { SwipePhase, ItemDonePhase, DragVariant, ButtonsVariant });