'use client';

import React, { useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { CheckCircle2, ShoppingBag, ArrowRight } from 'lucide-react';
import { trackPurchase } from '@/lib/analytics';

export default function CheckoutSuccessPage() {
  const params = useParams();
  const router = useRouter();
  const orderId = params.orderId as string;

  useEffect(() => {
    if (typeof window !== 'undefined') {
      try {
        const cachedOrder = sessionStorage.getItem('last_order_tracking');
        if (cachedOrder) {
          const order = JSON.parse(cachedOrder);
          // Verify that this order ID matches the current URL order ID
          if (String(order.id) === String(orderId)) {
            trackPurchase(order, order.customer);
            sessionStorage.removeItem('last_order_tracking');
          }
        }
      } catch (e) {
        console.error('Failed to parse and track order purchase', e);
      }
    }
  }, [orderId]);

  return (
    <>
      <Header />
      <main className="bg-slate-50 min-h-screen py-16 flex items-center">
        <div className="mx-auto max-w-md w-full px-4 text-center">
          
          <div className="bg-white p-8 border border-slate-200 rounded-3xl shadow-sm space-y-6">
            
            {/* Success Icon */}
            <div className="mx-auto h-16 w-16 text-emerald-600 bg-emerald-50 rounded-full flex items-center justify-center">
              <CheckCircle2 className="h-10 w-10" />
            </div>

            <div className="space-y-2">
              <h1 className="text-xl font-black text-slate-900">Order Placed Successfully!</h1>
              <p className="text-xs text-slate-500">
                Thank you for shopping with us. Your order has been registered in our system.
              </p>
            </div>

            {orderId && (
              <div className="bg-slate-50 p-3.5 rounded-2xl border border-slate-150">
                <span className="text-xxs font-bold text-slate-400 uppercase tracking-wider block">Order Reference ID</span>
                <span className="text-sm font-black text-indigo-600 block mt-0.5">#{orderId}</span>
              </div>
            )}

            <p className="text-xxs text-slate-400 leading-relaxed">
              We will contact you shortly to verify your shipping details. You can download your invoice in your customer dashboard profile.
            </p>

            <div className="pt-2 flex flex-col gap-3">
              <button
                onClick={() => router.push('/shop')}
                className="w-full h-11 inline-flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl transition-all shadow-md shadow-indigo-100"
              >
                <ShoppingBag className="h-4 w-4" />
                <span>Continue Shopping</span>
              </button>
              
              <button
                onClick={() => router.push('/dashboard')}
                className="w-full h-11 inline-flex items-center justify-center gap-2 bg-slate-50 hover:bg-slate-100 border border-slate-250 text-slate-700 text-xs font-bold rounded-xl transition-all"
              >
                <span>Go to Dashboard</span>
                <ArrowRight className="h-4 w-4" />
              </button>
            </div>

          </div>

        </div>
      </main>
      <Footer />
    </>
  );
}