/* LIA · Perfil de usuario */

function ViewPerfil({userId, onUpdate}) {
  const [nombre, setNombre]   = React.useState('');
  const [empresa, setEmpresa] = React.useState('');
  const [email, setEmail]     = React.useState('');
  const [avatar, setAvatar]   = React.useState(null);
  const [saving, setSaving]   = React.useState(false);
  const [msg, setMsg]         = React.useState('');
  const [err, setErr]         = React.useState('');

  React.useEffect(() => {
    if (!window._sb || !userId) return;
    window._sb.auth.getUser().then(({data:{user}}) => {
      if (user) {
        setEmail(user.email || '');
        setNombre(user.user_metadata?.full_name || '');
        setEmpresa(user.user_metadata?.company_name || '');
      }
    });
    window._sb.from('profiles').select('full_name,company_name,avatar_url').eq('id', userId).single()
      .then(({data}) => {
        if (data) {
          if (data.full_name)    setNombre(data.full_name);
          if (data.company_name) setEmpresa(data.company_name);
          if (data.avatar_url)   setAvatar(data.avatar_url);
        }
      });
  }, [userId]);

  async function handleFoto(e) {
    const file = e.target.files[0];
    if (!file) return;
    if (file.size > 300000) { setErr('La foto debe ser menor a 300 KB.'); return; }
    const reader = new FileReader();
    reader.onload = function(ev) {
      setAvatar(ev.target.result);
      try { localStorage.setItem('lia_avatar', ev.target.result); } catch(e) {}
    };
    reader.readAsDataURL(file);
  }

  async function guardar() {
    setMsg(''); setErr('');
    if (!nombre.trim()) { setErr('El nombre no puede estar vacío.'); return; }
    setSaving(true);
    try {
      /* Solo full_name y company_name al servidor (columnas que siempre existen) */
      await window.LIA_CONFIG.serverCall('/api/update-profile', {
        full_name:    nombre,
        company_name: empresa,
      });
      /* Avatar se guarda en localStorage — no requiere columna en Supabase */
      if (avatar && avatar.startsWith('data:image')) {
        try { localStorage.setItem('lia_avatar', avatar); } catch(e) {}
      }
      setMsg('Perfil actualizado correctamente.');
      if (onUpdate) onUpdate({ nombre, empresa, avatar });
    } catch(e) { setErr(e.message); }
    finally { setSaving(false); }
  }

  const avatarSrc = avatar || localStorage.getItem('lia_avatar');
  const inp = { style: {width:'100%',background:'rgba(255,255,255,0.05)',border:'1px solid rgba(96,165,250,0.25)',borderRadius:10,padding:'11px 14px',color:'var(--text)',fontSize:14,fontFamily:'inherit',outline:'none',boxSizing:'border-box'} };

  return (
    <div className="fade-up" style={{maxWidth:600,margin:'0 auto'}}>
      <div className="section-title" style={{fontSize:18,marginBottom:20}}>Mi Perfil</div>

      {/* Avatar */}
      <div className="card" style={{marginBottom:'var(--gap-grid)'}}>
        <div style={{display:'flex',alignItems:'center',gap:20}}>
          <label style={{cursor:'pointer',position:'relative'}}>
            <div style={{width:72,height:72,borderRadius:16,overflow:'hidden',background:'linear-gradient(140deg,var(--accent),#1d4ed8)',display:'grid',placeItems:'center',border:'2px solid var(--border-2)'}}>
              {avatarSrc
                ? <img src={avatarSrc} alt="foto" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                : <span style={{fontFamily:'Syne',fontWeight:800,fontSize:24,color:'#fff'}}>{nombre.charAt(0)||'?'}</span>
              }
            </div>
            <div style={{position:'absolute',bottom:-4,right:-4,width:22,height:22,borderRadius:99,background:'var(--accent)',display:'grid',placeItems:'center',border:'2px solid var(--surface)'}}>
              <Icon name="upload" size={11} style={{color:'#fff'}}/>
            </div>
            <input type="file" accept="image/*" style={{display:'none'}} onChange={handleFoto}/>
          </label>
          <div>
            <div style={{fontFamily:'Syne',fontWeight:700,fontSize:16}}>{nombre||'Sin nombre'}</div>
            <div style={{color:'var(--muted)',fontSize:13,marginTop:3}}>{email}</div>
            <div style={{color:'var(--accent-2)',fontSize:12,marginTop:2}}>{empresa}</div>
            <div style={{color:'var(--muted)',fontSize:11,marginTop:4}}>Foto máx. 300 KB</div>
          </div>
        </div>
      </div>

      {/* Datos personales */}
      <div className="card" style={{marginBottom:'var(--gap-grid)'}}>
        <div className="section-title" style={{marginBottom:16,fontSize:14}}>Datos personales</div>
        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          <div>
            <div style={{fontSize:11.5,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.08em',marginBottom:6}}>Nombre completo</div>
            <input {...inp} value={nombre} onChange={e=>setNombre(e.target.value)} placeholder="Tu nombre completo"/>
          </div>
          <div>
            <div style={{fontSize:11.5,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.08em',marginBottom:6}}>Empresa / Razón social</div>
            <input {...inp} value={empresa} onChange={e=>setEmpresa(e.target.value)} placeholder="Nombre de tu empresa"/>
          </div>
          <div>
            <div style={{fontSize:11.5,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.08em',marginBottom:6}}>Correo electrónico</div>
            <input {...inp} value={email} disabled style={{...inp.style, opacity:.5, cursor:'not-allowed'}}/>
            <div style={{fontSize:11,color:'var(--muted)',marginTop:4}}>El correo no se puede cambiar.</div>
          </div>
        </div>
      </div>

      {err && <div style={{color:'#f87171',fontSize:13,padding:'10px 14px',background:'rgba(248,113,113,0.08)',borderRadius:8,border:'1px solid rgba(248,113,113,0.2)',marginBottom:14}}>{err}</div>}
      {msg && <div style={{color:'#22c55e',fontSize:13,padding:'10px 14px',background:'rgba(34,197,94,0.08)',borderRadius:8,border:'1px solid rgba(34,197,94,0.2)',marginBottom:14}}>{msg}</div>}

      <button className="btn btn-primary" onClick={guardar} disabled={saving} style={{width:'100%',justifyContent:'center'}}>
        {saving?'Guardando…':'Guardar cambios'}
      </button>
    </div>
  );
}

window.ViewPerfil = ViewPerfil;