/* 11 Partners — "Cupido cobra" (Fase 1e)
   Alta de partner, login y mini-panel con su código PART-XXXXXX, sus números
   y sus referidos (SOLO el ID del cliente: privacidad RGPD por diseño). */

function Partner({ go }) {
  const [mode, setMode] = React.useState(() => (CruceAPI.Partner.Session.get() ? 'panel' : 'hero'));
  const [form, setForm] = React.useState({ name:'', email:'', phone:'', city:'', iban:'', password:'', accepts_terms:false });
  const [login, setLogin] = React.useState({ email:'', password:'' });
  const [panel, setPanel] = React.useState(null);
  const [referrals, setReferrals] = React.useState(null);
  const [error, setError] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [copied, setCopied] = React.useState('');

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const setL = (k, v) => setLogin(f => ({ ...f, [k]: v }));

  async function loadPanel() {
    const [me, refs] = await Promise.all([CruceAPI.Partner.me(), CruceAPI.Partner.referrals()]);
    setPanel(me); setReferrals(refs.referrals || []);
    if (me && me.partner) CruceAPI.Partner.Session.set(CruceAPI.Partner.Session.get().token, me.partner);
  }

  React.useEffect(() => { if (mode === 'panel') loadPanel().catch(e => { setError(e.message); setMode('hero'); }); }, [mode]);

  async function doRegister(ev) {
    ev.preventDefault(); setError(''); setBusy(true);
    try {
      const r = await CruceAPI.Partner.register({
        name: form.name.trim(), email: form.email.trim(), phone: form.phone.trim() || undefined,
        city: form.city.trim() || undefined, iban: form.iban.trim() || undefined,
        password: form.password, accepts_terms: form.accepts_terms,
      });
      CruceAPI.Partner.Session.set(r.token, r.partner);
      setMode('panel');
    } catch (e) { setError(e.message); } finally { setBusy(false); }
  }

  async function doLogin(ev) {
    ev.preventDefault(); setError(''); setBusy(true);
    try {
      const r = await CruceAPI.Partner.login(login.email.trim(), login.password);
      CruceAPI.Partner.Session.set(r.token, r.partner);
      setMode('panel');
    } catch (e) { setError(e.message); } finally { setBusy(false); }
  }

  function logout() { CruceAPI.Partner.Session.clear(); setPanel(null); setReferrals(null); setMode('hero'); }

  function copy(text, what) {
    navigator.clipboard && navigator.clipboard.writeText(text);
    setCopied(what); setTimeout(() => setCopied(''), 1500);
  }

  if (mode === 'panel' && panel) {
    const p = panel.partner, s = panel.stats || {};
    const saleLabel = { pending_payment: 'Pendiente de pago', paid: 'Pagado', refunded: 'Reembolsado', cancelled: 'Cancelado' };
    return (
      <div className="partner-page">
        <div className="checkout-top">
          <button className="btn btn-ghost btn-sm" onClick={logout}><I.ArrowLeft size={14}/> Salir</button>
          <div className="sello" style={{fontSize:22}}>Cruce</div>
          <div className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>PANEL PARTNER</div>
        </div>

        <div className="partner-hero card">
          <div className="eyebrow"><span className="dot"></span>Hola, {p.name}. Tu clabe de Cupido:</div>
          <div className="partner-code mono">{p.code}</div>
          <div className="partner-code-actions">
            <button className="btn btn-outline btn-sm" onClick={() => copy(p.code, 'code')}>
              <I.Shield size={13}/> {copied === 'code' ? '¡Copiado!' : 'Copiar código'}
            </button>
            <button className="btn btn-outline btn-sm" onClick={() => copy(panel.referral_link, 'link')}>
              {copied === 'link' ? '¡Copiado!' : 'Copiar link con código'}
            </button>
          </div>
          <div className="partner-hero-hint mono">{panel.referral_link}</div>
          <p className="partner-hero-note">
            Quien se registre con tu código queda vinculado a ti: aparece en tu panel como cliente
            tuyo y, cuando pague el Club, se confirma tu comisión de 10€. El pago siempre lo hace
            el cliente con Stripe — tú nunca tocas su dinero ni su tarjeta.
          </p>
        </div>

        <div className="partner-stats">
          {[
            ['Registrados', s.registrados || 0],
            ['Pagados', s.pagados || 0],
            ['Pendientes de pago', s.pendientes || 0],
            ['Comisión pendiente (€)', s.comision_pendiente || 0],
            ['Comisión cobrada (€)', s.comision_cobrada || 0],
          ].map(([label, val]) => (
            <div key={label} className="card partner-stat">
              <div className="partner-stat-num serif">{val}</div>
              <div className="partner-stat-lbl">{label}</div>
            </div>
          ))}
        </div>

        <div className="card partner-refs">
          <div className="mono" style={{fontSize:11, letterSpacing:'.1em', color:'var(--ink-3)', marginBottom:14}}>TUS CLIENTES</div>
          {!referrals || referrals.length === 0 ? (
            <p style={{color:'var(--ink-3)', fontSize:14}}>Todavía no has registrado a nadie. Comparte tu código en la calle, en tus redes o por WhatsApp.</p>
          ) : (
            <table className="partner-table">
              <thead>
                <tr><th>ID cliente</th><th>Alta</th><th>Plan</th><th>Venta</th><th>Comisión</th></tr>
              </thead>
              <tbody>
                {referrals.map(r => (
                  <tr key={r.client_id + '-' + r.registered_at}>
                    <td className="mono">#{r.client_id}</td>
                    <td>{(r.registered_at || '').slice(0, 16)}</td>
                    <td>{r.plan}</td>
                    <td><span className={"chip " + (r.sale_status === 'paid' ? 'red' : '')}>{saleLabel[r.sale_status] || r.sale_status}</span></td>
                    <td>{r.sale_status === 'refunded' ? '0€' : r.commission + '€'}{r.commission_paid ? ' · cobrada' : ''}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
          <p className="partner-privacy">
            <I.Shield size={13}/> Por privacidad (RGPD) solo ves el ID numérico de cada cliente.
            Nunca verás su nombre, email ni teléfono.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="partner-page">
      <div className="checkout-top">
        <button className="btn btn-ghost btn-sm" onClick={() => go('landing')}><I.ArrowLeft size={14}/> Volver</button>
        <div className="sello" style={{fontSize:22}}>Cruce</div>
        <div className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>CUPIDO COBRA</div>
      </div>

      <div className="partner-body">
        <div>
          <div className="eyebrow"><span className="dot"></span>Programa de partners</div>
          <h1 className="serif partner-title">Lleva tu código.<br/><em style={{color:'var(--red)'}}>Cobra 10€</em> por cada uno que pague.</h1>
          <p className="partner-lead">
            En la feria, en el concierto, en la fiesta de pueblo: registras gente en 2 minutos
            desde tu móvil. El cliente paga online cuando quiera (Stripe, 3DS2), tú cobras 10€
            por cada suscripción. Tú nunca pides tarjeta: solo compartes tu código.
          </p>
          <ul className="partner-facts">
            <li><I.Check size={13}/> Sin inversión ni stock: solo tu código PART-XXXXXX</li>
            <li><I.Check size={13}/> Cobro mensual por transferencia a tu IBAN</li>
            <li><I.Check size={13}/> Panel con tus números en tiempo real</li>
          </ul>
          <div style={{display:'flex', gap:12, marginTop:28, flexWrap:'wrap'}}>
            <button className="btn btn-red btn-lg" onClick={() => { setError(''); setMode('register'); }}>Quiero ser Cupido</button>
            <button className="btn btn-outline btn-lg" onClick={() => { setError(''); setMode('login'); }}>Ya tengo código · Entrar</button>
          </div>
        </div>

        {(mode === 'register' || mode === 'login') && (
          <form className="card partner-form" onSubmit={mode === 'register' ? doRegister : doLogin}>
            <div className="mono" style={{fontSize:11, letterSpacing:'.1em', color:'var(--ink-3)', marginBottom:16}}>
              {mode === 'register' ? 'ALTA DE PARTNER' : 'ENTRAR AL PANEL'}
            </div>

            {mode === 'register' && (
              <>
                <PF label="Nombre y apellidos"><input value={form.name} onChange={e=>set('name',e.target.value)} placeholder="María Pérez" required/></PF>
                <PF label="Email"><input type="email" value={form.email} onChange={e=>set('email',e.target.value)} placeholder="tu@email.com" required/></PF>
                <PF label="Móvil (opcional)"><input value={form.phone} onChange={e=>set('phone',e.target.value)} placeholder="+34 600 000 000"/></PF>
                <PF label="Ciudad"><input value={form.city} onChange={e=>set('city',e.target.value)} placeholder="Madrid"/></PF>
                <PF label="IBAN para cobrar tus comisiones"><input value={form.iban} onChange={e=>set('iban',e.target.value)} placeholder="ES91 2100 0418 4502 0005 1332"/></PF>
                <PF label="Contraseña (mín. 8)"><input type="password" value={form.password} onChange={e=>set('password',e.target.value)} required/></PF>
                <label className="consent-check">
                  <input type="checkbox" checked={form.accepts_terms} onChange={e=>set('accepts_terms', e.target.checked)}/>
                  <span>Soy mayor de edad, soy autónomo/responsable de mis ingresos, y acepto las condiciones del programa de partners y el tratamiento de mis datos.</span>
                </label>
              </>
            )}

            {mode === 'login' && (
              <>
                <PF label="Email"><input type="email" value={login.email} onChange={e=>setL('email',e.target.value)} required/></PF>
                <PF label="Contraseña"><input type="password" value={login.password} onChange={e=>setL('password',e.target.value)} required/></PF>
              </>
            )}

            {error && <div className="partner-error">{error}</div>}

            <button className="btn btn-red btn-lg" style={{width:'100%', marginTop:14}} disabled={busy}>
              {busy ? 'Un momento…' : mode === 'register' ? 'Crear mi cuenta y obtener código' : 'Entrar a mi panel'} <I.Arrow size={14}/>
            </button>
            <button type="button" className="btn btn-ghost btn-sm" style={{width:'100%', marginTop:8}}
              onClick={() => { setError(''); setMode('hero'); }}>Volver</button>
          </form>
        )}
      </div>
    </div>
  );
}

function PF({ label, children }) {
  return (
    <label className="partner-field">
      <span>{label}</span>
      {children}
    </label>
  );
}

window.Partner = Partner;