function ParametresScreen() {
  const tr = (key) => typeof t !== 'undefined' ? t(key) : key;
  const { state, dispatch } = useStore();
  const { shop, currency, printer, logoUrl } = state;
  const [tab, setTab]           = React.useState('boutique');
  const [savedMsg, setSavedMsg] = React.useState(false);
  const [syncing, setSyncing]   = React.useState(false);
  const fileRef = React.useRef();

  const { catalog } = state;

  function handleLogo(e) {
    const file = e.target.files[0]; if(!file) return;
    const reader = new FileReader();
    reader.onload = ev => {
      dispatch({ type:'SET_LOGO', payload:ev.target.result });
      localStorage.setItem('pos_logo', ev.target.result);
    };
    reader.readAsDataURL(file);
  }

  function saveAll() {
    localStorage.setItem('pos_shop',     JSON.stringify(shop));
    localStorage.setItem('pos_currency', JSON.stringify(currency));
    localStorage.setItem('pos_printer',  JSON.stringify(printer));
    const bid = localStorage.getItem('pos_boutique_id');
    if (bid) window.SupaBase.updateBoutique(bid, shop).catch(e=>console.error(e));
    setSavedMsg(true); setTimeout(()=>setSavedMsg(false), 2500);
  }

  async function syncCloud() {
    setSyncing(true);
    const caissierActif = JSON.parse(localStorage.getItem('pos_cashier') || 'null');
    const caissiersList = JSON.parse(localStorage.getItem('pos_cashiers') || '[]');
    const caissiers     = caissierActif ? [caissierActif, ...caissiersList.filter(c=>c.id!==caissierActif.id)] : caissiersList;
    const clients       = JSON.parse(localStorage.getItem('pos_clients') || '[]');
    await window.SupaBase.syncAll(shop, catalog, clients, caissiers);
    setSyncing(false);
    setSavedMsg(true); setTimeout(()=>setSavedMsg(false), 2500);
  }

  const inp = (key, label) => (
    <div className="field">
      <label>{label}</label>
      <input value={shop[key]||''} onChange={e=>dispatch({type:'UPDATE_SHOP',payload:{[key]:e.target.value}})}/>
    </div>
  );

  const TABS = [
    ['boutique',    tr('boutique_tab')  || '🏪 Boutique'],
    ['caissier',    tr('caissier_tab')  || '👤 Caissier'],
    ['devise',      tr('devise_tab')    || '💱 Devise'],
    ['imprimante',  tr('imprimante_tab')],
    ['superviseurs',tr('superviseurs')  || '🔐 Superviseurs'],
  ];

  return (
    <div className="screen" style={{background:'#f0f4f8'}}>
      <div style={{flex:1, overflowY:'auto'}}>
        <div style={{maxWidth:860, margin:'0 auto', padding:'22px 22px 40px'}}>

          <div style={{fontFamily:"'Playfair Display',serif",fontSize:26,color:'#1e293b',marginBottom:6,fontWeight:700}}>{tr('parametres')}</div>
          <div style={{fontSize:13,color:'#94a3b8',marginBottom:22}}>{tr('config_desc')}</div>

          {/* TABS */}
          <div style={{display:'flex',borderBottom:'2px solid #e2e8f0',gap:2,marginBottom:22,background:'#fff',borderRadius:'12px 12px 0 0',padding:'0 8px',boxShadow:'0 1px 4px #0000000a',overflowX:'auto'}}>
            {TABS.map(([k,l]) => (
              <div key={k} className={`tab${tab===k?' active':''}`} onClick={()=>setTab(k)}>{l}</div>
            ))}
          </div>

          {/* BOUTIQUE */}
          {tab === 'boutique' && (
            <div>
              <div className="card">
                <div className="stitle">{tr('logo')}</div>
                <div className="logo-zone" onClick={()=>fileRef.current.click()}>
                  {logoUrl
                    ? <img src={logoUrl} style={{maxHeight:80,maxWidth:180,borderRadius:8}}/>
                    : <><div style={{fontSize:40,marginBottom:10}}>📁</div><div style={{color:'#94a3b8',fontSize:13,fontWeight:600}}>{tr('importer_logo')}</div></>
                  }
                </div>
                <input ref={fileRef} type="file" accept="image/*" style={{display:'none'}} onChange={handleLogo}/>
              </div>
              <div className="card">
                <div className="stitle">{tr("boutique_info")}</div>
                <div className="grid-2">
                  <div>{inp('brand',tr('marque')        || 'Marque')}</div>
                  <div>{inp('name',tr('nom_pv')  || 'Nom du point de vente')}</div>
                  <div>{inp('slogan1',tr('horaires1')    || 'Horaires ligne 1')}</div>
                  <div>{inp('slogan2',tr('horaires2')    || 'Horaires ligne 2')}</div>
                </div>
                {inp('merci',tr('msg_accueil') || "Message d'accueil")}
                {inp('siret',tr('siret')         || 'SIRET')}
                <div className="grid-2">
                  <div>{inp('terminal',tr('terminal')      || 'Terminal')}</div>
                  <div>{inp('caisse',tr('num_caisse')    || 'N° caisse')}</div>
                  <div>{inp('service',tr('service_client')|| 'Service client')}</div>
                  <div>{inp('contact',tr('email')         || 'Email')}</div>
                </div>
                {inp('fidelite',tr('msg_fidelite'))}

       <div className="stitle" style={{marginTop:20}}>📱 Mobile Money</div>
       <div className="grid-2">
         <div>{inp('wave_number', 'Wave', '+225 XX XX XX XX')}</div>
         <div>{inp('orange_number', 'Orange Money', '+225 XX XX XX XX')}</div>
         <div>{inp('mtn_number', 'MTN MoMo', '+225 XX XX XX XX')}</div>
         <div>{inp('moov_number', 'Moov Money', '+225 XX XX XX XX')}</div>
       </div>
                <div style={{marginTop:20,display:'flex',alignItems:'center',gap:14,flexWrap:'wrap'}}>
                  <button className="btn-success" onClick={saveAll} style={{padding:'12px 28px',fontSize:14}}>{tr("sauvegarder")}</button>
                  <button className="btn-ghost" onClick={syncCloud} style={{padding:'12px 20px',fontSize:14}}>
                    {syncing ? '⏳ Sync...' : tr('sync_cloud')}
                  </button>
                  {savedMsg && <span style={{color:'#16a34a',fontSize:13,fontWeight:700}}>✅ Sauvegardé !</span>}
                </div>
              </div>
            </div>
          )}

          {/* CAISSIER */}
          {tab === 'caissier' && <CaissierManager />}

          {/* DEVISE */}
          {tab === 'devise' && (
            <div className="card">
              <div className="stitle">💱 Devise de vente</div>
              <div className="grid-cur" style={{marginBottom:20}}>
                {CURRENCIES.map(c => (
                  <div key={c.code} className={`cur-card${currency.code===c.code?' active':''}`}
                    onClick={()=>dispatch({type:'SET_CURRENCY',payload:c})}>
                    <span style={{fontFamily:"'DM Mono',monospace",fontSize:20,color:currency.code===c.code?'#2563eb':'#64748b',minWidth:36,fontWeight:700}}>{c.symbol}</span>
                    <div>
                      <div style={{fontSize:13,color:'#1e293b',fontWeight:currency.code===c.code?700:500}}>{c.name}</div>
                      <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:'#94a3b8',marginTop:2}}>{c.code}</div>
                    </div>
                    {currency.code===c.code && <span style={{marginLeft:'auto',color:'#2563eb',fontSize:18,fontWeight:700}}>✓</span>}
                  </div>
                ))}
              </div>
              <div style={{display:'flex',alignItems:'center',gap:14}}>
                <button className="btn-success" onClick={saveAll} style={{padding:'12px 28px',fontSize:14}}>{tr("sauvegarder")}</button>
                {savedMsg && <span style={{color:'#16a34a',fontSize:13,fontWeight:700}}>✅ Devise sauvegardée !</span>}
              </div>
            </div>
          )}

          {/* IMPRIMANTE */}
          {tab === 'imprimante' && (
            <div className="card">
              <div className="stitle">{tr('imprimante')}</div>
              <div className="grid-3" style={{marginBottom:18}}>
                {PRINTER_SIZES.map(p => (
                  <div key={p.id} className={`printer-card${printer.id===p.id?' active':''}`}
                    onClick={()=>dispatch({type:'SET_PRINTER',payload:p})}>
                    <div style={{fontFamily:"'Playfair Display',serif",fontSize:28,color:printer.id===p.id?'#2563eb':'#94a3b8',marginBottom:6,fontWeight:700}}>{p.label}</div>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:11,color:'#94a3b8',marginBottom:8}}>{p.chars} {tr('chars_per_line')||'car./ligne'}</div>
                    <div style={{fontSize:12,color:'#64748b',fontWeight:500}}>{tr('printer_'+p.id)||p.desc}</div>
                    {printer.id===p.id && <div style={{color:'#2563eb',fontSize:22,marginTop:10,fontWeight:700}}>✓</div>}
                  </div>
                ))}
              </div>
              <div className="info-box">
                <div>📌 <strong>58 mm</strong> — {tr('p58')||'Épicerie, caisse mobile'}</div>
                <div>📌 <strong>80 mm</strong> — {tr('p80')||'Supermarché, boutique — standard'}</div>
                <div>📌 <strong>112 mm</strong> — {tr('p112')||'Grande surface, entrepôt'}</div>
                <div style={{marginTop:8,color:'#94a3b8',fontSize:11}}>✅ {tr('printer_compat')||'Compatible : Epson TM · Star TSP · Bixolon SRP · Citizen CT'}</div>
              </div>
              <div style={{marginTop:18,display:'flex',alignItems:'center',gap:14}}>
                <button className="btn-success" onClick={saveAll} style={{padding:'12px 28px',fontSize:14}}>{tr("sauvegarder")}</button>
                {savedMsg && <span style={{color:'#16a34a',fontSize:13,fontWeight:700}}>✅ Format sauvegardé !</span>}
              </div>
            </div>
          )}

          {/* SUPERVISEURS */}
          {tab === 'superviseurs' && <SuperviseurManager />}

        </div>
      </div>
    </div>
  );
}