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

interface TrackingOrder {
  orderNumber: string;
  createdAt: string;
  updatedAt: string;
  total: number;
  currency: string;
  status: {
    id: number;
    adminName: string;
    label: string;
    description: string;
    step: number;
    tone: 'pending' | 'active' | 'success' | 'danger';
  };
  shipping: {
    method: string | null;
    trackingNumber: string | null;
    shippedAt: string | null;
  };
  items: Array<{
    id: number;
    productId: number | null;
    variantId: number | null;
    name: string;
    brand: string;
    quantity: number;
    unitPrice: number;
    totalPrice: number;
    volume: string | null;
    image: string | null;
  }>;
}

declare global {
  interface Window {
    gtag?: (...args: unknown[]) => void;
    dataLayer?: unknown[];
  }
}

const steps = [
  { title: 'Objednáno', description: 'Objednávku jsme přijali.' },
  { title: 'Platba přijata', description: 'Platba byla potvrzena.' },
  { title: 'Připravujeme', description: 'Kompletujeme váš balíček.' },
  { title: 'Na cestě', description: 'Zásilka byla předána dopravci.' },
  { title: 'Doručeno', description: 'Objednávka dorazila do cíle.' },
];

function formatDate(value: string | null) {
  if (!value) return '';
  return new Intl.DateTimeFormat('cs-CZ', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  }).format(new Date(value));
}

function formatPrice(value: number, currency: string) {
  const normalizedCurrency = currency === 'Kč' ? 'CZK' : currency;
  try {
    return new Intl.NumberFormat('cs-CZ', {
      style: 'currency',
      currency: normalizedCurrency || 'CZK',
      maximumFractionDigits: 0,
    }).format(value);
  } catch {
    return `${value.toLocaleString('cs-CZ')} Kč`;
  }
}

const OrderTrackingPage: React.FC = () => {
  const router = useRouter();
  const [order, setOrder] = useState<TrackingOrder | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');

  const orderId = typeof router.query.id === 'string' ? router.query.id : '';
  const trackingHash = typeof router.query.h === 'string' ? router.query.h : '';

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

    if (!orderId || !trackingHash) {
      setError('Odkaz pro sledování objednávky není úplný. Použijte prosím odkaz z e-mailu.');
      setIsLoading(false);
      return;
    }

    const controller = new AbortController();

    const loadOrder = async () => {
      try {
        setIsLoading(true);
        setError('');
        const params = new URLSearchParams({ id: orderId, h: trackingHash });
        const response = await fetch(`/api/order-tracking?${params.toString()}`, {
          signal: controller.signal,
          cache: 'no-store',
        });

        if (!response.ok) {
          throw new Error('Objednávka nebyla nalezena');
        }

        const data = await response.json();
        setOrder(data.order);
      } catch (requestError) {
        if ((requestError as Error).name !== 'AbortError') {
          setError('Objednávku se nepodařilo zobrazit. Odkaz je neplatný nebo již není dostupný.');
        }
      } finally {
        if (!controller.signal.aborted) setIsLoading(false);
      }
    };

    loadOrder();
    return () => controller.abort();
  }, [orderId, router.isReady, trackingHash]);

  const statusColors = useMemo(() => {
    if (order?.status.tone === 'danger') {
      return 'border-red-500/40 bg-red-500/10 text-red-300';
    }
    if (order?.status.tone === 'success') {
      return 'border-green-500/40 bg-green-500/10 text-green-300';
    }
    return 'border-luxury-gold/40 bg-luxury-gold/10 text-luxury-gold';
  }, [order?.status.tone]);

  useEffect(() => {
    // Comgate returns the customer to this page. Only report a purchase after
    // our own order status confirms that the payment was received.
    if (!order || ![2, 5, 6, 7].includes(order.status.id)) return;

    const currency = order.currency === 'Kč' ? 'CZK' : (order.currency || 'CZK');
    const event = {
      transaction_id: order.orderNumber,
      value: order.total,
      currency,
      items: order.items.map((item) => ({
        item_id: String(item.variantId ?? item.productId ?? item.id),
        item_name: item.name,
        item_brand: item.brand || undefined,
        item_variant: item.volume || undefined,
        price: item.unitPrice,
        quantity: item.quantity,
      })),
    };

    // `transaction_id` lets GA4 and the imported Google Ads purchase action
    // deduplicate a return visit to the order-tracking page.
    if (typeof window.gtag === 'function') {
      window.gtag('event', 'purchase', event);
      return;
    }

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push(['event', 'purchase', event]);
  }, [order]);

  return (
    <>
      <Head>
        <title>Sledování objednávky | Vystříkejto.cz</title>
        <meta name="robots" content="noindex,nofollow,noarchive" />
        <meta name="referrer" content="no-referrer" />
      </Head>

      <div className="min-h-[70vh] bg-luxury-dark px-3 pb-10 pt-16 sm:px-5 sm:pb-14 sm:pt-24 md:pt-28 lg:pb-16 lg:pt-40">
        <div className="mx-auto max-w-6xl">
          {isLoading && (
            <div className="flex min-h-[45vh] items-center justify-center">
              <div className="text-center">
                <div className="mx-auto mb-5 h-10 w-10 animate-spin rounded-full border-2 border-luxury-gold/20 border-t-luxury-gold" />
                <p className="font-bold uppercase tracking-[0.18em] text-luxury-gold">Načítáme objednávku</p>
              </div>
            </div>
          )}

          {!isLoading && error && (
            <div className="mx-auto max-w-xl rounded-2xl border border-red-500/30 bg-[#111111] p-7 text-center shadow-2xl sm:p-10">
              <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full border border-red-500/40 bg-red-500/10 text-3xl text-red-400">!</div>
              <h1 className="mb-3 text-2xl font-black text-luxury-light sm:text-3xl">Objednávku nelze zobrazit</h1>
              <p className="mb-7 text-sm leading-6 text-luxury-light/65 sm:text-base">{error}</p>
              <a
                href="mailto:info@vystrikejto.cz"
                className="inline-flex min-h-12 items-center justify-center rounded-lg bg-luxury-gold px-6 py-3 font-bold text-luxury-dark transition-colors hover:bg-yellow-300"
              >
                Kontaktovat podporu
              </a>
            </div>
          )}

          {!isLoading && order && (
            <div className="space-y-5 sm:space-y-7">
              <section className="overflow-hidden rounded-2xl border border-luxury-gold/20 bg-gradient-to-br from-[#171717] to-[#0b0b0b] shadow-2xl shadow-black/30">
                <div className="border-b border-luxury-gold/15 p-5 sm:p-7 lg:flex lg:items-center lg:justify-between lg:gap-8">
                  <div>
                    <p className="mb-2 text-xs font-bold uppercase tracking-[0.2em] text-luxury-gold/70">Moje objednávka</p>
                    <h1 className="text-2xl font-black text-luxury-light sm:text-4xl">
                      Objednávka <span className="text-luxury-gold">#{order.orderNumber}</span>
                    </h1>
                    <p className="mt-2 text-sm text-luxury-light/55">Vytvořeno {formatDate(order.createdAt)}</p>
                  </div>
                  <div className={`mt-5 rounded-xl border px-4 py-3 lg:mt-0 lg:max-w-md ${statusColors}`}>
                    <p className="font-black uppercase tracking-wide">{order.status.label}</p>
                    <p className="mt-1 text-sm leading-5 text-luxury-light/75">{order.status.description}</p>
                  </div>
                </div>

                <div className="p-5 sm:p-7">
                  <div className="grid gap-0 md:grid-cols-5">
                    {steps.map((step, index) => {
                      const isReached = order.status.tone !== 'danger' && index <= order.status.step;
                      const isCurrent = order.status.tone !== 'danger' && index === order.status.step;

                      return (
                        <div key={step.title} className="relative flex gap-4 pb-7 last:pb-0 md:block md:pb-0 md:text-center">
                          {index < steps.length - 1 && (
                            <div className={`absolute left-[19px] top-10 h-[calc(100%-2.5rem)] w-px md:left-1/2 md:top-5 md:h-px md:w-full ${index < order.status.step && order.status.tone !== 'danger' ? 'bg-luxury-gold' : 'bg-luxury-light/15'}`} />
                          )}
                          <div className={`relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 font-black transition-colors md:mx-auto ${isReached ? 'border-luxury-gold bg-luxury-gold text-luxury-dark' : 'border-luxury-light/20 bg-[#111111] text-luxury-light/35'} ${isCurrent ? 'ring-4 ring-luxury-gold/15' : ''}`}>
                            {isReached ? '✓' : index + 1}
                          </div>
                          <div className="pt-0.5 md:mt-4 md:px-2">
                            <p className={`text-sm font-bold ${isReached ? 'text-luxury-light' : 'text-luxury-light/40'}`}>{step.title}</p>
                            <p className="mt-1 text-xs leading-5 text-luxury-light/40">{step.description}</p>
                            {index === 0 && <p className="mt-1 text-xs text-luxury-gold/70">{formatDate(order.createdAt)}</p>}
                            {isCurrent && index > 0 && <p className="mt-1 text-xs text-luxury-gold/70">Aktualizováno {formatDate(order.updatedAt)}</p>}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </section>

              <div className="grid gap-5 lg:grid-cols-[1.45fr_0.75fr] lg:gap-7">
                <section className="rounded-2xl border border-luxury-gold/20 bg-[#111111] p-5 sm:p-7">
                  <div className="mb-5 flex items-center justify-between gap-4">
                    <h2 className="text-xl font-black text-luxury-light sm:text-2xl">Položky objednávky</h2>
                    <span className="rounded-full bg-luxury-gold/10 px-3 py-1 text-xs font-bold text-luxury-gold">
                      {order.items.reduce((sum, item) => sum + item.quantity, 0)} ks
                    </span>
                  </div>
                  <div className="divide-y divide-luxury-light/10">
                    {order.items.map((item) => (
                      <div key={item.id} className="flex items-center gap-4 py-4 first:pt-0 last:pb-0">
                        <div className="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-luxury-gold/15 bg-black/30 sm:h-20 sm:w-20">
                          {item.image ? (
                            <img src={item.image} alt={item.name} className="h-full w-full object-contain p-1" />
                          ) : (
                            <span className="text-xl text-luxury-gold/40">✦</span>
                          )}
                        </div>
                        <div className="min-w-0 flex-1">
                          {item.brand && <p className="text-xs font-bold uppercase tracking-wide text-luxury-gold/70">{item.brand}</p>}
                          <p className="truncate font-bold text-luxury-light">{item.name}</p>
                          <p className="mt-1 text-sm text-luxury-light/50">
                            {item.volume ? `${item.volume} · ` : ''}{item.quantity} ks
                          </p>
                        </div>
                        <p className="shrink-0 text-sm font-bold text-luxury-light sm:text-base">
                          {formatPrice(item.totalPrice, order.currency)}
                        </p>
                      </div>
                    ))}
                  </div>
                </section>

                <aside className="space-y-5">
                  <section className="rounded-2xl border border-luxury-gold/20 bg-[#111111] p-5 sm:p-6">
                    <h2 className="mb-4 text-lg font-black text-luxury-light">Doprava</h2>
                    <p className="text-sm text-luxury-light/50">Způsob dopravy</p>
                    <p className="mt-1 font-bold text-luxury-light">{order.shipping.method || 'Bude doplněno'}</p>
                    {order.shipping.trackingNumber && (
                      <div className="mt-4 border-t border-luxury-light/10 pt-4">
                        <p className="text-sm text-luxury-light/50">Číslo zásilky</p>
                        <p className="mt-1 break-all font-mono font-bold text-luxury-gold">{order.shipping.trackingNumber}</p>
                      </div>
                    )}
                  </section>

                  <section className="rounded-2xl border border-luxury-gold/20 bg-[#111111] p-5 sm:p-6">
                    <div className="flex items-end justify-between gap-3">
                      <span className="text-sm font-bold uppercase tracking-wide text-luxury-light/50">Celkem</span>
                      <span className="text-2xl font-black text-luxury-gold">{formatPrice(order.total, order.currency)}</span>
                    </div>
                  </section>

                  <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
                    <Link href="/" className="flex min-h-12 items-center justify-center rounded-lg bg-luxury-gold px-5 py-3 text-center font-black text-luxury-dark transition-colors hover:bg-yellow-300">
                      Pokračovat v nákupu
                    </Link>
                    <a href="mailto:info@vystrikejto.cz" className="flex min-h-12 items-center justify-center rounded-lg border border-luxury-gold/50 px-5 py-3 text-center font-bold text-luxury-gold transition-colors hover:bg-luxury-gold/10">
                      Potřebuji pomoc
                    </a>
                  </div>
                </aside>
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
};

export default OrderTrackingPage;