'use client';

import { useEffect, useRef } from 'react';
import { PlexyCheckout, Card } from '@plexy/plexy-web';
import '@plexy/plexy-web/styles/plexy.css';
import type { CoreConfiguration, UIElement } from '@plexy/plexy-web';

export function CardOnly({
  session,
}: {
  session: { id: string; sessionData: string };
}) {
  const ref = useRef<HTMLDivElement>(null);
  const initialized = useRef(false);

  useEffect(() => {
    if (initialized.current || !ref.current) return;
    initialized.current = true;

    const options: CoreConfiguration = {
      clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
      environment: 'test',
      countryCode: 'KZ',
      locale: 'en-US',
      amount: { value: 10000, currency: 'KZT' },
      session,
    };

    PlexyCheckout(options).then((checkout) => {
      new Card(checkout, {
        hasHolderName: true,
        onChange(state: { isValid: boolean }, element: UIElement) {
          // Update your pay-button state here.
        },
        onSubmit(state, element: UIElement) {
          // Only fires in the Advanced flow — forward to your backend.
        },
        onError(error) {
          console.error(error);
        },
      }).mount(ref.current!);
    });
  }, [session]);

  return <div ref={ref} />;
}