frontend/src/components/settings/PaymentCheckoutForm.tsx

'use client';

import { useState } from 'react';
import Image from 'next/image';

interface CheckoutFeature {
  label: string;
}

const CHECKOUT_FEATURES: CheckoutFeature[] = [
  { label: 'Unlimited Property Reports' },
  { label: 'Priority 24/7 Concierge Support' },
  { label: 'Advanced Lead Generation Tools' },
];

export function PaymentCheckoutForm() {
  const [isProcessing, setIsProcessing] = useState(false);

  const handlePayNow = async () => {
    setIsProcessing(true);
    // TODO: Integrate with payment gateway
    setTimeout(() => setIsProcessing(false), 2000);
  };

  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>

      {/* Checkout Card */}
      <div className="border border-[#00293D] rounded-[10px] overflow-hidden">
        <div className="flex flex-col lg:flex-row">
          {/* Left Side - Order Summary */}
          <div className="flex-1 p-8 lg:border-r border-[#00293D]/20">
            {/* Order Summary Header */}
            <h2 className="font-fractul font-bold text-[20px] text-[#00293D] mb-6">
              Order Summary
            </h2>

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

            {/* Annual Subscription Badge */}
            <div className="inline-block bg-[#e58625] rounded-[15px] px-4 py-2 mb-5">
              <span className="font-serif text-[14px] text-white">
                Annual Subscription
              </span>
            </div>

            {/* Plan Name */}
            <h3 className="font-fractul font-bold text-[20px] text-[#00293D] mb-4">
              Professional Premium Plan
            </h3>

            {/* Plan Description */}
            <p className="font-serif text-[14px] text-[#00293D] leading-[22px] mb-8 max-w-[280px]">
              Empower your real estate business with full access to our unified solutions platform. Designed specifically for professional Lenders & Agents seeking seamless transaction management for 12 months.
            </p>

            {/* Features */}
            <div className="space-y-5">
              {CHECKOUT_FEATURES.map((feature) => (
                <div key={feature.label} className="flex items-center gap-3">
                  <Image
                    src="/assets/icons/tick-circle-icon.svg"
                    alt=""
                    width={21}
                    height={21}
                    className="flex-shrink-0"
                  />
                  <span className="font-serif text-[14px] text-black">
                    {feature.label}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Right Side - Payment Details */}
          <div className="flex-1 p-8 max-w-full lg:max-w-[452px]">
            {/* Trust Badges */}
            <div className="flex items-center gap-6 mb-6">
              <div className="flex items-center gap-2">
                <Image
                  src="/assets/icons/shield-check-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>

            {/* Line Items */}
            <div className="space-y-5 mb-6">
              <div className="flex items-center justify-between">
                <span className="font-serif text-[15px] text-[#00293D]/50">
                  Annual Subscription
                </span>
                <span className="font-fractul font-bold text-[15px] text-black/50">
                  $499 .00
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="font-serif text-[15px] text-[#00293D]/50">
                  One-Time Setup Fee
                </span>
                <span className="font-fractul font-bold text-[15px] text-[#43a047]">
                  Free
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="font-serif text-[15px] text-[#00293D]/50">
                  Tax
                </span>
                <span className="font-fractul font-bold text-[15px] text-black/50">
                  $00 .00
                </span>
              </div>
            </div>

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

            {/* Total */}
            <div className="flex items-baseline justify-between mb-1">
              <span className="font-fractul font-bold text-[20px] text-[#00293D]">
                Total Amount
              </span>
              <div className="text-right">
                <div>
                  <span className="font-fractul font-bold text-[35px] text-black">$499</span>
                  <span className="font-fractul font-bold text-[20px] text-black"> / </span>
                  <span className="font-fractul font-bold text-[20px] text-black/50">Year</span>
                </div>
              </div>
            </div>
            <div className="text-right mb-6">
              <span className="font-serif text-[15px] text-[#00293D]/50">
                Billed Annually
              </span>
            </div>

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

            {/* Security Notice */}
            <div className="flex items-start gap-2 mb-6">
              <Image
                src="/assets/icons/caution-red-icon.svg"
                alt="Notice"
                width={19}
                height={19}
                className="flex-shrink-0 mt-0.5"
              />
              <p className="font-serif text-[10px] text-red-600 leading-[15px]">
                You will be redirected to our secure payment gateway after clicking &quot;Pay Now&quot; to enter your payment details safely.
              </p>
            </div>

            {/* Pay Now Button */}
            <button
              onClick={handlePayNow}
              disabled={isProcessing}
              className="w-full bg-[#e58625] border border-[#e58625] text-white font-fractul font-bold text-[14px] py-4 rounded-[15px] hover:bg-[#d47920] transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              <Image
                src="/assets/icons/lock-white-icon.svg"
                alt=""
                width={20}
                height={20}
              />
              {isProcessing ? 'Processing...' : 'Pay Now'}
            </button>
          </div>
        </div>
      </div>
    </>
  );
}