'use client';

import React, { useState } from 'react';
import {
  validateCardInput,
  detectCardBrand,
  formatCardNumber,
  formatAirwallexAmount,
} from '@kido/payment-airwallex';

export function AirwallexCardForm({ amount = 49.99, currency = 'USD' }) {
  const [cardNumber, setCardNumber] = useState('');
  const [expiry, setExpiry] = useState('');
  const [cvc, setCvc] = useState('');
  const [brand, setBrand] = useState('unknown');
  const [error, setError] = useState<string | null>(null);

  const handleCardChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const rawValue = e.target.value.replace(/\s+/g, '');
    setCardNumber(formatCardNumber(rawValue));
    setBrand(detectCardBrand(rawValue));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const [expMonth, expYear] = expiry.split('/');

    // Validate card locally with zero API latency
    const validation = validateCardInput({
      name: 'Test Customer',
      cardNumber: cardNumber.replace(/\s+/g, ''),
      expMonth,
      expYear: `20${expYear}`,
      cvc,
    });

    if (!validation.isValid) {
      setError(validation.errors[0]?.message || 'Invalid card details');
      return;
    }

    setError(null);
    console.log('[Airwallex] Card valid. Initiating payment intent...');
  };

  return (
    <form onSubmit={handleSubmit} className="p-6 bg-slate-900 rounded-2xl max-w-md space-y-4 text-white">
      <div className="flex justify-between items-center mb-2">
        <span className="text-sm text-slate-400">Total Due:</span>
        <span className="text-xl font-bold text-emerald-400">
          {formatAirwallexAmount(amount, currency)}
        </span>
      </div>

      <div>
        <label className="block text-xs uppercase text-slate-400 mb-1">Card Number ({brand.toUpperCase()})</label>
        <input
          type="text"
          value={cardNumber}
          onChange={handleCardChange}
          placeholder="4111 2222 3333 4444"
          className="w-full bg-slate-800 border border-slate-700 p-3 rounded-lg font-mono text-sm"
        />
      </div>

      {error && <p className="text-xs text-rose-400">{error}</p>}

      <button type="submit" className="w-full bg-indigo-600 hover:bg-indigo-500 py-3 rounded-lg font-semibold">
        Pay Now
      </button>
    </form>
  );
}

import {
  verifyAirwallexWebhookSignature,
  parseAirwallexWebhook,
} from '@kido/payment-airwallex';

export async function POST(req: Request) {
  const rawBody = await req.text();
  const signature = req.headers.get('x-signature') || '';

  const isValid = verifyAirwallexWebhookSignature(
    rawBody,
    signature,
    process.env.AIRWALLEX_WEBHOOK_SECRET || 'wh_secret'
  );

  if (!isValid) {
    return new Response(JSON.stringify({ error: 'Invalid HMAC signature' }), { status: 400 });
  }

  const event = parseAirwallexWebhook(JSON.parse(rawBody));
  console.log(`[Airwallex Webhook] Event: ${event.name}, Intent: ${event.data.object.id}`);

  return new Response(JSON.stringify({ status: 'success' }), { status: 200 });
}