'use client';

import Image from 'next/image';
import { useRouter } from 'next/navigation';

interface TransactionDetail {
  label: string;
  value: string;
  bold?: boolean;
}

const TRANSACTION_DETAILS: TransactionDetail[] = [
  { label: 'Transaction ID', value: 'REQ-89234475', bold: true },
  { label: 'Amount Paid', value: '$499.00', bold: true },
  { label: 'Date', value: 'Oct 24, 2024', bold: true },
];

export function PaymentSuccessForm() {
  const router = useRouter();

  return (
    <>
      {/* Page Title */}
      <div className="mb-6">
        <h1 className="font-fractul font-bold text-[20px] text-[#00293D] mb-2">
          Payments
        </h1>
        <p className="font-serif text-[14px] text-[#00293D]/70">
          Manage Your billing cycles , upgrade your plan , or boost individual listings
        </p>
      </div>

      {/* Payment Success Card */}
      <div className="border border-[#00293D] rounded-[10px] py-10 px-8">
        {/* Success Icon */}
        <div className="flex justify-center mb-5">
          <Image
            src="/assets/icons/payment-success-icon.svg"
            alt="Success"
            width={40}
            height={40}
          />
        </div>

        {/* Success Title */}
        <h2 className="font-fractul font-bold text-[20px] text-[#00293D] text-center mb-3">
          Payment Successful !
        </h2>

        {/* Success Description */}
        <p className="font-serif text-[14px] text-[#00293D] text-center mb-8 max-w-[329px] mx-auto leading-[22px]">
          Your annual membership is now active. You have full access to all premium features
        </p>

        {/* Transaction Details Section */}
        <div className="max-w-[430px] mx-auto">
          {/* Header Row */}
          <div className="flex items-center justify-between mb-5">
            <span className="font-serif text-[15px] text-[#00293D]">
              Transaction Details
            </span>
            <div className="flex items-center gap-2">
              <Image
                src="/assets/icons/verified-shield-green-icon.svg"
                alt="Verified"
                width={20}
                height={20}
              />
              <span className="font-serif text-[14px] text-[#00293D]">
                Verified User
              </span>
            </div>
          </div>

          {/* Detail Rows */}
          <div className="space-y-5 mb-6">
            {TRANSACTION_DETAILS.map((detail) => (
              <div key={detail.label} className="flex items-center justify-between">
                <span className="font-serif text-[15px] text-[#00293D]/50">
                  {detail.label}
                </span>
                <span className={`font-serif text-[14px] text-[#00293D] ${detail.bold ? 'font-bold' : ''}`}>
                  {detail.value}
                </span>
              </div>
            ))}
          </div>

          {/* Divider */}
          <div className="border-b border-[#00293D]/20 mb-5" />

          {/* Next Renewal Date */}
          <div className="flex items-center justify-between mb-8">
            <span className="font-serif text-[15px] text-[#00293D]">
              Next Renewal Date
            </span>
            <span className="font-serif font-bold text-[14px] text-[#e58625]">
              Oct 24, 2025
            </span>
          </div>

          {/* Action Buttons */}
          <div className="flex gap-4 mb-6">
            <button
              onClick={() => router.push('/agent/dashboard')}
              className="flex-1 bg-[#e58625] border border-[#e58625] text-white font-fractul font-bold text-[14px] py-4 rounded-[15px] hover:bg-[#d47920] transition-colors flex items-center justify-center gap-2"
            >
              <Image
                src="/assets/icons/dashboard-white-icon.svg"
                alt=""
                width={20}
                height={20}
              />
              Go To Dashboard
            </button>
            <button
              className="flex-1 bg-[#e58625] border border-[#e58625] text-white font-fractul font-bold text-[14px] py-4 rounded-[15px] hover:bg-[#d47920] transition-colors flex items-center justify-center gap-2"
            >
              <Image
                src="/assets/icons/download-white-icon.svg"
                alt=""
                width={20}
                height={20}
              />
              Download Receipt
            </button>
          </div>

          {/* Trust Badges */}
          <div className="flex items-center justify-center gap-8">
            <div className="flex items-center gap-2">
              <Image
                src="/assets/icons/verified-shield-green-icon.svg"
                alt="Verified"
                width={20}
                height={20}
              />
              <span className="font-serif text-[14px] text-[#00293D]">
                Verified User
              </span>
            </div>
            <div className="flex items-center gap-2">
              <Image
                src="/assets/icons/lock-icon.svg"
                alt="Secure"
                width={20}
                height={20}
              />
              <span className="font-serif text-[14px] text-[#00293D]">
                Secure Checkout
              </span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}