// ── CLIENTES v2 — localStorage, vacío al inicio ────────

function Clientes() {
  const { useState } = React;
  const [clientes,  setClientes]  = useState(()=>lsGet('clientes',[]));
  const [selId,     setSel]       = useState(null);
  const [busqueda,  setBusqueda]  = useState('');
  const [filtroTipo,setFiltro]    = useState('Todos');
  const [modalNuevo,setModal]     = useState(false);
  const [emailModal,setEmailModal]= useState(null);
  const [nuevo, setNuevo] = useState({nombre:'',rut:'',email:'',telefono:'',ciudad:'',cumpleanos:'',tipo:'Regular',notas:''});

  function guardar(lista){ setClientes(lista); lsSet('clientes',lista); }
  function agregar(){
    guardar([...clientes,{...nuevo,id:'cli-'+Date.now(),tags:[],ultimaCompra:'',totalCompras:0}]);
    setModal(false);
    setNuevo({nombre:'',rut:'',email:'',telefono:'',ciudad:'',cumpleanos:'',tipo:'Regular',notas:''});
  }

  const ventas  = lsGet('ventas',[]);
  const ordenes = lsGet('ordenes',[]);
  const filtrados = clientes.filter(c=>{
    const q=busqueda.toLowerCase();
    return (filtroTipo==='Todos'||c.tipo===filtroTipo)&&(!q||c.nombre?.toLowerCase().includes(q)||c.rut?.includes(q));
  });
  const selCliente = clientes.find(c=>c.id===selId);
  const histOrdenes= selCliente?ordenes.filter(o=>o.clienteNombre===selCliente.nombre):[];
  const histVentas = selCliente?ventas.filter(v=>v.clienteNombre===selCliente.nombre):[];
  const totalCli   = histVentas.reduce((s,v)=>s+(v.total||0),0);

  const tipoBadge=t=>({fontSize:'9px',padding:'2px 7px',borderRadius:'20px',fontWeight:600,background:t==='VIP'?'rgba(201,168,76,0.18)':t==='Nuevo'?'rgba(39,174,96,0.18)':'rgba(255,255,255,0.07)',color:t==='VIP'?'var(--gold)':t==='Nuevo'?'#27ae60':'var(--cream-3)',border:t==='VIP'?'1px solid rgba(201,168,76,0.4)':'1px solid transparent'});

  const hoyDate=new Date();
  const proxCump=clientes.filter(c=>{
    if(!c.cumpleanos) return false;
    const b=new Date(c.cumpleanos); const n=new Date(hoyDate.getFullYear(),b.getMonth(),b.getDate());
    if(n<hoyDate) n.setFullYear(hoyDate.getFullYear()+1);
    return (n-hoyDate)/(1000*60*60*24)<=30;
  });

  return (
    <div style={{display:'flex',height:'100%',overflow:'hidden'}}>
      <div style={{width:'330px',display:'flex',flexDirection:'column',borderRight:'1px solid var(--border)',overflow:'hidden'}}>
        <div style={{display:'flex',gap:'5px',padding:'8px 10px',borderBottom:'1px solid var(--border)',flexWrap:'wrap'}}>
          <input style={{flex:1,minWidth:'100px',...inv2Styles.searchInput}} placeholder="Buscar cliente…" value={busqueda} onChange={e=>setBusqueda(e.target.value)}/>
          <select style={{...invStyles2.select}} value={filtroTipo} onChange={e=>setFiltro(e.target.value)}>
            {['Todos','VIP','Regular','Nuevo'].map(t=><option key={t}>{t}</option>)}
          </select>
          <button onClick={()=>setModal(true)} style={inv2Styles.btnGold}>+</button>
        </div>
        {proxCump.length>0&&(
          <div style={{padding:'7px 10px',background:'rgba(201,168,76,0.06)',borderBottom:'1px solid var(--border)'}}>
            <div style={{fontSize:'10px',color:'var(--gold)',fontWeight:600,marginBottom:'4px'}}>🎂 Cumpleaños próximos</div>
            {proxCump.map(c=><div key={c.id} style={{display:'flex',justifyContent:'space-between',fontSize:'11px',color:'var(--cream-2)',marginBottom:'2px'}}>
              <span>{c.nombre}</span><span style={{color:'var(--cream-3)'}}>{new Date(c.cumpleanos).toLocaleDateString('es-CL',{day:'2-digit',month:'2-digit'})}</span>
            </div>)}
          </div>
        )}
        <div style={{flex:1,overflowY:'auto'}}>
          {filtrados.length===0
            ? <div style={{textAlign:'center',padding:'40px',color:'var(--cream-3)'}}>
                <div style={{fontSize:'28px',marginBottom:'8px'}}>👥</div>
                {busqueda?'Sin resultados':'Sin clientes registrados.\nPresiona + para agregar el primero.'}
              </div>
            : filtrados.map(c=>(
              <div key={c.id} onClick={()=>setSel(c.id===selId?null:c.id)}
                style={{display:'flex',alignItems:'center',gap:'8px',padding:'8px 10px',borderBottom:'1px solid var(--border)',cursor:'pointer',...(selId===c.id?{background:'rgba(201,168,76,0.07)',borderLeft:'2px solid var(--gold)'}:{})}}>
                <div style={{width:'32px',height:'32px',borderRadius:'50%',background:'var(--surface-2)',border:'1px solid var(--border)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--gold)',fontWeight:700,fontSize:'12px',flexShrink:0}}>
                  {c.nombre.split(' ').map(n=>n[0]).join('').slice(0,2)}
                </div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:'flex',alignItems:'center',gap:'5px'}}>
                    <span style={{color:'var(--cream)',fontWeight:500,fontSize:'12px'}}>{c.nombre}</span>
                    <span style={tipoBadge(c.tipo)}>{c.tipo}</span>
                  </div>
                  <div style={{color:'var(--cream-3)',fontSize:'10px'}}>{c.ciudad||c.rut||'—'}</div>
                </div>
              </div>
            ))
          }
        </div>
      </div>

      <div style={{flex:1,overflow:'hidden'}}>
        {!selCliente
          ? <div style={{display:'flex',alignItems:'center',justifyContent:'center',height:'100%',color:'var(--cream-3)',flexDirection:'column',gap:'12px'}}>
              <div style={{fontSize:'36px'}}>✦</div>Selecciona un cliente para ver su ficha
            </div>
          : <div style={{padding:'20px',overflowY:'auto',height:'100%'}}>
              <div style={{display:'flex',alignItems:'flex-start',gap:'12px',marginBottom:'16px'}}>
                <div style={{width:'46px',height:'46px',borderRadius:'50%',background:'var(--surface-2)',border:'1px solid var(--border)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--gold)',fontWeight:700,fontSize:'17px',flexShrink:0}}>
                  {selCliente.nombre.split(' ').map(n=>n[0]).join('').slice(0,2)}
                </div>
                <div style={{flex:1}}>
                  <div style={{display:'flex',alignItems:'center',gap:'7px',marginBottom:'2px'}}>
                    <span style={{fontFamily:'Cormorant Garamond,serif',fontSize:'21px',fontWeight:600,color:'var(--cream)'}}>{selCliente.nombre}</span>
                    <span style={tipoBadge(selCliente.tipo)}>{selCliente.tipo}</span>
                  </div>
                  <div style={{color:'var(--cream-3)',fontSize:'11px'}}>{selCliente.rut||'Sin RUT'}</div>
                </div>
                <div style={{display:'flex',gap:'4px'}}>
                  {selCliente.email&&<button onClick={()=>setEmailModal(selCliente)} style={{...inv2Styles.btnSec,fontSize:'11px'}}>✉️</button>}
                  <button onClick={()=>setSel(null)} style={{background:'none',border:'none',color:'var(--cream-3)',cursor:'pointer'}}>✕</button>
                </div>
              </div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'6px',marginBottom:'12px'}}>
                {[{l:'Email',v:selCliente.email},{l:'Teléfono',v:selCliente.telefono},{l:'Ciudad',v:selCliente.ciudad},{l:'Cumpleaños',v:selCliente.cumpleanos?new Date(selCliente.cumpleanos).toLocaleDateString('es-CL'):'—'}].map(f=>(
                  <div key={f.l} style={{background:'var(--surface)',borderRadius:'7px',padding:'8px',border:'1px solid var(--border)'}}>
                    <div style={{fontSize:'10px',color:'var(--cream-3)',marginBottom:'2px'}}>{f.l}</div>
                    <div style={{color:'var(--cream)',fontSize:'12px'}}>{f.v||'—'}</div>
                  </div>
                ))}
              </div>
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'6px',marginBottom:'12px'}}>
                {[{l:'Total compras',v:clp(totalCli),c:'var(--gold)'},{l:'OT taller',v:histOrdenes.length,c:'var(--cream)'},{l:'Visitas',v:histVentas.length,c:'var(--cream)'}].map(k=>(
                  <div key={k.l} style={{background:'var(--surface)',borderRadius:'8px',padding:'10px',textAlign:'center',border:'1px solid var(--border)'}}>
                    <div style={{color:k.c,fontWeight:700,fontSize:'16px'}}>{k.v}</div>
                    <div style={{color:'var(--cream-3)',fontSize:'9px',marginTop:'2px'}}>{k.l}</div>
                  </div>
                ))}
              </div>
              {selCliente.notas&&<div style={{background:'var(--surface)',borderRadius:'8px',padding:'9px',marginBottom:'12px',fontSize:'12px',color:'var(--cream-2)',borderLeft:'2px solid var(--gold)',lineHeight:'1.6'}}>{selCliente.notas}</div>}
              {histOrdenes.length>0&&(
                <div>
                  <div style={{fontSize:'10px',color:'var(--cream-3)',fontWeight:600,letterSpacing:'0.5px',marginBottom:'7px',textTransform:'uppercase'}}>Órdenes de Taller</div>
                  {histOrdenes.map(o=>(
                    <div key={o.id} style={{display:'flex',justifyContent:'space-between',padding:'6px 0',borderBottom:'1px solid var(--border)',fontSize:'11px'}}>
                      <div><div style={{color:'var(--cream)',fontWeight:500}}>{o.tipo}</div><div style={{color:'var(--cream-3)',fontSize:'10px'}}>{o.id}</div></div>
                      <div style={{textAlign:'right'}}><div style={estadoBadge(o.estado)}>{o.estado}</div><div style={{color:'var(--gold)',fontSize:'12px',fontWeight:600,marginTop:'3px'}}>{clp(o.valorPresupuesto)}</div></div>
                    </div>
                  ))}
                </div>
              )}
            </div>
        }
      </div>

      {modalNuevo&&(
        <div style={posStyles.overlay} onClick={e=>e.target===e.currentTarget&&setModal(false)}>
          <div style={{...posStyles.modalBox,maxWidth:'410px'}}>
            <div style={{...posStyles.modalHeader,marginBottom:'13px'}}>
              <span style={{fontFamily:'Cormorant Garamond,serif',fontSize:'20px',fontWeight:600}}>Nuevo Cliente</span>
              <button onClick={()=>setModal(false)} style={posStyles.clearBtn}>✕</button>
            </div>
            {[{l:'Nombre completo *',k:'nombre',ph:'María González'},{l:'RUT',k:'rut',ph:'12.345.678-9'},{l:'Teléfono',k:'telefono',ph:'+56 9 xxxx xxxx'},{l:'Email',k:'email',ph:'correo@ejemplo.cl',t:'email'},{l:'Ciudad',k:'ciudad',ph:'Santa Cruz'},{l:'Cumpleaños',k:'cumpleanos',t:'date'}].map(f=>(
              <div key={f.k} style={{marginBottom:'8px'}}>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>{f.l}</div>
                <input type={f.t||'text'} placeholder={f.ph||''} style={calcStyles.input} value={nuevo[f.k]} onChange={e=>setNuevo(n=>({...n,[f.k]:e.target.value}))}/>
              </div>
            ))}
            <div style={{marginBottom:'12px'}}>
              <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'5px'}}>Tipo</div>
              <div style={{display:'flex',gap:'6px'}}>
                {['Regular','VIP','Nuevo'].map(t=>(
                  <button key={t} onClick={()=>setNuevo(n=>({...n,tipo:t}))}
                    style={{...posStyles.descBtn,flex:1,...(nuevo.tipo===t?posStyles.descBtnActive:{})}}>
                    {t}
                  </button>
                ))}
              </div>
            </div>
            <button onClick={agregar} style={{...posStyles.cobrarBtn,width:'100%'}}>✦ Guardar Cliente</button>
          </div>
        </div>
      )}

      {emailModal&&typeof EmailModal!=='undefined'&&<EmailModal orden={{...emailModal,clienteNombre:emailModal.nombre,emailCliente:emailModal.email,id:'CLIENTE',descripcion:'',tipo:'Comunicación',valorPresupuesto:0,fechaPromesa:''}} tipo="cliente" onClose={()=>setEmailModal(null)}/>}
    </div>
  );
}

Object.assign(window, { Clientes });