// Checkout + success screens — WayForPay integration
const { useState: uSc, useEffect: uSe, useRef: uSr } = React;

const PACKS = [
  { id: 'single', minutes: 60,  price: '$3',  label: '60 хв',  sub: '1 сесія' },
  { id: 'pack',   minutes: 180, price: '$8',  label: '180 хв', sub: '3 сесії · найпопулярніше' },
  { id: 'pro7',   minutes: 420, price: '$15', label: '420 хв', sub: '7 сесій · найвигідніше' },
];

function Checkout({ t, onBack }) {
  const auth = (typeof useAuth === 'function') ? useAuth() : { user: null };
  const [selected, setSelected] = uSc('pack');
  const [loading, setLoading] = uSc(false);
  const [error, setError] = uSc('');

  const pay = async () => {
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/wayforpay/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ package: selected, userId: auth.user?.id }),
      });
      const json = await res.json();
      if (json.error) { setError(json.error); setLoading(false); return; }

      // Submit hidden form → redirects to WayForPay hosted payment page
      const form = document.createElement('form');
      form.method = 'POST';
      form.action = 'https://secure.wayforpay.com/pay';
      form.style.display = 'none';

      const fields = {
        merchantAccount: json.merchantAccount,
        merchantAuthType: 'SimpleSignature',
        merchantDomainName: json.merchantDomainName,
        orderReference: json.orderReference,
        orderDate: json.orderDate,
        amount: json.amount,
        currency: json.currency,
        language: json.language,
        returnUrl: json.returnUrl,
        serviceUrl: json.serviceUrl,
        merchantSignature: json.merchantSignature,
      };

      for (const [k, v] of Object.entries(fields)) {
        const inp = document.createElement('input');
        inp.type = 'hidden'; inp.name = k; inp.value = v;
        form.appendChild(inp);
      }

      // Array fields for single product
      for (const [k, v] of [
        ['productName[]', json.productName],
        ['productCount[]', json.productCount],
        ['productPrice[]', json.productPrice],
      ]) {
        const inp = document.createElement('input');
        inp.type = 'hidden'; inp.name = k; inp.value = v;
        form.appendChild(inp);
      }

      document.body.appendChild(form);
      form.submit();
    } catch {
      setError('Помилка з\'єднання. Спробуй ще раз.');
      setLoading(false);
    }
  };

  const pack = PACKS.find(p => p.id === selected);

  return (
    <div>
      <div className="topbar">
        <div className="topbar-inner">
          <a className="brand" href="#" onClick={(e) => { e.preventDefault(); window.MH_nav("home"); }}>
            <span className="brand-mark">M</span>
            Meeting Helper
          </a>
        </div>
      </div>
      <div className="checkout-wrap">
        <span className="checkout-back" onClick={onBack}>← Назад</span>
        <div className="checkout-card">
          <h1>Обери пакет</h1>
          <p className="sub">Хвилини не згорають. Поповнюй коли зручно.</p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '24px 0' }}>
            {PACKS.map(p => (
              <label
                key={p.id}
                onClick={() => setSelected(p.id)}
                style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  padding: '14px 16px', borderRadius: 12, cursor: 'pointer',
                  border: selected === p.id ? '2px solid var(--accent)' : '2px solid #e5e7eb',
                  background: selected === p.id ? 'var(--accent-soft)' : '#fff',
                  transition: 'all .15s',
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 18, height: 18, borderRadius: '50%', flexShrink: 0,
                    border: selected === p.id ? '5px solid var(--accent)' : '2px solid #d1d5db',
                    background: '#fff',
                  }} />
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 15 }}>{p.label}</div>
                    <div style={{ fontSize: 12.5, color: '#6b7280', marginTop: 1 }}>{p.sub}</div>
                  </div>
                </div>
                <div style={{ fontWeight: 700, fontSize: 17 }}>{p.price}</div>
              </label>
            ))}
          </div>

          {error && (
            <div style={{ background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 8, padding: '10px 12px', marginBottom: 14, fontSize: 13.5, color: '#b91c1c' }}>
              {error}
            </div>
          )}

          <button
            className="btn btn-primary checkout-pay"
            onClick={pay}
            disabled={loading}
            style={{ width: '100%', padding: '14px', fontSize: 16 }}
          >
            {loading ? 'Відкриваємо WayForPay…' : `Оплатити ${pack?.price} через WayForPay`}
          </button>

          <div className="secure-line" style={{ marginTop: 12 }}>
            🔒 Безпечна оплата через WayForPay
          </div>
        </div>
      </div>
    </div>
  );
}

function Success({ t, onContinue }) {
  const auth = (typeof useAuth === 'function') ? useAuth() : { user: null, loading: false };
  const [status, setStatus] = uSc('loading'); // loading | paid | unknown
  const [minutes, setMinutes] = uSc(0);
  const credited = uSr(false);

  // Add credits only after auth finishes loading (so we have the real userId)
  uSe(() => {
    if (status !== 'paid' || minutes <= 0) return;
    if (auth.loading) return; // wait — Supabase session not ready yet
    if (credited.current) return;
    credited.current = true;
    window.MH_Auth.addCredits(auth.user?.id, minutes, `${minutes} хв — WayForPay`);
  }, [status, minutes, auth.loading, auth.user]);

  uSe(() => {
    const orderId = new URLSearchParams(location.search).get('order_id');
    if (!orderId) { setStatus('unknown'); return; }

    let attempts = 0;
    const poll = async () => {
      try {
        const res = await fetch(`/api/wayforpay/status?order_id=${encodeURIComponent(orderId)}`);
        const data = await res.json();
        if (data.status === 'paid') {
          setMinutes(data.minutes);
          setStatus('paid');
          history.replaceState({}, '', location.pathname + '#success');
        } else if (attempts < 20) {
          attempts++;
          setTimeout(poll, 2000);
        } else {
          setStatus('unknown');
        }
      } catch {
        setStatus('unknown');
      }
    };
    poll();
  }, []);

  return (
    <div>
      <div className="topbar">
        <div className="topbar-inner">
          <a className="brand" href="#"><span className="brand-mark">M</span>Meeting Helper</a>
        </div>
      </div>
      <div className="success-wrap">
        {status === 'loading' && (
          <React.Fragment>
            <div className="seal" style={{ fontSize: 40 }}>⏳</div>
            <h1>Обробляємо платіж…</h1>
            <p style={{ color: '#6b7280' }}>Зазвичай займає кілька секунд.</p>
          </React.Fragment>
        )}
        {status === 'paid' && (
          <React.Fragment>
            <div className="seal">✓</div>
            <h1>Оплата пройшла!</h1>
            <p>+{minutes} хвилин додано до твого балансу.</p>
            <button className="btn btn-primary btn-xl" onClick={onContinue}>Почати сесію</button>
          </React.Fragment>
        )}
        {status === 'unknown' && (
          <React.Fragment>
            <div className="seal" style={{ fontSize: 40 }}>✓</div>
            <h1>{t.success.title}</h1>
            <p>{t.success.sub}</p>
            <button className="btn btn-primary btn-xl" onClick={onContinue}>{t.success.cta}</button>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

window.Checkout = Checkout;
window.Success = Success;