/* ── Sprint H : bloc d'édition adresse (rue / CP / ville / pays) ──
   Composant stable défini hors de CRMView (sinon le re-rendu vole le focus
   à chaque frappe). Backfill auto au mount : si l'item porte un ancien champ
   `adresse` legacy mais pas `adresseRue`, on copie tel quel + on pose le pays
   à "France" par défaut. La migration manuelle (rue / CP / ville propres) est
   ensuite faite par l'utilisateur. */
function AdresseBlock({item,sub,onUpdate}) {
  const inp={background:"#f8fafc",border:"1px solid #cbd5e1",borderRadius:8,color:"#1e293b",padding:"4px 8px",fontSize:12,width:"100%"};
  useEffect(()=>{
    if(!item) return;
    if((!item.adresseRue||item.adresseRue==="")&&item.adresse){
      onUpdate(sub,item.id,"adresseRue",item.adresse);
    }
    if(!item.pays) onUpdate(sub,item.id,"pays","France");
  // backfill une seule fois à l'ouverture de la fiche
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[item.id]);
  return (
    <div style={{gridColumn:"1/-1",background:"#f8fafc",borderRadius:8,padding:12,border:"1px solid #e2e8f0",marginBottom:4}}>
      <div style={{fontWeight:700,fontSize:12,color:"#334155",marginBottom:8}}>📍 Adresse</div>
      <div style={{marginBottom:8}}>
        <div style={{fontSize:10,color:"#64748b",marginBottom:3}}>Rue (numéro + voie)</div>
        <input value={item.adresseRue||""} onChange={e=>onUpdate(sub,item.id,"adresseRue",e.target.value)} style={inp}/>
      </div>
      <div style={{display:"grid",gridTemplateColumns:"120px 1fr 1fr",gap:8}}>
        <div>
          <div style={{fontSize:10,color:"#64748b",marginBottom:3}}>Code postal</div>
          <input value={item.codePostal||""} onChange={e=>onUpdate(sub,item.id,"codePostal",e.target.value)} style={inp}/>
        </div>
        <div>
          <div style={{fontSize:10,color:"#64748b",marginBottom:3}}>Ville</div>
          <input value={item.ville||""} onChange={e=>onUpdate(sub,item.id,"ville",e.target.value)} style={inp}/>
        </div>
        <div>
          <div style={{fontSize:10,color:"#64748b",marginBottom:3}}>Pays</div>
          <input value={item.pays||"France"} onChange={e=>onUpdate(sub,item.id,"pays",e.target.value)} style={inp}/>
        </div>
      </div>
    </div>
  );
}

/* ── CRMField : composant stable (hors du render) pour éviter la perte de focus ── */
function CRMField({label,field,big,item,onUpdate,sub}) {
  const inp={background:"#f8fafc",border:"1px solid #cbd5e1",borderRadius:8,color:"#1e293b",padding:"6px 10px",fontSize:13,width:"100%"};
  /* Dropdown pour le type de relation des clients */
  if(field==="typeRelation" && sub==="clients") {
    const val=item[field]||"Célibataire";
    return (
      <div style={{marginBottom:10}}>
        <div style={{fontSize:11,color:"#64748b",marginBottom:3}}>{label}</div>
        <select value={val} onChange={e=>onUpdate(sub,item.id,field,e.target.value)} style={inp}>
          {RELATION_TYPES.map(r=><option key={r} value={r}>{r}</option>)}
        </select>
      </div>
    );
  }
  /* Dropdown pour l'activité des entreprises */
  if(field==="activite" && sub==="entreprises") {
    const val=item[field]||"";
    const inList=ROLES_INTERVENANTS.includes(val);
    return (
      <div style={{marginBottom:10}}>
        <div style={{fontSize:11,color:"#64748b",marginBottom:3}}>{label}</div>
        <select value={val} onChange={e=>onUpdate(sub,item.id,field,e.target.value)} style={inp}>
          <option value="">— Sélectionner —</option>
          {ROLES_INTERVENANTS.map(r=><option key={r} value={r}>{r}</option>)}
          {!inList && val && <option value={val}>{val}</option>}
        </select>
      </div>
    );
  }
  return (
    <div style={{marginBottom:10}}>
      <div style={{fontSize:11,color:"#64748b",marginBottom:3}}>{label}</div>
      {big
        ?<textarea value={item[field]||""} onChange={e=>onUpdate(sub,item.id,field,e.target.value)} style={{...inp,height:70,resize:"vertical"}}/>
        :<input value={item[field]||""} onChange={e=>onUpdate(sub,item.id,field,e.target.value)} style={inp}/>
      }
    </div>
  );
}

/* ── CRM ── */
function CRMView({crm,setCrm}) {
  const [sub,setSub]=useState("clients");
  const [fiche,setFiche]=useState(null); // {type,id}
  const inp={background:"#f8fafc",border:"1px solid #cbd5e1",borderRadius:8,color:"#1e293b",padding:"6px 10px",fontSize:13,width:"100%"};
  const SUBS=[{id:"clients",label:"👤 Clients"},{id:"cgps",label:"🏦 Gestionnaires"},{id:"entreprises",label:"🏗 Entreprises"},{id:"banques",label:"🏛 Banques"},{id:"comptes",label:"📒 Plan comptable"}];
  // Tri alphabétique selon le sub courant. Clé adaptée :
  // - clients : nom + prénom
  // - cgps : société (fallback nom)
  // - entreprises / banques : nom
  // - comptes : libellé (fallback numéro)
  const SORT_KEY={
    clients:    x=>`${x.nom||""} ${x.prenom||""}`,
    cgps:       x=>x.societe||x.nom||"",
    entreprises:x=>x.nom||"",
    banques:    x=>x.nom||"",
    comptes:    x=>x.libelle||x.numero||"",
  };
  const items=React.useMemo(()=>{
    const list=crm[sub]||[];
    const keyFn=SORT_KEY[sub]||(x=>x.nom||"");
    return [...list].sort((a,b)=>keyFn(a).localeCompare(keyFn(b),"fr",{sensitivity:"base"}));
  },[crm,sub]);

  const updateItem=(type,id,field,val)=>setCrm(c=>({...c,[type]:c[type].map(x=>x.id===id?{...x,[field]:val}:x)}));
  const deleteItem=(type,id)=>setCrm(c=>({...c,[type]:c[type].filter(x=>x.id!==id)}));
  const addItem=(type,item)=>setCrm(c=>({...c,[type]:[...c[type],item]}));

  /* ── Contacts (pour banques) ── */
  const addContact=(banqueId)=>setCrm(c=>({...c,banques:c.banques.map(b=>b.id===banqueId?{...b,contacts:[...b.contacts,EMPTY_CONTACT()]}:b)}));
  const updateContact=(banqueId,cId,field,val)=>setCrm(c=>({...c,banques:c.banques.map(b=>b.id===banqueId?{...b,contacts:b.contacts.map(ct=>ct.id===cId?{...ct,[field]:val}:ct)}:b)}));
  const deleteContact=(banqueId,cId)=>setCrm(c=>({...c,banques:c.banques.map(b=>b.id===banqueId?{...b,contacts:b.contacts.filter(ct=>ct.id!==cId)}:b)}));

  /* ── Contacts (pour entreprises) ── */
  const addEntrepriseContact=(entId)=>setCrm(c=>({...c,entreprises:c.entreprises.map(e=>e.id===entId?{...e,contacts:[...(e.contacts||[]),EMPTY_CONTACT()]}:e)}));
  const updateEntrepriseContact=(entId,cId,field,val)=>setCrm(c=>({...c,entreprises:c.entreprises.map(e=>e.id===entId?{...e,contacts:(e.contacts||[]).map(ct=>ct.id===cId?{...ct,[field]:val}:ct)}:e)}));
  const deleteEntrepriseContact=(entId,cId)=>setCrm(c=>({...c,entreprises:c.entreprises.map(e=>e.id===entId?{...e,contacts:(e.contacts||[]).filter(ct=>ct.id!==cId)}:e)}));

  /* ── Comptes bancaires (pour clients / cgps / entreprises) ── */
  const addCompteBancaire=(type,itemId)=>setCrm(c=>({...c,[type]:c[type].map(x=>x.id===itemId?{...x,comptesBancaires:[...(x.comptesBancaires||[]),EMPTY_COMPTE_BANCAIRE()]}:x)}));
  const updateCompteBancaire=(type,itemId,cbId,field,val)=>setCrm(c=>({...c,[type]:c[type].map(x=>x.id===itemId?{...x,comptesBancaires:(x.comptesBancaires||[]).map(cb=>cb.id===cbId?{...cb,[field]:val}:cb)}:x)}));
  const deleteCompteBancaire=(type,itemId,cbId)=>setCrm(c=>({...c,[type]:c[type].map(x=>x.id===itemId?{...x,comptesBancaires:(x.comptesBancaires||[]).filter(cb=>cb.id!==cbId)}:x)}));

  const [search,setSearch]=useState("");
  const filtered=items.filter(x=>!search||["nom","prenom","societe","activite","libelle","numero"].some(k=>(x[k]||"").toLowerCase().includes(search.toLowerCase())));

  const renderFiche=()=>{
    const item=items.find(x=>x.id===fiche.id);
    if(!item) return null;
    const fields={
      // Sprint H : champ "Adresse" remplacé par le bloc <AdresseBlock/> inséré
      // sous la grille (clients / cgps / entreprises / banques).
      clients:[["Nom","nom"],["Prénom","prenom"],["Date de naissance","dateNaissance"],["Lieu de naissance","lieuNaissance"],["Profession","profession"],["Email","email"],["Téléphone","telephone"],["Type de relation","typeRelation"],["Gestionnaire","cgpId"],["Notes","notes",true]],
      cgps:[["Société","societe"],["Nom","nom"],["Prénom","prenom"],["Emails","emails"],["Téléphone","telephone"],["Notes","notes",true]],
      entreprises:[["Nom","nom"],["Activité","activite"],["Email(s)","emails"],["SIREN","siren"],["Notes","notes",true]],
      banques:[["Nom","nom"],["IBAN","iban"],["Notes","notes",true]],
      comptes:[["Numéro","numero"],["Libellé","libelle"]],
    };
    const hasComptesBancaires=["clients","cgps","entreprises"].includes(sub);

    if(sub==="comptes"){
      return (
        <div style={{padding:20,maxWidth:700,margin:"0 auto"}}>
          <div style={{display:"flex",gap:10,alignItems:"center",marginBottom:20}}>
            <button onClick={()=>setFiche(null)} style={{background:"#334155",color:"#fff",border:"none",borderRadius:7,padding:"5px 12px",cursor:"pointer",fontSize:12,fontWeight:600}}>← Retour</button>
            <div style={{fontWeight:800,fontSize:16}}>{item.numero?item.numero+" – ":""}{item.libelle||"(sans libellé)"}</div>
            <button onClick={()=>{deleteItem(sub,item.id);setFiche(null);}} style={{marginLeft:"auto",background:"none",border:"1px solid #f87171",borderRadius:6,color:"#dc2626",cursor:"pointer",fontSize:12,padding:"4px 10px"}}>🗑 Supprimer</button>
          </div>
          <div style={{background:"#fff",borderRadius:12,border:"1px solid #e2e8f0",padding:18}}>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
              <div><div style={{fontSize:11,color:"#64748b",marginBottom:3}}>Numéro</div><input value={item.numero||""} onChange={e=>updateItem(sub,item.id,"numero",e.target.value)} style={inp}/></div>
              <div><div style={{fontSize:11,color:"#64748b",marginBottom:3}}>Libellé</div><input value={item.libelle||""} onChange={e=>updateItem(sub,item.id,"libelle",e.target.value)} style={inp}/></div>
              <div><div style={{fontSize:11,color:"#64748b",marginBottom:3}}>Type de compte</div>
                <select value={item.type||"Charge"} onChange={e=>updateItem(sub,item.id,"type",e.target.value)} style={inp}>
                  {COMPTE_TYPES.map(t=><option key={t}>{t}</option>)}
                </select>
              </div>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div style={{padding:20,maxWidth:700,margin:"0 auto"}}>
        <div style={{display:"flex",gap:10,alignItems:"center",marginBottom:20}}>
          <button onClick={()=>setFiche(null)} style={{background:"#334155",color:"#fff",border:"none",borderRadius:7,padding:"5px 12px",cursor:"pointer",fontSize:12,fontWeight:600}}>← Retour</button>
          <div style={{fontWeight:800,fontSize:16}}>{item.nom||"(sans nom)"}{item.prenom?" "+item.prenom:""}</div>
          <button onClick={()=>{deleteItem(sub,item.id);setFiche(null);}} style={{marginLeft:"auto",background:"none",border:"1px solid #f87171",borderRadius:6,color:"#dc2626",cursor:"pointer",fontSize:12,padding:"4px 10px"}}>🗑 Supprimer</button>
        </div>
        <div style={{background:"#fff",borderRadius:12,border:"1px solid #e2e8f0",padding:18}}>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:4}}>
            {(fields[sub]||[]).map(([label,field,big])=>(
              <CRMField key={field} label={label} field={field} big={big} item={item} onUpdate={updateItem} sub={sub}/>
            ))}
            {/* Sprint H : bloc adresse (clients / cgps / entreprises / banques) */}
            {["clients","cgps","entreprises","banques"].includes(sub)&&(
              <AdresseBlock item={item} sub={sub} onUpdate={updateItem}/>
            )}
          </div>

          {/* ── Contacts (banques) ── */}
          {sub==="banques"&&(
            <div style={{marginTop:14}}>
              <div style={{fontWeight:700,fontSize:13,color:"#334155",marginBottom:8}}>Contacts</div>
              {(item.contacts||[]).map(ct=>(
                <div key={ct.id} style={{background:"#f8fafc",borderRadius:8,padding:10,marginBottom:8,border:"1px solid #e2e8f0"}}>
                  <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:6}}>
                    {[["Nom","nom"],["Prénom","prenom"],["Fonction","fonction"],["Email","email"],["Téléphone","telephone"]].map(([l,f])=>(
                      <div key={f}><div style={{fontSize:10,color:"#64748b",marginBottom:2}}>{l}</div>
                        <input value={ct[f]||""} onChange={e=>updateContact(item.id,ct.id,f,e.target.value)} style={{...inp,padding:"4px 8px",fontSize:12}}/></div>
                    ))}
                  </div>
                  <button onClick={()=>deleteContact(item.id,ct.id)} style={{marginTop:6,background:"none",border:"none",color:"#94a3b8",cursor:"pointer",fontSize:11}}>✕ Supprimer ce contact</button>
                </div>
              ))}
              <button onClick={()=>addContact(item.id)} style={{background:"none",border:"1px dashed #334155",borderRadius:6,color:"#64748b",fontSize:11,padding:"4px 14px",cursor:"pointer"}}>+ Ajouter un contact</button>
            </div>
          )}

          {/* ── Contacts (entreprises) ── */}
          {sub==="entreprises"&&(
            <div style={{marginTop:14}}>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8}}>
                <div style={{fontWeight:700,fontSize:13,color:"#334155"}}>👤 Contacts</div>
                <button onClick={()=>addEntrepriseContact(item.id)}
                  style={{background:"none",border:"1px dashed #334155",borderRadius:6,color:"#64748b",fontSize:11,padding:"3px 12px",cursor:"pointer"}}>
                  + Ajouter un contact
                </button>
              </div>
              {(item.contacts||[]).length===0&&(
                <div style={{fontSize:12,color:"#94a3b8",padding:"8px 0"}}>Aucun contact renseigné.</div>
              )}
              {(item.contacts||[]).map(ct=>(
                <div key={ct.id} style={{background:"#f8fafc",borderRadius:8,padding:10,marginBottom:8,border:"1px solid #e2e8f0"}}>
                  <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:6}}>
                    {[["Nom","nom"],["Prénom","prenom"],["Fonction","fonction"],["Email","email"],["Téléphone","telephone"]].map(([l,f])=>(
                      <div key={f}>
                        <div style={{fontSize:10,color:"#64748b",marginBottom:2}}>{l}</div>
                        <input value={ct[f]||""} onChange={e=>updateEntrepriseContact(item.id,ct.id,f,e.target.value)} style={{...inp,padding:"4px 8px",fontSize:12}}/>
                      </div>
                    ))}
                  </div>
                  <button onClick={()=>deleteEntrepriseContact(item.id,ct.id)} style={{marginTop:6,background:"none",border:"none",color:"#94a3b8",cursor:"pointer",fontSize:11}}>✕ Supprimer ce contact</button>
                </div>
              ))}
            </div>
          )}

          {/* ── Comptes bancaires (clients / cgps / entreprises) ── */}
          {/* ── Section conjoint(e) — clients non célibataires ── */}
          {sub==="clients"&&(item.typeRelation||"Célibataire")!=="Célibataire"&&(
            <div style={{marginTop:14}}>
              <div style={{fontWeight:700,fontSize:13,color:"#334155",marginBottom:8}}>👫 Conjoint(e) / Co-acquéreur</div>
              <div style={{background:"#f0fdf4",borderRadius:8,padding:12,border:"1px solid #86efac"}}>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
                  {[["Nom","conjointNom"],["Prénom","conjointPrenom"],["Date de naissance","conjointDateNaissance"],["Lieu de naissance","conjointLieuNaissance"],["Profession","conjointProfession"],["Téléphone","conjointTelephone"],["Email","conjointEmail"]].map(([l,f])=>(
                    <div key={f}>
                      <div style={{fontSize:10,color:"#64748b",marginBottom:2}}>{l}</div>
                      <input value={item[f]||""} onChange={e=>updateItem(sub,item.id,f,e.target.value)} style={{...inp,padding:"4px 8px",fontSize:12}}/>
                    </div>
                  ))}
                  <div style={{gridColumn:"1/-1",marginTop:4}}>
                    <div style={{fontSize:10,color:"#64748b",marginBottom:2}}>Régime matrimonial</div>
                    <input value={item.regimeMatrimonial||""} onChange={e=>updateItem(sub,item.id,"regimeMatrimonial",e.target.value)} placeholder="Ex: communauté réduite aux acquêts, séparation de biens…" style={{...inp,padding:"4px 8px",fontSize:12}}/>
                  </div>
                </div>
              </div>
            </div>
          )}
          {hasComptesBancaires&&(
            <div style={{marginTop:14}}>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8}}>
                <div style={{fontWeight:700,fontSize:13,color:"#334155"}}>🏦 Comptes bancaires</div>
                <button onClick={()=>addCompteBancaire(sub,item.id)}
                  style={{background:"none",border:"1px dashed #334155",borderRadius:6,color:"#64748b",fontSize:11,padding:"3px 12px",cursor:"pointer"}}>
                  + Ajouter un compte
                </button>
              </div>
              {(item.comptesBancaires||[]).length===0&&(
                <div style={{fontSize:12,color:"#94a3b8",padding:"8px 0"}}>Aucun compte bancaire renseigné.</div>
              )}
              {(item.comptesBancaires||[]).map(cb=>(
                <div key={cb.id} style={{background:"#f0f9ff",borderRadius:8,padding:12,marginBottom:8,border:"1px solid #bfdbfe"}}>
                  <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:8}}>
                    <div>
                      <div style={{fontSize:10,color:"#64748b",marginBottom:3}}>Banque</div>
                      <input value={cb.banque||""} onChange={e=>updateCompteBancaire(sub,item.id,cb.id,"banque",e.target.value)}
                        placeholder="Ex: BNP, Crédit Agricole…" style={{...inp,padding:"4px 8px",fontSize:12}}/>
                    </div>
                    <div>
                      <div style={{fontSize:10,color:"#64748b",marginBottom:3}}>Nom du compte</div>
                      <input value={cb.libelle||""} onChange={e=>updateCompteBancaire(sub,item.id,cb.id,"libelle",e.target.value)}
                        placeholder="Ex: Compte courant, Compte travaux…" style={{...inp,padding:"4px 8px",fontSize:12}}/>
                    </div>
                    <div>
                      <div style={{fontSize:10,color:"#64748b",marginBottom:3}}>IBAN</div>
                      <input value={cb.iban||""} onChange={e=>updateCompteBancaire(sub,item.id,cb.id,"iban",e.target.value)}
                        placeholder="FR76 XXXX…" style={{...inp,padding:"4px 8px",fontSize:12,fontFamily:"monospace"}}/>
                    </div>
                  </div>
                  <button onClick={()=>deleteCompteBancaire(sub,item.id,cb.id)}
                    style={{marginTop:6,background:"none",border:"none",color:"#94a3b8",cursor:"pointer",fontSize:11}}>✕ Supprimer ce compte</button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  };

  const createEmpty=()=>{
    const m={clients:EMPTY_CLIENT,cgps:EMPTY_CGP,entreprises:EMPTY_ENTREPRISE,banques:EMPTY_BANQUE,comptes:EMPTY_COMPTE};
    const item=(m[sub]||EMPTY_CLIENT)();
    addItem(sub,item);
    setFiche({type:sub,id:item.id});
  };

  if(fiche) return renderFiche();
  return (
    <div style={{padding:20,maxWidth:900,margin:"0 auto"}}>
      <div style={{display:"flex",gap:6,marginBottom:16,borderBottom:"1px solid #e2e8f0",paddingBottom:8}}>
        {SUBS.map(s=>(
          <button key={s.id} onClick={()=>{setSub(s.id);setSearch("");setFiche(null);}}
            style={{background:"none",border:"none",color:sub===s.id?"#2563eb":"#64748b",fontSize:13,fontWeight:sub===s.id?700:400,cursor:"pointer",borderBottom:sub===s.id?"2px solid #2563eb":"2px solid transparent",padding:"4px 8px"}}>
            {s.label}
          </button>
        ))}
      </div>
      <div style={{display:"flex",gap:8,marginBottom:12}}>
        <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Rechercher…" style={{...inp,flex:1,padding:"6px 12px"}}/>
        <button onClick={createEmpty} style={{background:"#2563eb",color:"#fff",border:"none",borderRadius:8,padding:"7px 18px",fontSize:13,fontWeight:700,cursor:"pointer"}}>+ Ajouter</button>
      </div>
      {filtered.length===0?<div style={{color:"#94a3b8",fontSize:13,padding:24,textAlign:"center"}}>Aucun enregistrement</div>:(
        <div style={{display:"flex",flexDirection:"column",gap:6}}>
          {filtered.map(item=>{
            const isCompte=sub==="comptes";
            const title=isCompte?(item.numero?item.numero+" – ":"")+( item.libelle||"(sans libellé)"):(item.nom||"(sans nom)")+(item.prenom?" "+item.prenom:"");
            const sub2=isCompte?item.type:(item.societe||item.activite||item.email||"");
            const nbCB=(item.comptesBancaires||[]).length;
            const nbCT=(item.contacts||[]).length;
            return (
              <div key={item.id} onClick={()=>setFiche({type:sub,id:item.id})}
                style={{background:"#fff",border:"1px solid #e2e8f0",borderRadius:10,padding:"10px 14px",cursor:"pointer",display:"flex",justifyContent:"space-between",alignItems:"center"}}
                onMouseEnter={e=>e.currentTarget.style.background="#f8fafc"}
                onMouseLeave={e=>e.currentTarget.style.background="#fff"}>
                <div>
                  <span style={{fontWeight:700,fontSize:13,marginRight:10}}>{title}</span>
                  <span style={{fontSize:11,color:"#64748b"}}>{sub2}</span>
                  {nbCT>0&&<span style={{marginLeft:8,fontSize:10,background:"#f3e8ff",color:"#7c3aed",borderRadius:4,padding:"1px 6px",fontWeight:600}}>👤 {nbCT} contact{nbCT>1?"s":""}</span>}
                  {nbCB>0&&<span style={{marginLeft:8,fontSize:10,background:"#dbeafe",color:"#1d4ed8",borderRadius:4,padding:"1px 6px",fontWeight:600}}>🏦 {nbCB} compte{nbCB>1?"s":""}</span>}
                </div>
                <button onClick={e=>{e.stopPropagation();deleteItem(sub,item.id);}} style={{background:"none",border:"none",color:"#94a3b8",cursor:"pointer",fontSize:14}}>✕</button>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}