/* global React */
/* ============================================
   Thank-You page — shown after NOWPayments success redirect
   - Animated success state
   - 15s countdown then auto-redirect to dashboard
   - Customer can click to skip the wait
   ============================================ */
function ThankYouPage({ go }) {
  const [secondsLeft, setSecondsLeft] = React.useState(15);
  const TOTAL = 15;

  React.useEffect(() => {
    if (secondsLeft <= 0) {
      // Clean the URL params before navigating
      try {
        const url = new URL(window.location.href);
        url.searchParams.delete('payment');
        url.searchParams.delete('NP_id');
        window.history.replaceState({}, '', url.toString());
      } catch (e) {}
      go('dashboard');
      return;
    }
    const id = setTimeout(() => setSecondsLeft((s) => s - 1), 1000);
    return () => clearTimeout(id);
  }, [secondsLeft]);

  // Circular progress for the countdown
  const radius = 56;
  const circumference = 2 * Math.PI * radius;
  const progress = (TOTAL - secondsLeft) / TOTAL;
  const dashOffset = circumference * (1 - progress);

  return (
    <div>
      <section style={{ padding: '64px 0 96px', minHeight: '70vh', display: 'grid', placeItems: 'center' }}>
        <div className="container" style={{ maxWidth: 680 }}>
          <div className="panel panel-glow panel-padded-lg text-center" style={{ padding: 56, position: 'relative', overflow: 'hidden' }}>
            {/* Background glow */}
            <div style={{ position: 'absolute', top: -120, left: '50%', transform: 'translateX(-50%)', width: 480, height: 480, background: 'radial-gradient(circle, rgba(0,255,148,0.18), transparent 65%)', filter: 'blur(40px)', pointerEvents: 'none' }} />

            {/* Big animated checkmark */}
            <div style={{ position: 'relative', width: 120, height: 120, margin: '0 auto 8px', display: 'grid', placeItems: 'center' }}>
              <div style={{
                position: 'absolute', inset: 0, borderRadius: '50%',
                background: 'rgba(0,255,148,0.08)', border: '2px solid var(--green)',
                boxShadow: '0 0 48px rgba(0,255,148,0.45), inset 0 0 32px rgba(0,255,148,0.15)',
                animation: 'pulseGlow 2s ease-in-out infinite',
              }} />
              <svg width="56" height="56" viewBox="0 0 24 24" fill="none" style={{ position: 'relative', zIndex: 2 }}>
                <path d="M5 13l4 4L19 7" stroke="var(--green)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"
                  style={{ filter: 'drop-shadow(0 0 6px rgba(0,255,148,0.8))' }} />
              </svg>
            </div>

            <span className="eyebrow" style={{ color: 'var(--green)' }}>PAYMENT CONFIRMED · NOWPAYMENTS</span>
            <h1 className="mt-3" style={{ fontSize: 'clamp(32px, 5vw, 48px)', lineHeight: 1.05 }}>
              Thank you for your <span className="gradient-text">purchase</span>
            </h1>
            <p className="text-muted mt-4" style={{ fontSize: 16, lineHeight: 1.6, maxWidth: 520, margin: '16px auto 0' }}>
              Your payment has been received successfully. You'll find your Expert Advisor — with all its files and attachments — inside your <strong className="text-cyan">dashboard area</strong>. You can download it from there at any time.
            </p>

            {/* Info row */}
            <div className="grid grid-3 mt-8" style={{ gap: 12, maxWidth: 520, margin: '32px auto 0' }}>
              <div className="panel" style={{ padding: 14, background: 'rgba(0,0,0,0.35)' }}>
                <div className="stat-label" style={{ fontSize: 9 }}>FILES</div>
                <div className="font-mono text-cyan mt-1" style={{ fontSize: 13 }}>.ex5 / .set</div>
              </div>
              <div className="panel" style={{ padding: 14, background: 'rgba(0,0,0,0.35)' }}>
                <div className="stat-label" style={{ fontSize: 9 }}>DOWNLOAD</div>
                <div className="font-mono text-green mt-1" style={{ fontSize: 13 }}>READY</div>
              </div>
              <div className="panel" style={{ padding: 14, background: 'rgba(0,0,0,0.35)' }}>
                <div className="stat-label" style={{ fontSize: 9 }}>LICENSE</div>
                <div className="font-mono mt-1" style={{ fontSize: 13, color: 'var(--magenta)' }}>BOUND TO MT5</div>
              </div>
            </div>

            {/* Countdown ring */}
            <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
              <div style={{ position: 'relative', width: 140, height: 140, display: 'grid', placeItems: 'center' }}>
                <svg width="140" height="140" viewBox="0 0 140 140" style={{ position: 'absolute', inset: 0, transform: 'rotate(-90deg)' }}>
                  <circle cx="70" cy="70" r={radius} stroke="rgba(255,255,255,0.08)" strokeWidth="6" fill="none" />
                  <circle
                    cx="70" cy="70" r={radius}
                    stroke="var(--cyan)" strokeWidth="6" fill="none"
                    strokeLinecap="round"
                    strokeDasharray={circumference}
                    strokeDashoffset={dashOffset}
                    style={{ transition: 'stroke-dashoffset 1s linear', filter: 'drop-shadow(0 0 6px rgba(0,229,255,0.7))' }}
                  />
                </svg>
                <div style={{ textAlign: 'center', zIndex: 2 }}>
                  <div className="display" style={{ fontSize: 46, lineHeight: 1, color: 'var(--cyan)', textShadow: '0 0 16px rgba(0,229,255,0.5)' }}>{secondsLeft}</div>
                  <div className="font-mono text-muted mt-1" style={{ fontSize: 10, letterSpacing: '0.18em' }}>SECONDS</div>
                </div>
              </div>
              <div className="font-mono text-muted text-sm" style={{ letterSpacing: '0.1em' }}>
                Redirecting to your dashboard...
              </div>
            </div>

            <div className="flex gap-3 mt-8" style={{ justifyContent: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg btn-sheen" onClick={() => go('dashboard')}>Go to Dashboard now →</button>
              <button className="btn btn-ghost btn-lg" onClick={() => go('marketplace')}>Browse more EAs</button>
            </div>

            <p className="text-muted text-xs mt-6 font-mono" style={{ letterSpacing: '0.05em' }}>
              // A confirmation email has been sent to your inbox.
            </p>
          </div>
        </div>
      </section>

      <style>{`
        @keyframes pulseGlow {
          0%, 100% { box-shadow: 0 0 48px rgba(0,255,148,0.45), inset 0 0 32px rgba(0,255,148,0.15); }
          50%      { box-shadow: 0 0 72px rgba(0,255,148,0.65), inset 0 0 48px rgba(0,255,148,0.25); }
        }
      `}</style>
    </div>
  );
}

window.ThankYouPage = ThankYouPage;