// AcademiaDental — Referrals
const { useState: useStateR } = React;

function ReferralsScreen({ session, setRoute }) {
  const S = window.AD_STATE;
  const user = S.K ? Object.values(JSON.parse(localStorage.getItem('ad.users') || '{}')).find(u => u.email === session.email) : null;
  const code = (user && user.code) || 'USER-0000';
  const ref = S.getReferrals(session.email);
  const [copied, setCopied] = useStateR(false);

  function share() {
    const url = location.origin + location.pathname + '?ref=' + code;
    if (navigator.share) {
      navigator.share({ title: 'AcademiaDental', text: 'Estudia odontología conmigo · 10% OFF con mi código', url }).catch(()=>{});
    } else {
      copy(url);
    }
  }
  function copy(text) {
    navigator.clipboard.writeText(text || code).then(() => {
      setCopied(true);
      window.AD_TOAST.show('¡Copiado!');
      setTimeout(() => setCopied(false), 1500);
    }, () => window.AD_TOAST.show('No se pudo copiar'));
  }

  return (
    <>
      <TopBar back={{onClick:() => setRoute('account'), label:'Cuenta'}} title="Referidos y créditos"/>
      <div className="content-scroll">
        <div style={{background:'linear-gradient(135deg,#E1F5EE 0%, #C8EBDC 100%)',borderRadius:'var(--radius-lg)',padding:'16px 18px'}}>
          <div className="small" style={{color:'var(--teal)',marginBottom:8}}>Tu código único</div>
          <div className="copy-box" onClick={() => copy(code)}>{copied ? '¡Copiado!' : code}</div>
          <div style={{display:'flex',gap:8}}>
            <button className="btn small" style={{width:'auto',flex:1}} onClick={() => copy(location.origin + location.pathname + '?ref=' + code)}>Copiar enlace</button>
            <button className="btn small secondary" style={{width:'auto',flex:1,background:'rgba(255,255,255,0.6)',border:'none'}} onClick={share}>Compartir</button>
          </div>
        </div>

        <div className="metric-grid cols-3" style={{marginTop:14}}>
          <div className="metric-card"><div className="metric-val text-teal">{ref.count}</div><div className="metric-lbl">Referidos</div></div>
          <div className="metric-card"><div className="metric-val" style={{color:'var(--blue)'}}>${(ref.earned).toLocaleString('es-CL')}</div><div className="metric-lbl">Ganados</div></div>
          <div className="metric-card"><div className="metric-val" style={{color:'var(--amber)'}}>${ref.credits.toLocaleString('es-CL')}</div><div className="metric-lbl">Disponible</div></div>
        </div>

        <div className="sec-label">Cómo funciona</div>
        <div className="card">
          <div className="chain-step">
            <div className="chain-dot-big" style={{background:'var(--teal-light)'}}>1</div>
            <div style={{flex:1,fontSize:13,color:'var(--gray-600)',lineHeight:1.5}}>Compras cualquier módulo → recibes tu código único personal</div>
          </div>
          <div className="chain-step">
            <div className="chain-dot-big" style={{background:'var(--blue)'}}>2</div>
            <div style={{flex:1,fontSize:13,color:'var(--gray-600)',lineHeight:1.5}}>Tu referido compra con tu código → él recibe <strong className="text-teal">10% OFF</strong></div>
          </div>
          <div className="chain-step">
            <div className="chain-dot-big" style={{background:'var(--amber)'}}>3</div>
            <div style={{flex:1,fontSize:13,color:'var(--gray-600)',lineHeight:1.5}}>Tú ganas <strong className="text-teal">$15.000 de crédito</strong> para el siguiente módulo</div>
          </div>
          <div className="chain-step">
            <div className="chain-dot-big" style={{background:'var(--purple)'}}>+</div>
            <div style={{flex:1,fontSize:13,color:'var(--gray-600)',lineHeight:1.5}}>Si tu referido también refiere → <strong style={{color:'var(--purple)'}}>$5.000 adicionales</strong> por cada nivel</div>
          </div>
        </div>

        <div className="card mt-3">
          <div style={{fontSize:13,fontWeight:500,marginBottom:8}}>Descuentos acumulables (ejemplo)</div>
          <div className="row-between" style={{padding:'5px 0',borderBottom:'1px solid var(--gray-200)',fontSize:13}}><span className="muted">Escalera (módulo 2)</span><span className="text-teal">−15%</span></div>
          <div className="row-between" style={{padding:'5px 0',borderBottom:'1px solid var(--gray-200)',fontSize:13}}><span className="muted">Crédito referido</span><span className="text-teal">−$15.000</span></div>
          <div className="row-between" style={{padding:'7px 0',fontSize:14,fontWeight:500}}><span>Total</span><span className="text-teal" style={{fontSize:15}}>$112.500</span></div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { ReferralsScreen });