import React, { useEffect } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';

const CheckoutSuccess: React.FC = () => {
  const router = useRouter();
  const orderRef = typeof router.query.orderRef === 'string' ? router.query.orderRef : '';
  const trackingHash = typeof router.query.h === 'string' ? router.query.h : '';
  const [isValidating, setIsValidating] = React.useState(true);
  const [isValid, setIsValid] = React.useState(false);
  const trackingHref = `/moje-objednavka?${new URLSearchParams({ id: orderRef, h: trackingHash }).toString()}`;

  useEffect(() => {
    if (!router.isReady) return;

    if (!orderRef || !trackingHash) {
      router.replace('/');
      return;
    }

    const validateOrder = async () => {
      try {
        const params = new URLSearchParams({ id: orderRef, h: trackingHash });
        const response = await fetch(`/api/order-tracking?${params.toString()}`, { cache: 'no-store' });
        if (response.ok) {
          setIsValid(true);
        } else {
          router.replace('/');
        }
      } catch (error) {
        router.replace('/');
      } finally {
        setIsValidating(false);
      }
    };

    validateOrder();
  }, [orderRef, router, router.isReady, trackingHash]);

  if (isValidating && !isValid) {
    return (
      <div className="min-h-screen bg-luxury-dark flex items-center justify-center">
        <div className="text-luxury-gold animate-pulse font-aptos font-bold tracking-widest uppercase">
          Ověřování objednávky...
        </div>
      </div>
    );
  }

  if (!isValid) return null;


  return (
    <>
      <Head>
        <title>Objednávka potvrzena | Vystříkejto.cz</title>
        <meta name="robots" content="noindex,nofollow,noarchive" />
      </Head>
      <div className="min-h-screen bg-luxury-dark pt-28 sm:pt-32 md:pt-40 lg:pt-44 pb-12 md:pb-16 lg:pb-20 flex items-center justify-center">
      <div className="max-w-2xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8">
        <div className="bg-gradient-to-b from-luxury-dark to-luxury-dark border border-luxury-gold/20 rounded-lg p-8 md:p-12 text-center">
          <div className="mb-8 flex justify-center">
            <div className="w-24 h-24 md:w-32 md:h-32 bg-green-500/20 rounded-full flex items-center justify-center border-2 border-green-500/50">
              <svg
                className="w-12 h-12 md:w-16 md:h-16 text-green-500"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M5 13l4 4L19 7"
                />
              </svg>
            </div>
          </div>

          <h1 className="text-4xl sm:text-5xl md:text-6xl font-aptos font-black text-luxury-gold mb-4 md:mb-5">
            PLATBA PŘIJATA
          </h1>
          <div className="w-12 sm:w-16 h-1.5 bg-green-500 mx-auto mb-8" />

          {/* Message */}
          <p className="text-luxury-light text-base md:text-lg mb-4 font-medium">
            Vaše objednávka byla úspěšně zaplacena.
          </p>

          {orderRef && (
            <div className="bg-luxury-dark/50 border border-luxury-gold/30 rounded-lg p-4 md:p-6 mb-8">
              <p className="text-luxury-light/60 text-sm md:text-base mb-2">Číslo objednávky:</p>
              <p className="text-luxury-gold font-mono text-base md:text-lg font-bold break-all">
                {orderRef}
              </p>
            </div>
          )}

          {/* Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 md:gap-6">
            <Link href={trackingHref} className="flex-1">
              <button className="w-full bg-luxury-gold text-luxury-dark px-6 py-4 md:py-5 rounded-sm font-black text-base md:text-lg uppercase tracking-widest hover:bg-yellow-300 transition-all duration-300 active:scale-95 shadow-lg">
                Sledovat objednávku
              </button>
            </Link>
            <Link href="/" className="flex-1">
              <button className="w-full border-2 border-luxury-gold text-luxury-gold px-6 py-4 md:py-5 rounded-sm font-black text-base md:text-lg uppercase tracking-widest hover:bg-luxury-gold/10 transition-all duration-300 active:scale-95">
                Návrat na hlavní stránku
              </button>
            </Link>
          </div>

        </div>
      </div>
    </div>
    </>
  );
};

export default CheckoutSuccess;
