function ClientsScreen() {
  const { state, notify } = useStore();
  const { currency } = state;
  const tr = (key) => typeof t !== 'undefined' ? t(key) : key;

  const [tab, setTab]           = React.useState('liste');
  const [search, setSearch]     = React.useState('');
  const [editClient, setEditClient] = React.useState(null);
  const [clients, setClients]   = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('pos_clients') || '[]'); }
    catch(e) { return []; }
  });
  const [form, setForm] = React.useState({ nom:'', prenom:'', telephone:'', email:'' });
  const [syncing, setSyncing]   = React.useState(false);

  function niveau(pts) {
    if (pts >= 5000) return { label:tr('platine')||'Platine', color:'#8b5cf6', icon:'💎', min:5000, reduction:15 };
    if (pts >= 2000) return { label:tr('or')||'Or',           color:'#f59e0b', icon:'🥇', min:2000, reduction:10 };
    if (pts >= 500)  return { label:tr('argent')||'Argent',   color:'#64748b', icon:'🥈', min:500,  reduction:5  };
    return                  { label:tr('bronze')||'Bronze',   color:'#b45309', icon:'🥉', min:0,    reduction:2  };
  }

  function saveClients(list) {
    setClients(list);
    localStorage.setItem('pos_clients', JSON.stringify(list));
  }

  function ajouterClient() {
    if (!form.nom || !form.telephone) { notify(tr('champs_obligatoires')||'Nom et téléphone obligatoires', 'err'); return; }
    const bid = localStorage.getItem('pos_boutique_id');

    if (editClient) {
      // Modifier client existant
      const updated = clients.map(c => c.id === editClient.id ? {...c, nom:form.nom.toUpperCase(), prenom:form.prenom, telephone:form.telephone, email:form.email} : c);
      saveClients(updated);
      if (bid && window.SupaBase) {
        const updatedClient = updated.find(c => c.id === editClient.id);
        if (updatedClient) window.SupaBase.saveClient(bid, updatedClient).catch(()=>{});
      }
      notify('✅ Client modifié');
      setEditClient(null);
    } else {
      // Nouveau client
      const newClient = {
        id:              'c_'+Date.now(),
        nom:             form.nom.toUpperCase(),
        prenom:          form.prenom,
        telephone:       form.telephone,
        email:           form.email,
        points:          0,
        totalAchats:     0,
        nbVisites:       0,
        historique:      [],
        dateInscription: new Date().toLocaleDateString('fr-FR'),
      };
      const list = [...clients, newClient];
      saveClients(list);
      if (bid && window.SupaBase) window.SupaBase.saveClient(bid, newClient).catch(()=>{});
      notify('✅ '+newClient.nom+' ajouté');
    }
    setForm({ nom:'', prenom:'', telephone:'', email:'' });
    setTab('liste');
  }

  function editClientFn(c) {
    setEditClient(c);
    setForm({ nom:c.nom, prenom:c.prenom||'', telephone:c.telephone, email:c.email||'' });
    setTab('nouveau');
  }

  function supprimerClient(id) {
    if (!window.confirm('Supprimer ce client ?')) return;
    const toDelete = clients.find(c => c.id === id);
    const list = clients.filter(c => c.id !== id);
    saveClients(list);
    const bid = localStorage.getItem('pos_boutique_id');
    if (bid && toDelete && toDelete.supabase_id && window.SupaBase) {
      window.SupaBase.deleteClient(toDelete.supabase_id).catch(()=>{});
    }
    notify('Client supprimé', 'err');
  }

  async function syncCloud() {
    setSyncing(true);
    const bid = localStorage.getItem('pos_boutique_id');
    if (bid && window.SupaBase) {
      for (const c of clients) await window.SupaBase.saveClient(bid, c).catch(()=>{});
    }
    setSyncing(false);
    notify('✅ Sync OK');
  }

  const filtered = clients.filter(c =>
    !search ||
    c.nom.toLowerCase().includes(search.toLowerCase()) ||
    (c.prenom||'').toLowerCase().includes(search.toLowerCase()) ||
    c.telephone.includes(search)
  );

  const totalPoints  = clients.reduce((s,c) => s+(c.points||0), 0);
  const actifs       = clients.filter(c => (c.nbVisites||0) > 0);
  const platines     = clients.filter(c => (c.points||0) >= 5000);

  return (
    <div className="screen" style={{background:'#f0f4f8'}}>
      <div style={{flex:1,overflowY:'auto',padding:18}}>

        {/* KPIs */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:18}}>
          {[
            {label:tr('total_clients')||'TOTAL CLIENTS',   val:clients.length,  color:'#2563eb', icon:'👥'},
            {label:tr('clients_actifs')||'ACTIFS',         val:actifs.length,   color:'#16a34a', icon:'✅'},
            {label:tr('total_points')||'TOTAL POINTS',     val:totalPoints,     color:'#f59e0b', icon:'⭐'},
            {label:tr('membres_platine')||'PLATINE',       val:platines.length, color:'#8b5cf6', icon:'💎'},
          ].map((k,i) => (
            <div key={i} style={{background:'#fff',borderRadius:13,padding:16,borderTop:'4px solid '+k.color,boxShadow:'0 1px 4px #0000000a'}}>
              <div style={{display:'flex',justifyContent:'space-between',marginBottom:8}}>
                <div style={{fontSize:10,color:'#94a3b8',fontWeight:700,textTransform:'uppercase',letterSpacing:.8}}>{k.label}</div>
                <span style={{fontSize:18}}>{k.icon}</span>
              </div>
              <div style={{fontFamily:"'Playfair Display',serif",fontSize:24,color:k.color,fontWeight:700}}>{k.val}</div>
            </div>
          ))}
        </div>

        {/* Tabs */}
        <div style={{display:'flex',gap:4,marginBottom:18,background:'#fff',borderRadius:'12px 12px 0 0',padding:'0 8px',boxShadow:'0 1px 4px #0000000a',borderBottom:'2px solid #e2e8f0',alignItems:'center'}}>
          {[['liste','👥 '+(tr('onglet_clients')||'CLIENTS')],['nouveau', editClient ? '✏️ Modifier' : '+ '+(tr('nouveau_client')||'NOUVEAU CLIENT')],['niveaux','⭐ '+(tr('niveaux_fidelite')||'NIVEAUX')]].map(([k,l])=>(
            <div key={k} className={`tab${tab===k?' active':''}`} onClick={()=>{if(k!=='nouveau'){setEditClient(null);setForm({nom:'',prenom:'',telephone:'',email:''});}setTab(k);}} style={{fontSize:12}}>{l}</div>
          ))}
          <div style={{marginLeft:'auto',paddingRight:8}}>
            <button className="btn-ghost btn-sm" onClick={syncCloud}>
              {syncing?'⏳...':'☁️ '+(tr('sync')||'Sync')}
            </button>
          </div>
        </div>

        {/* Liste clients */}
        {tab === 'liste' && (
          <div className="card">
            <input value={search} onChange={e=>setSearch(e.target.value)}
              placeholder={tr('rechercher_client')||'Rechercher par nom ou téléphone...'}
              style={{marginBottom:14}}/>
            {filtered.length === 0 ? (
              <div style={{textAlign:'center',color:'#94a3b8',padding:'30px 0'}}>
                <div style={{fontSize:40,marginBottom:10}}>👥</div>
                {tr('aucun_client')||'Aucun client'}
              </div>
            ) : filtered.map(c => {
              const niv = niveau(c.points||0);
              return (
                <div key={c.id} style={{display:'flex',alignItems:'center',gap:14,padding:'14px 16px',borderRadius:12,marginBottom:8,background:'#f8fafc',border:'1.5px solid #e2e8f0'}}>
                  <div style={{width:46,height:46,borderRadius:23,background:niv.color+'22',display:'flex',alignItems:'center',justifyContent:'center',fontSize:20,flexShrink:0}}>{niv.icon}</div>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:2}}>
                      <span style={{fontSize:14,color:'#1e293b',fontWeight:700}}>{c.prenom} {c.nom}</span>
                      <span style={{background:niv.color+'18',color:niv.color,borderRadius:5,fontSize:10,padding:'2px 7px',fontWeight:700}}>{niv.label}</span>
                    </div>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:11,color:'#94a3b8'}}>{c.telephone} {c.email?'· '+c.email:''}</div>
                    <div style={{fontSize:11,color:'#64748b',marginTop:2}}>{c.nbVisites||0} visites · {fmtN(c.totalAchats||0,currency)}</div>
                  </div>
                  <div style={{textAlign:'right',flexShrink:0}}>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:15,color:niv.color,fontWeight:700}}>{c.points||0} pts</div>
                    <div style={{display:'flex',gap:6,marginTop:6}}>
                      <button onClick={()=>editClientFn(c)} style={{background:'#eff6ff',border:'1px solid #bfdbfe',borderRadius:7,padding:'4px 8px',fontSize:11,color:'#2563eb',cursor:'pointer',fontWeight:700}}>✏️</button>
                      <button onClick={()=>supprimerClient(c.id)} style={{background:'#fff1f2',border:'1px solid #fecaca',borderRadius:7,padding:'4px 8px',fontSize:11,color:'#dc2626',cursor:'pointer',fontWeight:700}}>🗑</button>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* Nouveau/Modifier client */}
        {tab === 'nouveau' && (
          <div className="card" style={{maxWidth:500}}>
            <div className="stitle">{editClient ? '✏️ Modifier le client' : '+ '+(tr('nouveau_client')||'Nouveau client')}</div>
            <div className="grid-2">
              <div>
                <label>{tr('nom')||'Nom'} *</label>
                <input value={form.nom} onChange={e=>setForm({...form,nom:e.target.value})} placeholder="DUPONT"/>
              </div>
              <div>
                <label>{tr('prenom')||'Prénom'}</label>
                <input value={form.prenom} onChange={e=>setForm({...form,prenom:e.target.value})} placeholder="Jean"/>
              </div>
            </div>
            <label>{tr('telephone')||'Téléphone'} *</label>
            <input value={form.telephone} onChange={e=>setForm({...form,telephone:e.target.value})} placeholder="07 XX XX XX XX"/>
            <label>{tr('email')||'Email'}</label>
            <input type="email" value={form.email} onChange={e=>setForm({...form,email:e.target.value})} placeholder="jean@email.com"/>
            <div style={{display:'flex',gap:10,marginTop:8}}>
              <button className="btn-primary" style={{flex:1,padding:'12px'}} onClick={ajouterClient}>
                {editClient ? '✅ Enregistrer' : '✅ '+(tr('ajouter')||'Ajouter')}
              </button>
              <button className="btn-ghost" style={{padding:'12px 16px'}} onClick={()=>{setEditClient(null);setForm({nom:'',prenom:'',telephone:'',email:''});setTab('liste');}}>
                Annuler
              </button>
            </div>
          </div>
        )}

        {/* Niveaux fidélité */}
        {tab === 'niveaux' && (
          <div>
            {[
              {label:tr('platine')||'Platine', color:'#8b5cf6', icon:'💎', min:5000, reduction:15, nb:clients.filter(c=>(c.points||0)>=5000).length},
              {label:tr('or')||'Or',           color:'#f59e0b', icon:'🥇', min:2000, reduction:10, nb:clients.filter(c=>(c.points||0)>=2000&&(c.points||0)<5000).length},
              {label:tr('argent')||'Argent',   color:'#64748b', icon:'🥈', min:500,  reduction:5,  nb:clients.filter(c=>(c.points||0)>=500&&(c.points||0)<2000).length},
              {label:tr('bronze')||'Bronze',   color:'#b45309', icon:'🥉', min:0,    reduction:2,  nb:clients.filter(c=>(c.points||0)<500).length},
            ].map((n,i) => (
              <div key={i} style={{background:'#fff',borderRadius:14,padding:20,marginBottom:14,border:'2px solid '+n.color+'33',display:'flex',alignItems:'center',gap:16}}>
                <span style={{fontSize:36}}>{n.icon}</span>
                <div style={{flex:1}}>
                  <div style={{fontFamily:"'Playfair Display',serif",fontSize:18,color:n.color,fontWeight:700,marginBottom:4}}>{n.label}</div>
                  <div style={{fontSize:12,color:'#64748b'}}>≥ {n.min} pts · {n.reduction}% réduction</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div style={{fontFamily:"'DM Mono',monospace",fontSize:24,color:n.color,fontWeight:700}}>{n.nb}</div>
                  <div style={{fontSize:10,color:'#94a3b8'}}>membres</div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}