'use client';

import React, { useState, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { CreditCard, CheckCircle, AlertCircle, ShoppingBag } from 'lucide-react';

function CheckoutForm() {
  const searchParams = useSearchParams();
  const reference = searchParams.get('reference') || '';
  const amount = searchParams.get('amount') || '0.00';
  const currency = searchParams.get('currency') || 'USD';
  const email = searchParams.get('email') || 'customer@whatsappcommerce.com';

  const [paymentStatus, setPaymentStatus] = useState<'IDLE' | 'PROCESSING' | 'SUCCESS' | 'FAILED'>('IDLE');
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  const handleSimulatePayment = async (status: 'SUCCESS' | 'FAILED') => {
    setPaymentStatus('PROCESSING');
    setErrorMessage(null);

    const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';

    try {
      const gtwRef = `GTW-${status}-${Math.floor(100000 + Math.random() * 900000)}`;
      
      const response = await fetch(`${API_URL}/webhooks/payments/mock`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          reference,
          status,
          gatewayReference: status === 'SUCCESS' ? gtwRef : undefined,
        }),
      });

      if (!response.ok) {
        throw new Error('Webhook failed to execute');
      }

      setPaymentStatus(status);
    } catch (err: any) {
      setPaymentStatus('FAILED');
      setErrorMessage(err.message || 'Simulation network error');
    }
  };

  if (paymentStatus === 'SUCCESS') {
    return (
      <div className="text-center space-y-4 py-8 animate-in zoom-in-95 duration-200">
        <div className="h-16 w-16 bg-emerald-50 dark:bg-emerald-500/10 rounded-full flex items-center justify-center border border-emerald-100 dark:border-emerald-500/20 mx-auto">
          <CheckCircle className="h-10 w-10 text-emerald-600 dark:text-emerald-400" />
        </div>
        <h2 className="text-2xl font-bold text-slate-800 dark:text-white font-sans">Payment Confirmed!</h2>
        <p className="text-sm text-slate-600 dark:text-gray-400 max-w-sm mx-auto leading-relaxed">
          Your payment of <strong>{currency} ${amount}</strong> has been successfully processed and verified.
        </p>
        <div className="bg-emerald-500/5 dark:bg-[#128c7e]/10 border border-emerald-500/10 dark:border-[#128c7e]/20 text-emerald-700 dark:text-emerald-300 p-4 rounded-xl text-xs leading-relaxed max-w-sm mx-auto">
          💬 We have sent a confirmation message to your WhatsApp number. You can close this tab and return to the chat.
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6 animate-in fade-in duration-200">
      <div className="flex items-center gap-3 border-b border-slate-100 dark:border-white/5 pb-4">
        <div className="h-10 w-10 bg-emerald-50 dark:bg-emerald-500/10 rounded-xl flex items-center justify-center border border-emerald-100 dark:border-emerald-500/20">
          <ShoppingBag className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
        </div>
        <div>
          <h2 className="font-bold text-slate-800 dark:text-white text-base font-sans">Secure Payment Checkout</h2>
          <span className="text-[10px] text-slate-400 dark:text-slate-500 font-mono select-all">Ref: {reference}</span>
        </div>
      </div>

      {/* Invoice Details */}
      <div className="bg-slate-50 dark:bg-black/20 p-4 rounded-xl border border-slate-100 dark:border-white/5 flex justify-between items-center">
        <span className="text-xs text-slate-500 dark:text-gray-400">Total Invoice Amount</span>
        <span className="font-bold text-slate-800 dark:text-white text-lg font-mono">
          {currency} ${parseFloat(amount).toFixed(2)}
        </span>
      </div>

      {errorMessage && (
        <div className="bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs rounded-lg p-3">
          {errorMessage}
        </div>
      )}

      {/* Simulated Form Fields */}
      <div className="space-y-4">
        <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">Simulated Payment Card Details</p>
        <div className="grid grid-cols-1 gap-3 text-xs">
          <div className="bg-slate-50/50 dark:bg-white/3 p-3.5 rounded-xl border border-slate-100 dark:border-white/5 text-slate-500 dark:text-gray-400">
            Cardholder Email: <strong className="text-slate-800 dark:text-white font-medium">{email}</strong>
          </div>
          <div className="bg-slate-50/50 dark:bg-white/3 p-3.5 rounded-xl border border-slate-100 dark:border-white/5 text-slate-500 dark:text-gray-400">
            Payment Type: <strong className="text-slate-800 dark:text-white font-medium">EcoCash / OneMoney / Visa Card</strong>
          </div>
        </div>
      </div>

      {/* Actions */}
      <div className="flex flex-col gap-3 pt-4 border-t border-slate-100 dark:border-white/5">
        <button
          onClick={() => handleSimulatePayment('SUCCESS')}
          disabled={paymentStatus === 'PROCESSING'}
          className="w-full bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-semibold py-3 rounded-xl text-sm transition-all shadow-md shadow-emerald-600/10 dark:shadow-emerald-500/15 cursor-pointer disabled:opacity-50"
        >
          {paymentStatus === 'PROCESSING' ? 'Processing Transaction...' : 'Simulate SUCCESS Payment'}
        </button>
        <button
          onClick={() => handleSimulatePayment('FAILED')}
          disabled={paymentStatus === 'PROCESSING'}
          className="w-full bg-rose-50 dark:bg-rose-500/10 hover:bg-rose-100 dark:hover:bg-rose-500/20 border border-rose-100 dark:border-rose-500/20 text-rose-600 dark:text-rose-400 font-semibold py-3 rounded-xl text-sm transition-all cursor-pointer disabled:opacity-50"
        >
          Simulate FAILED Payment
        </button>
      </div>
    </div>
  );
}

export default function CheckoutPage() {
  return (
    <div className="min-h-screen flex items-center justify-center p-4 bg-background text-slate-800 dark:text-gray-100 font-sans">
      <div className="glass-panel w-full max-w-md rounded-2xl p-8 shadow-2xl relative overflow-hidden">
        <Suspense fallback={<div className="text-center text-xs text-gray-500">Loading checkout session...</div>}>
          <CheckoutForm />
        </Suspense>
      </div>
    </div>
  );
}