/* ============ ENJOY THE GAME — shared UI ============ */ const { useState, useEffect, useRef, useCallback } = React; /* ---- store hook ---- */ function useStore(){ const [,force]=useState(0); useEffect(()=> window.ETG.Store.subscribe(()=>force(n=>n+1)), []); return window.ETG.Store; } /* ---- brand mark (the 4-wedge "D") ---- */ function DMark({size=28, spin=false, style}){ return ; } function Wordmark({size=15}){ return ( ENJOY THE GAME ); } /* ---- icons (simple line set) ---- */ const Ic = { home:(p)=>, live:(p)=>, bracket:(p)=>, cal:(p)=>, table:(p)=>, staff:(p)=>, back:(p)=>, fwd:(p)=>, check:(p)=>, close:(p)=>, user:(p)=>, users:(p)=>, pin:(p)=>, clock:(p)=>, pen:(p)=>, whistle:(p)=>, trophy:(p)=>, plus:(p)=>, ball:(p)=>, copy:(p)=>, lock:(p)=>, key:(p)=>, userplus:(p)=>, trash:(p)=>, chat:(p)=>, mail:(p)=>, alert:(p)=>, }; /* ---- buttons ---- */ function Btn({variant='primary', size, block, children, className='', ...rest}){ const cls=['btn','btn-'+variant, size==='lg'?'btn-lg':'', size==='sm'?'btn-sm':'', block?'btn-block':'', className].join(' '); return ; } /* ---- form fields ---- */ function Field({label, req, hint, error, children}){ return (

{label && {label}{req && *}} {children} {error ? {error} : hint ? {hint} : null}

); } function Text({value,onChange,error,...rest}){ return onChange(e.target.value)} {...rest}/>; } function Area({value,onChange,...rest}){ return

onChange(e.target.value)} {...rest}/>;
}
function Select({value,onChange,options,placeholder,error}){
  return (
    <select className={'control'+(error?' err':'')} value={value||''} onChange={e=>onChange(e.target.value)}>
      {placeholder && <option value="">{placeholder}</option>}
      {options.map(o=> typeof o==='string'? <option key={o} value={o}>{o}</option> : <option key={o.v} value={o.v}>{o.l}</option>)}
    </select>
  );
}
function Seg({value,onChange,options}){
  return (
    <div className="seg">
      {options.map(o=>{const v=o.v??o,l=o.l??o; return (
        <button key={v} className={value===v?'on':''} onClick={()=>onChange(v)} type="button">{l}</button>
      );})}
    </div>
  );
}
function OptionCard({on,onClick,children}){
  return <div className={'optcard'+(on?' on':'')} onClick={onClick}><span className="radio-dot"></span><div style={{flex:1}}>{children}</div></div>;
}

/* ---- codice fiscale: single clean uppercase field (16 chars) ---- */
function CFInput({value='', onChange, error}){
  const clean=(value||'').toUpperCase();
  const left=16-clean.length;
  return (
    <div>
      <input className={'control cf-field'+(error?' err':'')} value={clean}
        onChange={e=>onChange(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g,'').slice(0,16))}
        inputMode="text" autoCapitalize="characters" spellCheck="false" placeholder="RSSMRC01D12L407K" maxLength={16}/>
      <div className="tiny" style={{marginTop:5,textAlign:'right',color:left===0?'var(--ok)':'var(--ink-3)'}}>
        {clean.length}/16{left===0?' ✓':''}
      </div>
    </div>
  );
}

/* ---- signature pad ---- */
function SignaturePad({value, onChange, height=150}){
  const cvs=useRef(null); const wrap=useRef(null); const drawing=useRef(false); const last=useRef(null);
  const [signed,setSigned]=useState(!!value);

useEffect(()=>{
    const c=cvs.current; const w=wrap.current.clientWidth;
    const dpr=window.devicePixelRatio||1;
    c.width=w*dpr; c.height=height*dpr; c.style.width=w+'px'; c.style.height=height+'px';
    const ctx=c.getContext('2d'); ctx.scale(dpr,dpr); ctx.lineWidth=2.4; ctx.lineCap='round'; ctx.lineJoin='round'; ctx.strokeStyle='#19150F';
    if(value){ const img=new Image(); img.onload=()=>ctx.drawImage(img,0,0,w,height); img.src=value; }
  },[]);

return (
    <div ref={wrap} style={{position:'relative'}}>
      <canvas ref={cvs} className={'sigpad'+(signed?' signed':'')}
        onMouseDown={start} onMouseMove={move} onMouseUp={end} onMouseLeave={end}
        onTouchStart={start} onTouchMove={move} onTouchEnd={end}/>
      {!signed && <div style={{position:'absolute',inset:0,display:'grid',placeItems:'center',pointerEvents:'none',color:'#c2b9aa',fontSize:13,fontWeight:600}}>
        <span style={{display:'flex',alignItems:'center',gap:7}}><Ic.pen style={{width:16,height:16}}/> Firma qui con il dito</span></div>}
      <button type="button" onClick={clear} className="btn btn-ghost btn-sm" style={{position:'absolute',top:8,right:8,padding:'5px 11px'}}>Cancella</button>
    </div>
  );
}

/* ---- avatar ---- */
function Avatar({name,color,size=40}){
  const tag=(name||'?').split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase();
  return <span className="avatar" style={{background:color||'var(--teal)',width:size,height:size,fontSize:size*.36}}>{tag}</span>;
}

/* ---- toast ---- */
function useToast(){
  const [msg,setMsg]=useState(null);
  const show=useCallback((m)=>{ setMsg(m); setTimeout(()=>setMsg(null),2600); },[]);
  const node = msg ? <div className="toast"><Ic.check style={{width:18,height:18,color:'var(--orange)'}}/>{msg}</div> : null;
  return [node, show];
}

/* ---- bottom sheet ---- */
function Sheet({open,onClose,children}){
  if(!open) return null;
  return (
    <div className="sheet-back" onClick={onClose}>
      <div className="sheet" onClick={e=>e.stopPropagation()}>
        <div className="sheet-grab"></div>
        {children}
      </div>
    </div>
  );
}

Object.assign(window,{
  useStore, DMark, Wordmark, Ic, Btn, Field, Text, Area, Select, Seg, OptionCard,
  CFInput, SignaturePad, Avatar, useToast, Sheet
});