'use client';

import React, { Suspense } from 'react';
import { useParams, useRouter, useSearchParams } from 'next/navigation';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';
import { AlertCircle, RotateCcw, ShoppingBag } from 'lucide-react';

const FailedContent: React.FC = () => {
  const params = useParams();
  const router = useRouter();
  const searchParams = useSearchParams();
  const orderId = params.orderId as string;
  const errorMsg = searchParams.get('error') || 'The transaction was cancelled or declined.';

  const handleRetryPayment = () => {
    const backendUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
    window.location.href = `${backendUrl}/orders/${orderId}/retry-payment`;
  };

  return (
    <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">
        <div className="mx-auto h-16 w-16 text-rose-500 bg-rose-50 rounded-full flex items-center justify-center">
          <AlertCircle className="h-10 w-10" />
        </div>

        <div className="space-y-2">
          <h1 className="text-xl font-black text-slate-900">Payment Failed</h1>
          <p className="text-xs text-slate-500">
            We could not process your transaction. {errorMsg}
          </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-slate-800 block mt-0.5">#{orderId}</span>
          </div>
        )}

        <p className="text-xxs text-slate-400 leading-relaxed">
          Your order has been recorded in our system as <strong>unpaid</strong>. You can try completing the payment again using the button below or visit your dashboard.
        </p>

        <div className="pt-2 flex flex-col gap-3">
          <button
            onClick={handleRetryPayment}
            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"
          >
            <RotateCcw className="h-4 w-4" />
            <span>Retry Payment</span>
          </button>
          
          <button
            onClick={() => router.push('/shop')}
            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"
          >
            <ShoppingBag className="h-4 w-4" />
            <span>Continue Shopping</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default function CheckoutFailedPage() {
  return (
    <>
      <Header />
      <main className="bg-slate-50 min-h-screen py-16 flex items-center">
        <Suspense fallback={
          <div className="mx-auto max-w-md w-full px-4 text-center text-xs text-slate-500">
            Loading details...
          </div>
        }>
          <FailedContent />
        </Suspense>
      </main>
      <Footer />
    </>
  );
}