'use client'

// redacted imports to improve clarity

export type AddPaymentMethodProps = {
  open: boolean
  onClose: () => void
}

export function AddPaymentMethod({ open, onClose }: AddPaymentMethodProps) {
  const [ready, setReady] = useState(false)
  const { mutateAsync: createOrganizationBillingCardIntent } =
    useCreateOrganizationBillingCardIntent()
  const { mutateAsync: confirmCreateOrganizationBillingCardIntent } =
    useConfirmCreateOrganizationBillingCardIntent()
  const { toast } = useToast()

  const {
    mutateAsync: submit,
    error,
    isPending: isSubmitting,
  } = useMutation({
    mutationFn: async ({
      confirm,
    }: Parameters<FillPaymentFormProps['handleSubmit']>[0]) => {
      const { clientSecret, intentId } =
        await createOrganizationBillingCardIntent()

      await confirm({ clientSecret })

      await confirmCreateOrganizationBillingCardIntent({
        intentId,
      })

      toast({
        title: 'Payment method added',
        description: 'Your payment method has been added successfully',
      })

      onClose()
    },
  })

  const handleSubmit = useCallback(
    async ({
      confirm,
    }: Parameters<FillPaymentFormProps['handleSubmit']>[0]) => {
      await submit({ confirm })
    },
    [submit],
  )

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Add payment method</DialogTitle>
          <DialogDescription>
            Add a new payment method to your account.
          </DialogDescription>
        </DialogHeader>
        <FillPayment mode="setup" currency="usd"> 
          <FillPaymentForm
            className="flex flex-col"
            onReady={() => setReady(true)}
            handleSubmit={handleSubmit}
          >
            {error && (
              <p className="text-center text-red-500">{error.message}</p>
            )}
            <Button
              disabled={!ready || isSubmitting}
              type="submit"
              className="w-fit self-end"
            >
              Save Payment Method
            </Button>
          </FillPaymentForm>
        </FillPayment>
      </DialogContent>
    </Dialog>
  )
}

'use client'

type SetupMode = {
  mode: 'setup'
}

type PaymentMode = {
  mode: 'payment'
  amount: number
}

type BaseProps = {
  children: React.ReactNode
  currency: string
}

type FillPaymentProps = BaseProps & (SetupMode | PaymentMode)

export function FillPayment(props: FillPaymentProps) {
  const { theme } = useTheme()

  const appearance =
    theme === 'dark'
      ? {
          variables: {
            colorBackground: '#000',
            colorText: '#fff',
          },
        }
      : undefined

  return (
    <Elements
      options={{
        mode: props.mode,
        amount: props.mode === 'payment' ? props.amount : undefined,
        currency: props.currency,
        paymentMethodTypes: ['card'],
        appearance,
      }}
      stripe={stripePromise}
    >
      {props.children}
    </Elements>
  )
}

export type FillPaymentFormProps = {
  children: React.ReactNode
  className?: string
  onReady: () => void
  handleSubmit: ({
    confirm,
  }: {
    confirm: ({
      clientSecret,
    }: {
      clientSecret: string
    }) => Promise<SetupIntent>
  }) => void
}

export function FillPaymentForm({
  handleSubmit,
  onReady,
  className,
  children,
}: FillPaymentFormProps) {
  const stripe = useStripe()
  const elements = useElements()

  const submit = useCallback(
    async (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault()
      // stripe and elements will be null when submitting
      if (!stripe || !elements) return

      await elements.submit()

      handleSubmit({
        confirm: async ({ clientSecret }) => {
          try {
            const { error, setupIntent } = await stripe.confirmSetup({
              clientSecret,
              elements,
              redirect: 'if_required',
            })

            if (error) throw error

            return setupIntent
          } catch (error) {
            if (
              typeof error === 'object' &&
              error &&
              'message' in error &&
              typeof error.message === 'string'
            )
              throw new Error(error.message)

            throw new Error(
              'Unable to confirm your payment method. Try again later or another payment method.',
            )
          }
        },
      })
    },
    [handleSubmit],
  )

  return (
    <form onSubmit={submit} className={cn('space-y-4', className)}>
      <PaymentElement onReady={onReady} />
      {children}
    </form>
  )
}