/**
 * CheckoutPaymentForm — Formulaire de paiement Hyperswitch
 * v0.402 P1.5: Intégration @juspay-tech/react-hyper-js pour client_secret
 */

import { useState, useEffect } from 'react';
import { loadHyper } from '@juspay-tech/hyper-js';
import { HyperElements, UnifiedCheckout } from '@juspay-tech/react-hyper-js';
import { Button } from '@/components/ui/button';
import type { HyperInstance } from '@juspay-tech/hyper-js';

interface CheckoutPaymentFormProps {
  clientSecret: string;
  returnUrl?: string; // Set at payment creation; kept for potential override
  onCancel: () => void;
}

function PaymentFormInner({ onCancel }: { onCancel: () => void }) {
  return (
    <div className="space-y-4">
      <UnifiedCheckout
        onPaymentComplete={() => {
          // Hyperswitch redirects via return_url (set at payment creation) on success
        }}
      />
      <div className="pt-4">
        <Button type="button" variant="outline" onClick={onCancel}>
          Cancel
        </Button>
      </div>
    </div>
  );
}

export function CheckoutPaymentForm({ clientSecret, onCancel }: CheckoutPaymentFormProps) {
  const publishableKey = import.meta.env.VITE_HYPERSWITCH_PUBLISHABLE_KEY;
  const [hyperPromise, setHyperPromise] = useState<Promise<HyperInstance | null> | null>(null);

  useEffect(() => {
    if (publishableKey) {
      setHyperPromise(loadHyper(publishableKey));
    }
  }, [publishableKey]);

  if (!publishableKey) {
    return (
      <div className="space-y-4 p-4 rounded-lg bg-muted/50">
        <p className="text-sm text-muted-foreground">
          Configure VITE_HYPERSWITCH_PUBLISHABLE_KEY in .env.local to enable payment form.
        </p>
        <p className="text-xs text-muted-foreground">
          For now, you can complete payment via the Hyperswitch hosted page or use simulated payments (HYPERSWITCH_ENABLED=false).
        </p>
        <Button variant="outline" onClick={onCancel}>
          Back to cart
        </Button>
      </div>
    );
  }

  if (!hyperPromise) {
    return <div className="animate-pulse h-32 bg-muted/50 rounded-lg" />;
  }

  const options = {
    clientSecret,
    locale: 'en',
  };

  return (
    <HyperElements hyper={hyperPromise} options={options}>
      <PaymentFormInner onCancel={onCancel} />
    </HyperElements>
  );
}