/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, NavBar, Footer */
/* partners.jsx — Programa de Partners. */

const { useState } = React;

const PARTNERS_API_URL = 'https://script.google.com/macros/s/AKfycby5A4DL7P7uhlst-yInQj3K3olPu9q3mw9qa3HgPzXg8E2cMIHg0smtTgqM5nbYu5eS/exec';

const PLAN_VALUES      = ['starter', 'professional', 'enterprise'];
const PLAN_COMMISSIONS = { starter: 399, professional: 1999, enterprise: null };
const COMMISSION_AMOUNTS = ['$399', '$1.999', 'A conv.'];

const fmt = (n, lang) =>
  n == null
    ? (lang === 'en' ? 'To be agreed' : 'A convenir')
    : `$${n.toLocaleString(lang === 'en' ? 'en-US' : 'es-AR')}`;

const postReferral = (payload) =>
  new Promise((resolve) => {
    if (!PARTNERS_API_URL) { resolve({ success: false }); return; }
    const cb = `_ptsave_${Date.now()}`;
    const script = document.createElement('script');
    const params = new URLSearchParams({ ...payload, action: 'save', callback: cb });
    window[cb] = (data) => { resolve(data); delete window[cb]; script.remove(); };
    script.src = `${PARTNERS_API_URL}?${params.toString()}`;
    script.onerror = () => { resolve({ success: false }); script.remove(); };
    document.head.appendChild(script);
    setTimeout(() => { if (window[cb]) { resolve({ success: false }); delete window[cb]; script.remove(); } }, 10000);
  });

const queryStats = (alias) =>
  new Promise((resolve) => {
    if (!PARTNERS_API_URL) { resolve(null); return; }
    const cb = `_ptcb_${Date.now()}`;
    const script = document.createElement('script');
    window[cb] = (data) => { resolve(data); delete window[cb]; script.remove(); };
    script.src = `${PARTNERS_API_URL}?action=query&alias=${encodeURIComponent(alias)}&callback=${cb}`;
    script.onerror = () => { resolve(null); script.remove(); };
    document.head.appendChild(script);
    setTimeout(() => { if (window[cb]) { resolve(null); delete window[cb]; script.remove(); } }, 8000);
  });

// ── Hero ──────────────────────────────────────────────────────────────────────
const PartnersHero = () => {
  const { c } = useLang();
  const p = c.partners;
  return (
    <section className="pt-hero">
      <div className="tm-container">
        <span className="pt-eyebrow">{p.eyebrow}</span>
        <h1 className="pt-h1">{p.h1}</h1>
        <p className="pt-sub">
          {p.sub.split('100%')[0]}<strong>100%</strong>{p.sub.split('100%')[1]}
        </p>
      </div>
    </section>
  );
};

// ── Commission cards ──────────────────────────────────────────────────────────
const CommissionCards = () => {
  const { c } = useLang();
  const p = c.partners;
  return (
    <section className="pt-tiers">
      <div className="tm-container">
        <div className="pt-tiers-grid">
          {p.tiers.map((t, i) => (
            <div key={i} className={`pt-tier ${i === 1 ? 'is-highlighted' : ''}`}>
              {i === 1 && <span className="pt-tier-badge">{t.badge}</span>}
              <span className="pt-tier-plan">{['Starter', 'Professional', 'Enterprise'][i]}</span>
              <span className="pt-tier-amount">{COMMISSION_AMOUNTS[i]}</span>
              <p className="pt-tier-note">{t.note}</p>
              <p className="pt-tier-sub">{t.sub}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};


// ── Tab: Registrar ────────────────────────────────────────────────────────────
const TabRegistrar = () => {
  const { c, lang } = useLang();
  const p = c.partners;
  const empty = { partnerName: '', partnerEmail: '', referredName: '', referredEmail: '', referredCompany: '', expectedPlan: 'starter' };
  const [form, setForm] = useState(empty);
  const [status, setStatus] = useState('idle');
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const commission = PLAN_COMMISSIONS[form.expectedPlan];

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      await postReferral({ ...form, potentialCommission: commission || '', timestamp: new Date().toISOString() });
      setStatus('done');
      setForm(empty);
    } catch { setStatus('error'); }
  };

  if (status === 'done') return (
    <div className="pt-tab-body pt-success">
      <i className="ph-bold ph-check-circle pt-success-icon" />
      <p className="pt-success-title">{p.success.title}</p>
      <p className="pt-success-sub">{p.success.sub}</p>
      <button className="tm-btn tm-btn-ghost" onClick={() => setStatus('idle')}>{p.actions.registerAnother}</button>
    </div>
  );

  return (
    <form className="pt-tab-body" onSubmit={handleSubmit}>
      <div className="pt-fields-grid">
        <div className="pt-field">
          <label className="pt-label">{p.labels.partnerName}</label>
          <input className="pt-input" type="text" placeholder={p.placeholders.partnerName}
            value={form.partnerName} onChange={set('partnerName')} required maxLength={80} />
        </div>
        <div className="pt-field">
          <label className="pt-label">{p.labels.partnerEmail}</label>
          <input className="pt-input" type="email" placeholder={p.placeholders.partnerEmail}
            value={form.partnerEmail} onChange={set('partnerEmail')} required />
        </div>
        <div className="pt-field">
          <label className="pt-label">{p.labels.referredName}</label>
          <input className="pt-input" type="text" placeholder={p.placeholders.referredName}
            value={form.referredName} onChange={set('referredName')} required maxLength={80} />
        </div>
        <div className="pt-field">
          <label className="pt-label">{p.labels.referredEmail}</label>
          <input className="pt-input" type="email" placeholder={p.placeholders.referredEmail}
            value={form.referredEmail} onChange={set('referredEmail')} required />
        </div>
        <div className="pt-field">
          <label className="pt-label">{p.labels.referredCompany}</label>
          <input className="pt-input" type="text" placeholder={p.placeholders.referredCompany}
            value={form.referredCompany} onChange={set('referredCompany')} required maxLength={80} />
        </div>
        <div className="pt-field">
          <label className="pt-label">{p.labels.expectedPlan}</label>
          <select className="pt-input pt-select" value={form.expectedPlan} onChange={set('expectedPlan')}>
            {PLAN_VALUES.map((v, i) => <option key={v} value={v}>{p.planOptions[i].label}</option>)}
          </select>
        </div>
      </div>
      {commission && (
        <p className="pt-commission-preview">
          {p.commissionPreview} <strong>{fmt(commission, lang)}</strong>
        </p>
      )}
      <button className="tm-btn tm-btn-dark pt-submit-btn" type="submit" disabled={status === 'sending'}>
        {status === 'sending'
          ? <><i className="ph-bold ph-circle-notch pt-spin" /> {p.actions.registering}</>
          : <><i className="ph-bold ph-paper-plane-tilt" /> {p.actions.register}</>}
      </button>
      {status === 'error' && (
        <p className="pt-error">{p.error} <a href="mailto:info@teramot.com">info@teramot.com</a></p>
      )}
    </form>
  );
};

// ── Tab: Mis referidos ────────────────────────────────────────────────────────
const TabMisReferidos = () => {
  const { c, lang } = useLang();
  const p = c.partners;
  const [alias, setAlias] = useState('');
  const [stats, setStats] = useState(null);
  const [loading, setLoading] = useState(false);
  const [queried, setQueried] = useState(false);

  const handleQuery = async (e) => {
    e.preventDefault();
    if (!alias.trim()) return;
    setLoading(true); setQueried(false);
    const data = await queryStats(alias.trim());
    setStats(data); setLoading(false); setQueried(true);
  };

  return (
    <div className="pt-tab-body">
      <form onSubmit={handleQuery}>
        <div className="pt-field">
          <label className="pt-label">{p.labels.yourAlias}</label>
          <div className="pt-link-row">
            <input className="pt-input" type="text" placeholder={p.placeholders.alias}
              value={alias} onChange={(e) => setAlias(e.target.value)} required maxLength={40} />
            <button className="tm-btn tm-btn-dark pt-copy-btn" type="submit" disabled={loading || !alias.trim()}>
              {loading ? <i className="ph-bold ph-circle-notch pt-spin" /> : p.actions.query}
            </button>
          </div>
        </div>
      </form>

      {queried && !stats && (
        <div className="pt-stats-placeholder">
          <i className="ph-bold ph-hourglass pt-stats-icon" />
          <p>{p.statsPlaceholder.title}</p>
          <p className="pt-stats-sub">{p.statsPlaceholder.sub} <a href="mailto:info@teramot.com">info@teramot.com</a></p>
        </div>
      )}
      {queried && stats && (
        <div className="pt-stats-grid">
          <div className="pt-stat">
            <span className="pt-stat-value">{stats.count ?? 0}</span>
            <span className="pt-stat-label">{p.statsLabels.count}</span>
          </div>
          <div className="pt-stat">
            <span className="pt-stat-value">{stats.topPlan ?? '—'}</span>
            <span className="pt-stat-label">{p.statsLabels.topPlan}</span>
          </div>
          <div className="pt-stat">
            <span className="pt-stat-value">{fmt(stats.totalPotential, lang)}</span>
            <span className="pt-stat-label">{p.statsLabels.potential}</span>
          </div>
        </div>
      )}
    </div>
  );
};

// ── Panel ─────────────────────────────────────────────────────────────────────
const PartnersPanel = () => {
  const { c } = useLang();
  const p = c.partners;
  const [active, setActive] = useState('register');

  const TABS = [
    { key: 'register',  label: p.tabs.register,  Component: TabRegistrar    },
    { key: 'referidos', label: p.tabs.referidos, Component: TabMisReferidos },
  ];
  const { Component } = TABS.find((t) => t.key === active);

  return (
    <section className="pt-panel-section">
      <div className="tm-container">
        <div className="pt-panel">
          <div className="pt-tabs" role="tablist">
            {TABS.map((t) => (
              <button key={t.key} role="tab"
                className={`pt-tab ${active === t.key ? 'is-active' : ''}`}
                onClick={() => setActive(t.key)} aria-selected={active === t.key}>
                {t.label}
              </button>
            ))}
          </div>
          <Component />
        </div>
      </div>
    </section>
  );
};

// ── How it works ──────────────────────────────────────────────────────────────
const HowItWorks = () => {
  const { c } = useLang();
  const p = c.partners;
  return (
    <section className="pt-steps-section">
      <div className="tm-container">
        <h2 className="pt-steps-h2">{p.howItWorks.title}</h2>
        <div className="pt-steps-grid">
          {p.howItWorks.steps.map((s, i) => (
            <div key={i} className="pt-step">
              <span className="pt-step-n">{String(i + 1).padStart(2, '0')}</span>
              <p className="pt-step-label">{s}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Root ──────────────────────────────────────────────────────────────────────
const PartnersApp = () => (
  <LangProvider>
    <NavBar current="partners" />
    <main>
      <PartnersHero />
      <CommissionCards />
      <PartnersPanel />
      <HowItWorks />
    </main>
    <Footer />
  </LangProvider>
);

ReactDOM.createRoot(document.getElementById('root')).render(<PartnersApp />);